Bởi Nguyễn Hồng Thế trong Dev — 15 Th09 2023

MyGhost - Giao diện tối giản cho Ghost blog

MyGhost được viết bằng Handlebars và biên dịch bằng Gulp/PostCSS. Bạn cần cài đặt Node, Yarn và Gulp để có thể phát triển giao diện.

Hướng dẫn

Cài đặt thủ công

Tải theme
Đăng nhập vào Ghost, và điều hướng đến khu vực cài đặt Design để tải lên tệp zip của theme.
Sau khi tải lên, bạn có thể chọn theme MyGhost để sử dụng.

Cài đặt tự động (khuyến khích nếu bạn muốn phát triển thêm giao diện)

Bạn có thể cài đặt theme tự động thông quan Github Action.

Đăng nhập vào khu vực admin của Ghost blog của bạn, và điều hướng đến khu vực Settings > Integrations > Add custom integration để tạo API.
Điền tên của API, ví dụ Github Action, và chọn Create.
Trong cửa sổ hiện ra, bạn sẽ thấy Admin API Key và API URL. Bạn sẽ cần 2 giá trị này để sử dụng trong các bước tiếp theo.
Tạo một fork của repo này. Fork MyGhost
Đăng nhập vào Github, và điều hướng đến khu vực Settings của repo.
Trong tab Secrets and variables, chọn Action.
Tiếp tục chọn Secrets, sau đó click nút New repository secret và tạo 2 biến môi trường GHOST_ADMIN_API_URL và GHOST_ADMIN_API_KEY với giá trị tương ứng là API URL và Admin API Key bạn đã tạo ở bước 3.
Chọn Actions và chọn I understand my workflows, go ahead and enable them.
Chọn Actions và chọn Deploy Theme.
Chọn Run workflow và chờ đợi quá trình cài đặt hoàn tất.

Chú ý: Các bước ở trên chỉ cần thực hiện một lần duy nhất. Sau này, mỗi khi bạn chỉnh sửa code của theme, commit và push code lên Github, Github Action sẽ tự động cài đặt theme mới vào website đang chạy Ghost blog cho bạn.

Phát triển

MyGhost được phát triển dựa trên theme cơ bản Starter của Ghost. Bạn có thể tham khảo Ghost Themes Documentation để biết thêm chi tiết.

Giao diện được viết bằng Handlebars và được biên dịch bằng Gulp/PostCSS. Bạn cần cài đặt Node, Yarn và Gulp để có thể phát triển giao diện.

Sau khi cài đặt các phần mềm cần thiết, bạn có thể chạy các lệnh sau để phát triển giao diện:

# Clone the repo
git clone https://github.com/nguyenhongthe/MyGhost.git

# Di chuyển vào thư mục giao diện
cd MyGhost

# Cài đặt các gói phụ thuộc
yarn

# Chạy giao diện trong chế độ phát triển
yarn dev

Bây giờ bạn có thể chỉnh sửa các tệp /assets/css/, các tệp này sẽ được biên dịch tự động vào thư mục /assets/built/.

Để chạy giao diện trên máy chủ Ghost, bạn cần tạo liên kết tượng trưng (symlink) từ thư mục giao diện đến thư mục chứa Ghost blog.

# Tạo liên kết tượng trưng
ln -s /dir/to/your/themes/MyGhost /dir/to/your/ghost-site/content/themes/myghost

Khởi động lại Ghost blog và giao diện sẽ được liệt kê trong khu vực Design của Ghost Admin.

Các lệnh hữu ích

Kiểm tra tính tương thích của theme với gscan:

yarn gscan PATH_TO_THEME

hoặc

yarn test

Đóng gói các tệp của giao diện vào tệp dist/MyGhost.zip, bạn có thể tải tệp này lên website của bạn để cài đặt giao diện thủ công.

yarn zip

Đóng góp và báo lỗi

Nếu bạn gặp lỗi khi sử dụng giao diện, hoặc bạn muốn góp ý cho giao diện, hãy tạo một issue mới tại nguyenhongthe/MyGhost/issues.
Repo này được đồng bộ tự động với private monorepo nguyenhongthe/repo.vnscdn.com thông qua Github Action. Vui lòng không tạo pull request trực tiếp tại repo này.