A minimalist link-in-bio template for all your social media links, built with Astro and 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.
https://jperez00.github.io/astrolinks/
- 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 separateindex.astro
page. - Icons: Used astro-icon to import icons, including local SVGs in
src/icons/
. - GitHub Pages Deployment: Configured
astro.config.mjs
withsite
andbase
settings, and added a GitHub Actions workflow (.github/workflows/deploy.yml
) to deploy the site to GitHub Pages. - Typewriter effect: Using React components in Astro, thanks to
@astrojs/react
.
/
├── 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 our guide on project structure.
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 |
Feel free to check our documentation or jump into our Discord server.