https://github.com/jperez00/astrolinks
AstroLinks - A minimalist link in bio template built with Astro and Tailwind CSS, hosted on GitHub Pages.
https://github.com/jperez00/astrolinks
astro astro-icon astro-react astro-tailwind astrojs javascript linkinbio tailwindcss
Last synced: 3 months ago
JSON representation
AstroLinks - A minimalist link in bio template built with Astro and Tailwind CSS, hosted on GitHub Pages.
- Host: GitHub
- URL: https://github.com/jperez00/astrolinks
- Owner: JPerez00
- License: mit
- Created: 2025-01-01T01:45:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-27T02:17:40.000Z (about 1 year ago)
- Last Synced: 2025-10-19T17:53:49.534Z (8 months ago)
- Topics: astro, astro-icon, astro-react, astro-tailwind, astrojs, javascript, linkinbio, tailwindcss
- Language: Astro
- Homepage: https://jperez00.github.io/astrolinks/
- Size: 2.24 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AstroLinks - Updated to v5.5.5
A minimalist link-in-bio template for all your social media links, built with Astro v5.5.5, Tailwind CSS and hosted on GitHub Pages.
This customized Astro starter kit includes Tailwind CSS, Astro Icon support, a light and dark mode toggle and the Typewriter effect, with automated deployment to GitHub Pages.
For more details on how I built this, check out the [blog](https://www.jorge-perez.dev/blog/astro-simple-project).
## Live Project Via GitHub Pages
[https://jperez00.github.io/astrolinks/](https://jperez00.github.io/astrolinks/)
## Features
- **Astro + Tailwind**: Integrated Tailwind for utility-first styling.
- **Light & Dark mode toggle**: Integrated `darkclass` from Tailwind.
- **Layout & Components**: Created a reusable `Layout.astro` and a separate `index.astro` page.
- **Icons**: Used [astro-icon](https://www.astroicon.dev/) to import icons, including local SVGs in `src/icons/`.
- **GitHub Pages Deployment**: Configured `astro.config.mjs` with `site` and `base` settings, and added a GitHub Actions workflow (`.github/workflows/deploy.yml`) to deploy the site to [GitHub Pages](https://pages.github.com/).
- **Typewriter effect**: Using React components in Astro, thanks to `@astrojs/react`.
## Project Structure
```text
/
├── public/
│ └── favicon.svg
│ └── portrait.webp
├── src/
│ ├── components/
│ │ └── Footer.astro
│ │ └── TypewriterText.tsx
│ │ └── ToggleTheme.tsx
│ ├── icons/
│ │ └── github.svg
│ │ └── linkedin.svg
│ │ └── terminal.svg
│ │ └── twitter.svg
│ │ └── instagram.svg
│ ├── layouts/
│ │ └── Layout.astro
│ ├── pages/
│ │ └── index.astro
│ └── styles/
│ └── global.css
└── package.json
```
To learn more about the folder structure of an Astro project, refer to [this guide on project structure](https://docs.astro.build/en/basics/project-structure/).
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| npm install | Installs dependencies |
| npm run dev | Starts local dev server at localhost:4321 |
| npm run build | Build your production site to ./dist/ |
| npm run preview | Preview your build locally, before deploying |
| npm run astro ... | Run CLI commands like astro add, astro check |
| npm run astro -- --help | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check the [Astro documentation](https://docs.astro.build).