[Wordpress → Astro] Phần 2 - Cài đặt và cấu hình Astro làm blog

Trong bài viết [Phần 1], mình đã hướng dẫn các xuất bài viết trên WordPress và chuyển đổi thành file Markdown để sử dụng với các công cụ tạo static site. Bài viết [Phần 2] hôm nay sẽ hướng dẫn cách cài đặt Astro cùng các cấu hình cần thiết để sử dụng làm blog, thay thế cho WordPress.

1. Cài đặt Astro

Mình sẽ sử dụng theme Astro Starter Pro cho tiết kiệm thời gian phát triển.

Cài đặt bằng lệnh sau

1
npm create astro@latest -- --template devgelo-labs/astro-starter-pro

Truy cập vào thư mục vừa tạo và khởi động dev server

1
cd bldl-blog
2
npm run dev

1
> bldl-blog@0.0.1 dev
2
> astro dev
3

4
07:10:52 [types] Generated 0ms
5
07:10:53 [content] Syncing content
6
07:10:53 [content] Synced content
7

8
 astro  v5.16.8 ready in 1293 ms
9

10
┃ Local    http://localhost:4321/
11
┃ Network  use --host to expose
12

13
07:10:53 watching for file changes...

Sau đó truy cập vào địa chỉ http://localhost:4321 , nếu thấy hiện ra website nghĩa là Astro đã được cài đặt thành công.

2. Copy bài viết và ảnh vào

Mình sẽ xóa các bài viết demo đi kèm theo theme và copy bài viết của blog cùng hình ảnh đã xử lý ở Phần 1 vào thư mục tương ứng

1
rm -rf src/content/blog/*
2

3
cp ~/blog-migration/output/posts/*.md src/content/blog/
4

5
mkdir -p public/images
6
cp -r ~/blog-migration/output/posts/images/. public/images/

3. Cập nhật Content Schema

Sau khi copy nội dung và hình ảnh vào, site dev chắc chắn sẽ bị lỗi do một số thông số không khớp. Cần phải chỉnh lại trong file src/content.config.ts

1
import { defineCollection, z } from "astro:content";
2
import { glob } from "astro/loaders";
3

4
const blog = defineCollection({
5
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/blog" }),
6
  schema: z.object({
7
    title: z.string(),
8
    description: z.string().optional(),
9
    pubDatetime: z.coerce.date(),
10
    author: z.string(),
11
    image: z.string().optional(),
12
    tags: z.array(z.string()).optional(),
13
    categories: z.array(z.string()).optional(),
14
  }),
15
});
16

17
export const collections = { blog };

4. Chỉnh cấu trúc thư mục để khớp URL của WordPress

Trên WordPress, các bài viết được truy cập theo slug /%postname%/ — không có /blog/ nên mình cần phải di chuyển file [...slug].astro từ thư mục blog ra ngoài

1
mv src/pages/blog/[...slug].astro src/pages/[...slug].astro

Tương tự hai thư mục category và tag cũng cần phải di dời ra ngoài để khớp với URL cũ của WordPress. Cấu trúc thư mục sau khi chỉnh sửa src/pages sẽ như sau

1
.
2
├── 404.astro
3
├── [...slug].astro
4
├── about.astro
5
├── blog
6
│   └── [...page].astro
7
├── category
8
│   └── [category].astro
9
├── contact.astro
10
├── index.astro
11
├── robots.txt.ts
12
├── rss.xml.js
13
└── tags
14
    └── [tag].astro

Tiếp theo, mình sẽ dọn dẹp hết tất cả các components không sử dụng, cập nhật Header, NavBar, Footer và các thông tin liên quan cho khớp với nội dung trên blog hiện tại.

Khuyến khích bạn nên dùng Visual Studio Code và git để dễ kiểm soát thay đổi và phục hồi lại khi cần.

6. Kiểm tra trên local

Sau khi hoàn tất việc cập nhật nội dung, mình cho chạy lại dev mode để kiểm tra thành quả

1
npm run dev

Trang chủ đã hiện ra ngon lành, chưa giống 100% với trang gốc bên WordPress lắm. Vậy là tạm ổn rồi! Phần giao diện có thể tùy biến sau.

Sau đó, cũng cần kiểm tra các link của bài viết, category, tag có khớp với link bên WordPress không

http://localhost:4321/blog → trang blog khớp
http://localhost:4321/ten-bai-viet-cu → trang bài viết khớp.
http://localhost:4321/categories/du-lich → trang danh mục khớp
http://localhost:4321/tags/airbnb → trang tag khớp

Vậy là xong Giai đoạn 2: blog đã được chuyển thành công từ WordPress qua Astro. Tuy nhiên hiện tại blog vẫn đang chạy trên local, chưa được đẩy lên cloud. Trong các bài viết kế tiếp, mình sẽ chia sẻ cách lưu trữ hình ảnh trên Cloudflare R2 và đưa blog lên Cloudflare Pages.