Frontend Development

Tạo blog cá nhân siêu nhanh bằng Astro và Markdown

12/5/2026

Trong thời đại website cần tốc độ tải nhanh, tối ưu SEO và dễ quản lý nội dung, Astro + Markdown đang trở thành lựa chọn cực kỳ phổ biến cho developer và blogger cá nhân. Không cần CMS phức tạp hay database nặng nề, bạn vẫn có thể xây dựng một blog chuyên nghiệp, nhanh và dễ mở rộng.

Trong bài viết này, bạn sẽ học cách tạo blog cá nhân bằng Astro và Markdown, bao gồm:

  • Tạo layout blog

  • Viết bài bằng Markdown

  • Highlight code đẹp mắt

  • Table of Contents (Mục lục tự động)

  • RSS Feed

  • Sitemap chuẩn SEO

  • Related Posts (bài viết liên quan)

Vì sao nên dùng Astro để làm blog?

Astro là framework hiện đại tập trung vào hiệu năng và SEO. Không giống nhiều framework frontend khác phải tải nhiều JavaScript lên trình duyệt, Astro chỉ render HTML tĩnh giúp website tải cực nhanh.

Ưu điểm của Astro khi làm blog

✅ Tốc độ cực nhanh
✅ SEO tốt
✅ Viết nội dung bằng Markdown đơn giản
✅ Không cần database
✅ Dễ deploy miễn phí lên Vercel hoặc Netlify
✅ Hỗ trợ MDX nếu muốn dùng React component trong bài viết

Nếu bạn muốn xây dựng blog cá nhân giống Dev.to, Medium hoặc website tài liệu thì Astro là lựa chọn rất đáng cân nhắc.

Bước 1: Tạo project Astro

Đầu tiên, tạo project mới:

npm create astro@latest

Hoặc nếu bạn dùng pnpm:

pnpm create astro

Sau đó chọn:

Minimal  
TypeScript (optional)  
Install dependencies: Yes

Chạy project:

npm run dev

Mở:

http://localhost:4321

Bước 2: Cài đặt Content Collections cho blog

Astro có hệ thống Content Collections giúp quản lý bài viết chuyên nghiệp.

Cài package:

npx astro add content

Tạo cấu trúc thư mục:

src/  
 ├── content/  
 │   └── blog/  
 │       ├── first-post.md  
 │       └── second-post.md

Bước 3: Viết bài bằng Markdown

Tạo file:

src/content/blog/hello-world.md

Ví dụ nội dung:

---  
title: "Hello Astro Blog"  
description: "Blog đầu tiên bằng Astro"  
pubDate: 2026-05-09  
heroImage: "/images/blog.jpg"  
tags: ["astro", "markdown"]  
---  
  
# Xin chào Astro  
  
Đây là bài viết blog đầu tiên của tôi.  
  
## Markdown rất dễ viết  
  
Bạn có thể dùng:  
  
- Danh sách  
- Hình ảnh  
- Code block  
- Heading

Markdown giúp bạn tập trung viết nội dung thay vì chỉnh giao diện.

Bước 4: Tạo schema validation cho bài viết

Để tránh lỗi thiếu dữ liệu, hãy tạo schema.

Tạo file:

// src/content.config.ts  
  
import { defineCollection, z } from"astro:content";  
  
constblog=defineCollection({  
  schema: z.object({  
    title: z.string(),  
    description: z.string(),  
    pubDate: z.date(),  
    heroImage: z.string().optional(),  
    tags: z.array(z.string()).default([]),  
  }),  
});  
  
exportconstcollections= {  
  blog,  
};

Lợi ích:

  • Tránh lỗi thiếu title

  • Kiểm tra kiểu dữ liệu

  • Quản lý metadata tốt hơn

Bước 5: Tạo layout blog

Tạo file layout:

src/layouts/BlogLayout.astro

Ví dụ:

---  
const { frontmatter } = Astro.props;  
---  
  
<html lang="en">  
  <head>  
    <title>{frontmatter.title}</title>  
    <meta  
      name="description"  
      content={frontmatter.description}  
    />  
  </head>  
  
  <body>  
    <article>  
      <h1>{frontmatter.title}</h1>  
      <slot />  
    </article>  
  </body>  
</html>

Sau đó sử dụng trong Markdown:

---  
layout: ../../layouts/BlogLayout.astro  
title: Hello World  
---  
  
Nội dung bài viết

Bước 6: Tạo trang danh sách blog

Tạo:

src/pages/blog/index.astro

Ví dụ:

---  
import { getCollection } from "astro:content";  
  
const posts = await getCollection("blog");  
---  
  
<h1>Blog</h1>  
  
{  
  posts.map((post) => (  
    <a href={`/blog/${post.slug}`}>  
      <h2>{post.data.title}</h2>  
    </a>  
  ))  
}

Website sẽ tự động hiển thị toàn bộ bài viết.

Bước 7: Dynamic Routes cho từng bài viết

Tạo file:

src/pages/blog/[slug].astro

Ví dụ:

---  
import { getCollection, render } from "astro:content";  
  
export async function getStaticPaths() {  
  const posts = await getCollection("blog");  
  
  return posts.map((post) => ({  
    params: {  
      slug: post.slug,  
    },  
    props: post,  
  }));  
}  
  
const post = Astro.props;  
const { Content } = await render(post);  
---  
  
<h1>{post.data.title}</h1>  
  
<Content />

Astro sẽ tự generate route như:

/blog/hello-world  
/blog/my-first-post

Bước 8: Highlight code đẹp mắt

Blog kỹ thuật không thể thiếu syntax highlighting.

Astro hỗ trợ sẵn Shiki.

Ví dụ trong Markdown:

const hello = "Astro";  
console.log(hello);  


Code sẽ tự động highlight rất đẹp mà không cần cài thêm package.

Bạn có thể custom theme:



```tsx
// astro.config.mjs  
  
exportdefaultdefineConfig({  
  markdown: {  
    shikiConfig: {  
      theme: "github-dark",  
    },  
  },  
});

Bước 9: Tạo Table of Contents (Mục lục tự động)

TOC giúp SEO tốt hơn và tăng trải nghiệm đọc.

Cài plugin:

npm install rehype-toc

Config:

markdown: {  
rehypePlugins: [rehypeToc]  
}

Astro sẽ tự generate mục lục từ heading:

## Giới thiệu  
## Cài đặt  
## SEO

Bước 10: Tạo RSS Feed

RSS giúp người đọc subscribe blog của bạn.

Cài integration:

npx astro add rss

Tạo file:

src/pages/rss.xml.js

Ví dụ:

importrssfrom"@astrojs/rss";  
import { getCollection } from"astro:content";  
  
exportasyncfunctionGET(context) {  
constposts=awaitgetCollection("blog");  
  
returnrss({  
    title: "My Blog",  
    site: context.site,  
    items: posts.map((post) => ({  
      title: post.data.title,  
      pubDate: post.data.pubDate,  
      link: `/blog/${post.slug}`,  
    })),  
  });  
}

Bước 11: Tạo Sitemap chuẩn SEO

Sitemap giúp Google index website tốt hơn.

Cài đặt:

npx astro add sitemap

Sau đó thêm vào:

// astro.config.mjs  
  
importsitemapfrom"@astrojs/sitemap";  
  
exportdefaultdefineConfig({  
  site: "https://yourdomain.com",  
  integrations: [sitemap()],  
});

Kết quả:

/sitemap-index.xml

Google sẽ crawl website dễ dàng hơn.

Bước 12: Hiển thị Related Posts

Bài viết liên quan giúp tăng thời gian onsite.

Ví dụ filter theo tags:

constrelatedPosts=posts.filter(  
  (item) =>  
item.slug !==post.slug &&  
item.data.tags.some((tag) =>  
post.data.tags.includes(tag)  
    )  
);

Hiển thị:

{  
  relatedPosts.map((item) => (  
    <a href={`/blog/${item.slug}`}>  
      {item.data.title}  
    </a>  
  ))  
}

Cấu trúc blog Astro hoàn chỉnh

Thư mục đề xuất:

src/  
├── content/  
│   └── blog/  
├── layouts/  
│   └── BlogLayout.astro  
├── pages/  
│   └── blog/  
│       ├── index.astro  
│       └── [slug].astro  
├── components/  
│   ├── TableOfContents.astro  
│   └── RelatedPosts.astro

Cấu trúc này giúp dự án dễ mở rộng hơn khi số lượng bài viết tăng lên.

Kết luận

Nếu bạn muốn tạo blog cá nhân siêu nhanh, chuẩn SEO và dễ quản lý, thì Astro + Markdown là một lựa chọn rất đáng dùng trong năm 2026.

Chỉ với vài bước, bạn đã có thể:

  • Viết blog bằng Markdown

  • Tự động generate route

  • Highlight code đẹp

  • Có RSS feed

  • Sitemap chuẩn SEO

  • Related posts tăng trải nghiệm người dùng

Đặc biệt, blog Astro cực kỳ nhẹ và đạt điểm hiệu năng rất cao trên Google PageSpeed.

Nếu bạn đang tìm giải pháp astro markdown blog, muốn tạo blog astro hoặc bắt đầu với astro blogging, đây là stack rất phù hợp để bắt đầu nhanh chóng và tối ưu lâu dài.

Tags

#Astro.js #TypeScript #Tối ưu hiệu năng web

Góp ý nội dung