How I Built This blog with Astro
A behind-the-scenes look at how I built my personal blog with Astro, content collections, Markdown, static pages, and SEO-friendly metadata.
Astro felt like the right tool for this portfolio because the site is mostly content: posts, topics, navigation, and a small personal introduction. I wanted something fast, simple to maintain, and easy to publish without turning the whole site into a heavy client-side app.
Why I Chose Astro
Astro is built around shipping less JavaScript by default. That matters for a blog because the first impression should be quick: the homepage should load fast, the writing should be readable immediately, and the navigation should not depend on a large runtime.
The project uses Astro pages for the main routes, Markdown for blog content, and content collections to validate each post. That gives me a structure that feels close to a documentation site, but still personal enough for a portfolio.
Content Collections
Each post has frontmatter for the title, description, topic, date, tags, and optional metadata like updatedDate and image. Astro validates those fields during the build, so mistakes show up before the site is deployed.
That setup keeps writing lightweight. I can create a new Markdown file, choose a topic, add a short description, and the site automatically turns it into a post page, sidebar link, RSS item, sitemap entry, and structured data.
Layout and Navigation
The layout uses a fixed sidebar on larger screens and a mobile menu on smaller screens. Topics are grouped in the sidebar, and each topic opens to show the posts inside it. I like this pattern because it makes the blog feel organized without needing a separate dashboard or search system right away.
The homepage introduces who I am, what I am learning, and where the newest posts live. From there, readers can jump into JavaScript, TypeScript, web development, or any future topic I add.
SEO and Sharing
A portfolio needs to be easy for people and search engines to understand. The site now has canonical URLs, Open Graph metadata, Twitter card metadata, a sitemap, robots.txt, RSS, and JSON-LD schema for posts.
For individual posts, the structured data includes the published date, modified date, main page URL, image, author, and publisher. Those details help search engines interpret the page as a real article instead of just a loose block of content.
What I Like About This Setup
The best part is that the site stays boring in the right places. Posts are Markdown. Routes are file-based. Metadata is shared from one layout. The build outputs static pages that are easy to host.
That gives me room to focus on learning and writing: JavaScript, TypeScript, Linux, DevOps, AI, and the projects I build along the way.