Simply Static Pro

Simply Static là 1 plugin để chuyển WordPress về dạng tĩnh (html), ở bài này mình sẽ thử trên bản Simply Static Pro, với rất nhiều tính năng tự động, giúp việc cài đặt đơn giản hơn

2022-11-27_20-59-28

Cài đặt

  1. Download bản FREE Simply Static v2.2.2
  2. Cập nhập bản Simply Static Pro v1.2.4.4

Bài này mình cập nhập lại theo các phiên bản mới nhất, cũng là phiên bản mình thấy chạy ổn định và hiệu quả

Cấu hình trong bài này mình sẽ set đi từ Simply Static Pro -> GitHub Pages -> Cloudflare Pages

Nó sẽ hơi dài dòng so với đi trực tiếp Simply Static Pro -> GitHub Pages, bù lại bạn chỉ cần dùng 1 tài khoản GitHub, 1 tài khoản Cloudflare mà có thể dùng được cho vô số trang, vô số domain

Tab General

2022-12-02_2-37-05

Destination URLs -> Use relative URLs (Sử dụng URL tương đối để có thể phù hợp với mọi domain, subdomain khác nhau)

Delivery Method: chọn Github

Ấn SAVE lại

Tab Deployment

GitHub - Simply Static Pro
GitHub – Simply Static Pro

Kéo xuống phần GitHub, điền các thông tin tài khoản GitHub của bạn vào

GitHub User / Organization: điền user name, ví dụ là bibicadotnet 

Repository from an organization?: no

GitHub E-Mail: điền email lúc đăng kí

Personal Access Token: tạo 1 token tại đây

Name your repository: đặt 1 tên tùy thích, ví dụ là github-to-cloudflare

Existing Repository?: no

Visiblity of your repository: set private

Name your branch: điền main

Webhook URL: Mình dùng ở Cloudflare Pages nên điền Webhook từ Cloudflare 

Điền xong các thông tin thì ấn vào SAVE CHANGES, sau đó ấn ADD REPOSITORY

Link to your repository sẽ được tạo ra là: github.com/bibicadotnet/github-to-cloudflare

Tab Advanced

Simply Static Pro
Advanced – Simply Static Pro

Temporary Files Directory, thư mục chứa các file tạm khi tạo trang static, nên để riêng nó ở 1 nơi không đụng chạm gì tới thư mục WordPress gốc, đỡ phải tốn các dung lượng thừa khi backup Wordpress

Clear local directory before export: Bật

Tính năng này khá quan trọng, nó sẽ xóa hết các thư mục chứa các file ở lần tạo trang static trước, tránh tình huống cập nhập sót trang khi tạo mới

Các setting và tab khác để mặc định, tạm mình cũng chưa tìm hiểu hết các tab liên quan tới search, contact, comment …. sẽ bổ xung sau

Generate

Generate Static Files - Simply Static Pro
Generate Static Files – Simply Static Pro

Ấn vào Generate Static Files để tạo các file tĩnh (html), sau khi tạo xong nó sẽ được tự động chuyển về repository GitHub bạn set ở trên

[2023-01-14 18:00:02] Setting up
[2023-01-14 18:00:03] Fetched 1009 of 1009 pages/files
[2023-01-14 18:02:29] Comitted 862 pages/files to GitHub
[2023-01-14 18:11:24] Wrapping up
[2023-01-14 18:11:24] Done! Finished in 00:11:22

Ở phiên bản Simply Static Pro v1.2.4.4, thao tác tạo file tĩnh, upload lên GitHub rất nhanh, cụ thể như thèng bibica.net khoảng hơn 1000 file tĩnh, trung bình chỉ mất tầm 10-13 phút là đã đồng bộ thành công lên GitHub, cơ chế upload cũng đã được tác giả sửa lại rất nhiều so với các bản cũ, nhanh và hiệu quả hơn 

Simply Static Pro v1.2.4.4 upload file thông qua GitHub API, mà GitHub API giới hạn 5.000 requests/1h, đa phần sẽ không đủ, vì 1 cái ảnh nó cũng tính là 1 request, các trang lâu năm, nhiều hình ảnh, bài viết …. cập nhập toàn bộ site, đa phần sẽ > 5000 file

Giải pháp đơn giản nhất là dùng các hình thức CDN hoặc Jetpack cho images là ổn, lúc này tổng file sẽ còn rất ít, có điều trong trường hợp bạn không thích hay không muốn dùng các dịch vụ này, thì cũng chưa có hướng xử lý nào tốt hơn

Cấu hình Cloudflare Pages

Cloudflare Pages - Simply Static Pro
Cloudflare Pages – Simply Static Pro

Vào Cloudflare Pages, tạo project mới từ Git, nó sẽ tự kết nối sang GitHub, chọn repositories github-to-cloudflare tạo ra ban nãy, ngồi chờ ít phút để nó đồng bộ lần đầu

Tắt Automatic deployments và Tạo Deploy hooks

Builds Deployments - Cloudflare Pages
Builds Deployments – Cloudflare Pages

Settings -> Builds & deployments

Configure Production deployments: bỏ tùy chọn Enable automatic production branch deployments

Configure Preview deployments: chọn None (Disable automatic branch deployments)

Xong xuôi cấu hình sẽ là Disabled tất cả

Production branch: main
Automatic deployments: Disabled
Automatic deployments: Disabled

Tạo Deploy hooks

Deploy hooks - Cloudflare Pages
Deploy hooks – Cloudflare Pages

Settings -> Builds & deployments -> Deploy hooks -> Add deploy hook

Simply Static Pro
Simply Static Pro

Đặt tên là Deploy hoặc 1 tên tùy thích, làm xong sẽ cho ra cái URL để điền vào Deployment Webhook URL phần cấu hình GitHub Simply Static Pro

Phần Tắt Automatic deployments và tạo Webhook trên Cloudflare Pages cực kì quan trọng, không làm thì mỗi khi bên GitHub có cập nhập, nó tự kéo sang Cloudflare Pages tới mức Cloudflare khóa tài khoản luôn

Cấu hình domain riêng trên Cloudflare Pages

Custom domain - Cloudflare Pages
Custom domain – Cloudflare Pages

Custom domain trên Cloudflare thì chỉ điền subdomain sau đó cập nhập CNAME lại theo hướng dẫn của Cloudflare

Nếu domain quản trị trên Cloudflare thì họ tự đổi CNAME cho bạn luôn, tầm 2-3s là subdomain đã Active 😀

Mình dùng subdomain là static.bibica.net

Bài này nội dung chính là từ hướng dẫn của tác giả, mình cũng phải thay đổi khá nhiều cho phù hợp với bản v1.2.4.4, vì nếu làm đúng theo hướng dẫn ở phiên bản cũ, rất dễ bị khóa tài khoản GitHub hoặc Cloudflare Pages

Cấu hình Simply Static tự chạy hàng ngày 

Sử dụng Code Snippets tạo 1 file php với nội dung:

register_activation_hook( __FILE__, 'ss_setup_static_daily_export_cron' );

/**
 * Setup a cron job to run daily.
 *
 * @return void
 */
function ss_setup_static_daily_export_cron() {
  if ( ! wp_next_scheduled( 'ss_static_export_daily_cron' ) ) {
    wp_schedule_event( time(), 'daily', 'ss_static_export_daily_cron' );
  }
}

add_action( 'ss_static_export_daily_cron', 'ss_run_static_export_cron_daily' );
/**
 * Run a full static export daily.
 *
 * @return void
 */
function ss_run_static_export_cron_daily() {
  // Full static export
  $simply_static = Simply_Static\Plugin::instance();
  $simply_static->run_static_export();
}
Simply Static Pro
Simply Static Pro

Chọn Run snippet everywhere như mặc định

Dùng Wp-Crontrol tạo 1 cron có Hook Name là “ss_static_export_daily_cron”

Simply Static Pro
Simply Static Pro

Set như hình là 1 ngày chạy 1 lần, lúc 0h 15 phút sáng

Các bước cài đặt khá nhiều, nhưng sau khi làm các bước như trên, ta có trang static.bibica.net (Cloudflare Pages), dù là 1 trang tĩnh, nhưng dữ liệu vẫn sẽ được tự cập nhập làm mới hàng ngày 😀

2022-11-28_01-24-19

Trong trường hợp chỉ cần cập nhập lại nội dung 1 bài viết cụ thể, sau khi Update xong có thể ấn thẳng vào tùy chọn Generate static bên trong chỗ viết bài, nó sẽ tự cập nhập riêng bài viết và các link liên quan tới bài viết đó 😛

Ở phiên bản Simply Static v2.2.2 và Simply Static Pro v1.2.4.4 gần như đã fix hết các lỗi liên quan tới GitHub và Cloudflare Pages, chạy mượt mà và rất nhanh

Dành cho bạn nào muốn chuyển đổi hoàn toàn Wordpress sang dạng tĩnh, cần xử lý thêm các vấn đề liên quan tới search, contact, comment nữa … vụ này lúc thử thì mình thấy Simply Static hoạt động hơi lung tung =)) theo mình vẫn nên dùng qua các dịch vụ bên thứ 3 cho nhàn, đỡ phải cấu hình nhiều, tạm mình chưa có nhu cầu tới thế, nên set như trong bài thôi

// Bài viết này sẽ còn được cập nhập lại rất nhiều để bổ xung các tính năng khác

2 thoughts on “Simply Static Pro”

  1. vậy. nếu mình k có host. mình dùng localhost. và plugin simply statics này đẩy lên github được k nhỉ. vừa có web chạy vừa k tốn tiền ??

    Reply
    • Vâng, ý tưởng chính của plugin Simply Static ra đời là vì cách vận hành như thế mà

      Có điều thay vì dùng localhost, ta có thể dùng pantheonsite.io thay thế, thuận tiện hơn, và cũng FREE 😀

      Xử lý thêm phần search, comment và contact nữa (https://patrickposner.dev/docs/simply-static/), lúc này trang web dù là tĩnh, nhưng có thể vận hành như 1 trang web “động” luôn

      Tất cả đều hoàn toàn miễn phí, mà lại có tốc độ và uptime ở tầm thế giới 😀

      Reply

Leave a Comment