How to Build a Personal Website with Astro

Building a personal website does not have to be complicated. Whether you want a portfolio, personal blog, professional profile, or a website for your business, modern web development tools make it possible to build a fast and professional website without creating everything from scratch.

One framework worth considering is Astro.

Astro is designed with performance in mind and works especially well for websites where most of the content is static, such as portfolios, blogs, documentation sites, landing pages, and personal websites.

In this guide, we will look at how you can build a personal website with Astro and what you should consider before publishing it.

What Is Astro?

Astro is a modern web framework for building fast content-focused websites.

Unlike traditional JavaScript-heavy websites, Astro allows you to send mostly HTML and CSS to the browser and add JavaScript only when it is actually needed.

This approach can help reduce unnecessary client-side JavaScript and improve website performance.

Astro can also work with other technologies and frameworks, including React, Vue, Svelte, and others. This means you can still use interactive components when your website needs them.

For a personal website, however, you can often build most pages using Astro’s own components without requiring much JavaScript.

Why Use Astro for a Personal Website?

There are several reasons Astro can be a good choice for a personal website.

1. Performance

Personal websites usually do not need a large amount of client-side JavaScript.

Astro can generate lightweight pages that load quickly and provide a good experience for visitors.

Performance is particularly important for websites where visitors may arrive from search engines, social media, or mobile devices.

2. SEO-Friendly Structure

Astro gives you control over important SEO elements such as:

• Page titles
• Meta descriptions
• Canonical URLs
• Open Graph metadata
• Robots directives
• Sitemap generation
• Structured data

These elements can help search engines understand your website and its content.

However, using Astro alone does not automatically make a website rank well. Your content, site structure, backlinks, technical SEO, and overall usefulness still matter.

3. Content Management with Markdown

If you want to publish articles, Astro works very well with Markdown.

Instead of creating a separate HTML page for every article, you can create Markdown files containing your content.

For example:

src/
└── content/
    └── blog/
        ├── ai-explained.md
        ├── ai-tools.md
        └── astro-website.md

Each Markdown file can contain the article content along with metadata such as its title, description, date, category, and tags.

This makes publishing new articles much easier.

4. Flexible Design

Astro does not force you to use a particular UI design.

You can use:

• Tailwind CSS
• Plain CSS
• CSS frameworks
• DaisyUI
• React components
• Other UI libraries

This gives you a lot of flexibility when designing your personal brand.

What Do You Need to Build an Astro Website?

You do not need a huge technology stack for a personal website.

A simple setup could include:

• Astro
• JavaScript
• Tailwind CSS
• A UI library such as DaisyUI
• Markdown for blog content
• GitHub for version control
• Cloudflare for hosting and DNS

You can also add React when you need interactive components.

The important thing is not to add technologies simply because they are popular. Use a tool when it solves a real problem for your website.

Step 1: Create an Astro Project

The first step is to create a new Astro project.

You can use Astro’s project creation command:

npm create astro@latest

The setup process will ask you a few questions about your project.

After the project is created, move into the project directory:

cd your-project-name

Then install the dependencies:

npm install

You can start the development server with:

npm run dev

Astro will provide a local development URL where you can preview your website.

Step 2: Create Your Website Structure

A personal website usually needs several basic pages.

For example:

src/
├── components/
├── content/
│   └── blog/
├── layouts/
├── pages/
│   ├── index.astro
│   ├── about.astro
│   ├── projects.astro
│   ├── contact.astro
│   └── blog/
└── styles/

You can customize this structure based on your needs.

A simple personal website might contain:

Home

Your homepage introduces who you are and what you do.

About

The About page can explain your background, experience, interests, and current work.

Projects

This page can showcase your software, products, businesses, client work, or other projects.

Blog

The blog can contain articles about topics related to your expertise and interests.

Contact

The Contact page gives visitors a way to reach you.

You do not necessarily need every page from the beginning. Start with the pages that provide genuine value.

Step 3: Create a Reusable Layout

One useful feature of Astro is its component and layout system.

Instead of repeating the same header, footer, metadata, and other HTML on every page, you can create a reusable layout.

For example:

src/
└── layouts/
    └── Layout.astro

Your layout can contain:

• HTML structure
• SEO metadata
• Favicon
• Header
• Footer
• Analytics
• Other global elements

Then individual pages can use that layout.

For example:

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="About | Muhammad Sami">
    <main>
        <h1>About Me</h1>
        <p>This is my personal website.</p>
    </main>
</Layout>

This makes your website easier to maintain.

If you later change your navigation or footer, you can update the shared component instead of editing every page.

Step 4: Add Your Personal Branding

A personal website should communicate your identity quickly.

Your homepage should make it clear:

• Who you are
• What you do
• What you are working on
• What visitors can explore

For example, a founder might focus on:

Business, Product Development, Technology, AI, and Investing

A software engineer might instead focus on:

Software Development, AI, Cloud Computing, and Open Source

Your website should reflect your current professional direction rather than simply listing every technology you have ever used.

Step 5: Add a Blog

A blog can make a personal website much more useful.

With Astro, you can create Markdown files for your articles.

For example:

src/content/blog/
├── ai-explained.md
├── ai-tools.md
└── astro-website.md

A Markdown article can contain frontmatter:

---
title: "How to Build a Personal Website with Astro"
description: "Learn how to build a fast personal website with Astro."
pubDate: 2026-10-09
category: "Web Development"
tags:
  - Astro
  - Web Development
  - SEO
---

The rest of the file contains the actual article.

Your Astro blog page can then automatically read these files and generate the article pages.

This is one of the biggest advantages of a content-driven architecture.

Step 6: Make Your Website Responsive

A personal website should work well on:

• Phones
• Tablets
• Laptops
• Desktop monitors

Do not design only for your own screen.

Mobile visitors may make up a significant portion of your traffic, depending on your audience.

When designing your website, check:

• Navigation
• Buttons
• Typography
• Images
• Cards
• Spacing
• Forms
• Hero sections

on smaller screens.

A beautiful desktop design that is difficult to use on a phone is still a poor website experience.

Step 7: Optimize Images

Large images can significantly increase page size.

Before adding images to your website, consider:

• Image dimensions
• File format
• Compression
• Responsive sizing
• Lazy loading
• Appropriate alt text

For example, a huge camera image should not be loaded at several megabytes if it is only displayed as a small card thumbnail.

Astro also provides tools and integrations that can help with image optimization when you need them.

Step 8: Add SEO Metadata

Every important page should have appropriate metadata.

At minimum, consider:

<title>Your Page Title</title>
<meta name="description" content="Your page description" />
<link rel="canonical" href="https://example.com/page" />

You can also add Open Graph metadata for social sharing:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://example.com/image.jpg" />

For articles, you can also add structured data such as Article and BreadcrumbList schema.

These features do not guarantee higher rankings, but they help search engines and other platforms understand your pages.

Step 9: Create a Sitemap

A sitemap helps search engines discover the URLs on your website.

Astro has an official sitemap integration that can generate a sitemap automatically during the build process.

For example, your website can generate:

https://example.com/sitemap-index.xml

or a sitemap URL depending on your configuration and project structure.

This becomes especially useful as your website grows and you publish more pages.

Step 10: Create a Robots.txt File

A robots.txt file tells crawlers which areas of your website they are allowed or not allowed to crawl.

A simple file could look like:

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap-index.xml

For a normal public personal website, you generally want important public pages to remain crawlable.

Do not use robots.txt as a replacement for proper page-level indexing controls.

Step 11: Test Your Website Before Publishing

Before deploying your website, test it locally.

Run:

npm run build

If the build completes successfully, preview the production build:

npm run preview

Then check the website manually.

Look for:

• Broken links
• Missing images
• Incorrect page titles
• Mobile layout problems
• Console errors
• Incorrect URLs
• Missing metadata
• Slow-loading assets
• 404 pages

Testing before deployment can save a lot of time later.

Step 12: Put Your Website on GitHub

Git is useful for keeping track of your website code.

Create a Git repository for your Astro project and push it to GitHub.

A typical workflow looks like:

git init
git add .
git commit -m "Initial Astro website"
git branch -M main
git remote add origin YOUR_GITHUB_REPOSITORY
git push -u origin main

After that, future updates become much easier.

You can make changes locally, commit them, and push them to GitHub.

Step 13: Deploy Your Website

Once your website is on GitHub, you need a hosting platform.

Astro websites can be deployed to several platforms.

For a static personal website, platforms such as Cloudflare Pages, Netlify, or similar services can work well.

The general process is:

1. Connect your GitHub repository.
2. Select your Astro project.
3. Configure the build command.
4. Set the output directory if required.
5. Deploy the website.
6. Connect your custom domain.
7. Configure DNS.
8. Test the live website.

After deployment, every time you push changes to the repository, your hosting platform can rebuild and publish the updated website automatically.

Static Website vs Dynamic Website

One important question is whether your website actually needs a backend.

A personal portfolio and blog often do not need one.

A static architecture can be enough when your website mainly contains:

• Pages
• Blog posts
• Projects
• Images
• Contact information
• Documentation
• Business information

You may need a backend when you introduce features such as:

• User accounts
• Private dashboards
• Complex databases
• Real-time applications
• User-generated content
• Advanced e-commerce functionality

Do not build a complicated backend simply because you think every website needs one.

Choose the simplest architecture that solves the actual problem.

How Astro Can Work With React

You do not have to choose between Astro and React completely.

Astro can use React components when you need interactivity.

For example, your website could use Astro for most pages and React for components such as:

• Interactive calculators
• Advanced forms
• Dashboards
• Interactive filters
• Dynamic UI elements

This approach lets you keep most pages lightweight while still having interactive parts where necessary.

Astro for a Personal Blog

Astro is particularly useful if your personal website includes a growing blog.

You can organize your content like this:

src/content/blog/
├── ai-explained.md
├── ai-tools.md
├── astro-website.md
├── productivity.md
└── future-article.md

Then your blog index can automatically:

1. Read the articles.
2. Filter drafts.
3. Sort articles by publication date.
4. Display titles and descriptions.
5. Generate links.
6. Create individual article pages.

This means adding another article does not require manually creating another HTML page.

You simply create another content file.

Common Mistakes to Avoid

Building Too Much Too Early

You do not need authentication, databases, APIs, and dozens of dependencies for a simple portfolio.

Start small.

Ignoring Mobile Design

Always test the website on smaller screens.

Using Too Much JavaScript

If a simple HTML component can solve the problem, you may not need a large client-side application.

Publishing Thin Content

If you are building a blog, do not publish articles simply to increase the number of pages.

Focus on useful content that answers real questions.

Ignoring Accessibility

Use proper headings, meaningful link text, image alt text, labels for forms, and sufficient contrast.

Forgetting SEO Basics

A website can look excellent while still having poor metadata, broken canonical URLs, missing sitemap configuration, or confusing page structure.

Technical polish and content quality both matter.

Is Astro Difficult to Learn?

If you already know HTML, CSS, and JavaScript, Astro is relatively approachable.

The basic concepts are straightforward:

• Components
• Pages
• Layouts
• Content
• Data
• Routing
• Static generation

You can start with a simple website and gradually learn more advanced features.

You do not need to understand every Astro feature before creating your first website.

Final Thoughts

Astro is a practical option for building a modern personal website, especially when performance, content, SEO, and simplicity are important.

A good personal website does not need to use the most complicated technology available.

The goal should be to create a website that is:

• Fast
• Easy to maintain
• Mobile-friendly
• Search-engine friendly
• Accessible
• Secure
• Useful to visitors

The technology is only one part of the process.

Your content, personal brand, projects, experience, and the value you provide to visitors are what ultimately make the website meaningful.

If you are building a portfolio or personal brand website, start with a strong homepage, an informative About page, a Projects section, and useful content. Then improve the website gradually as your needs grow.