Ashish Sharma

← all posts

Building a Personal Website with Astro

astrogithub-pagesdeploymentpersonal-website

Building a Personal Website with Astro

In this post, I’ll walk you through creating a modern personal website with Astro and deploying it to GitHub Pages. This approach gives you a fast, maintainable site with minimal overhead.

The Benefits

  • Static generation: Your site is pre-built and served directly from GitHub Pages.
  • Markdown-first: Write your blog posts in Markdown, manage projects in simple data files.
  • SEO-friendly: Built-in support for metadata, sitemaps, and structured data.
  • Version control: Your entire site is in git, so you track all changes.

Project Structure

personal-website/
├── src/
│   ├── pages/           # Routes
│   ├── layouts/         # Reusable templates
│   ├── components/      # UI components
│   ├── content/
│   │   └── blog/        # Markdown posts
│   ├── data/            # Data files (projects, etc.)
│   └── config/          # Site config
├── public/              # Static assets
├── astro.config.mjs     # Astro configuration
└── package.json

Content Management

Blog Posts

Store blog posts in src/content/blog/ as Markdown files. Each post should have frontmatter:

---
title: Post Title
description: Short description
pubDate: 2025-01-20
tags: [tag1, tag2]
draft: false
---

# Your content here...

Projects

Edit src/data/projects.ts to add, update, or remove projects. The data file is then used to generate the projects page dynamically.

Deployment

Use GitHub Actions to automatically build and deploy your site. Create .github/workflows/deploy.yml:

name: Deploy to Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    steps:
      - uses: actions/download-artifact@v4
      - uses: actions/deploy-pages@v4

Conclusion

With Astro and GitHub Pages, you can build a professional personal website that’s fast, maintainable, and easy to customize. Give it a try!