Dựng blog tĩnh bằng Astro và Sanity

Tôi muốn viết blog mà không phải nuôi server, nhưng vẫn sửa bài được từ điện thoại. Astro lo phần tĩnh, Sanity lo phần nội dung, thế là đủ.

Toàn bộ nội dung đọc ở lúc build. Không có request nào chạy về CMS khi người đọc mở trang, nên trang chỉ là HTML và ảnh.

Nối hai thứ lại

Integration @sanity/astro tiêm sẵn một module tên sanity:client, và gắn luôn Studio vào một route trong cùng site.

import sanity from '@sanity/astro';
import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static',
  integrations: [
    sanity({
      projectId: process.env.PUBLIC_SANITY_PROJECT_ID,
      dataset: 'production',
      useCdn: true,
      studioBasePath: '/studio',
    }),
  ],
});

Query thì viết bằng GROQ

GROQ đọc lạ mắt lúc đầu nhưng gọn hơn GraphQL cho việc này. Một điểm phải nhớ: lọc bản nháp ra, nếu không bài chưa xong cũng lên site.

*[_type == "post" && !(_id in path("drafts.**"))]
  | order(publishedAt desc) {
    title,
    "slug": slug.current,
    publishedAt,
    "tags": tags[]->{ name, "slug": slug.current, color }
  }

Còn lại là chuyện bình thường: build ra thư mục tĩnh, đẩy lên hosting, xong.