Build một serverless blog đơn giản trên AWS

Đây là bài blog đầu tiên được viết trên nền tảng hugo - blog cá nhân tự xây dựng trong vài tiếng đồng hồ.

NỘI DUNG

Giới thiệu
Chọn platform xây dựng blog phù hợp với nhu cầu
Đăng ký domain name trên Route53
Chọn và Copy a Hugo Theme, Install và Test
Deploy Hugo site sử dụng Amplify

Giới thiệu

Ý tưởng xây dựng một blog cá nhân của mình xuất phát từ nhiều năm trước, tuy nhiên nó chưa thực sự mạnh mẽ, bên cạnh đó là những lo ngại về chi phí vận hành, chi phí xây dựng, trong khi có những nền tảng blog free cho phép ai cũng có thể viết bài. Xuất phát từ nhu cầu muốn lưu lại những kiến thức mà bản thân đã học được, kinh nghiệm từng trãi trong dự án. Vừa để không quên kiên thức, vừa có thể chia sẽ cho những bạn quan tâm, hơn nữa lại tự mình vận hành cho sản phẩm của mình. Với những lý do đó, mình đã xây dựng blog này, và bài blog đầu tiên mình sẽ chia sẻ cách mình đã xây dựng blog này như thế nào.

Chọn platform xây dựng blog phù hợp với nhu cầu

Khi chọn platform, mình đã nghĩ ngay đến các nền tảng như lớn như Wordpress, Medium, Blogger, Ghost. Điều tra thêm một chút nữa thì cũng xuất hiện một số cái tên như Jekyll hay Hugo. Trong số những platform trên thì mình chỉ biết về Wordpress một chút, rồi cũng đọc qua về ưu nhược điểm các nền tảng xem cái nào là phù hợp nhu cầu của mình. Nhu cầu xây dựng blog và vận hành của mình hiện tại:

Nhanh chóng xây dựng
Chi phí xây dựng, vận hành thấp nhất có thể
Dễ hiểu
Viết blog theo markdown syntax
Tự mình quản lý việc deploy, quản lý mã nguồn

Với những lý do trên thì mình chọn được Jekyll hoặc Hugo. Và mình chọn hugo với những lợi ích sau

Không cần server
Markdown phù hợp cho viết nội dung blog
Fast build times & fast page load speed
Có thể build ra content tĩnh, sau đó sử dụng S3, Cloudfront để phân phối nội dung
Có thể sửn dụng Amplify để triển khai CI/CD một cách nhanh chóng

Đăng ký domain name trên Route53

Nếu bạn chưa có domain, bạn có thể đăng ký domain ở Amazon Route53. Nếu bạn chưa bào giờ thực hiện đăng ký domain, bạn có thể tham khảo How domain registration works.

Đăng ký miền trong Route53 bằng cách làm theo bước đầu tiên trong Getting started with Amazon Route 53. Bạn cũng có thể chuyển domain đã mua ở một nơi khác về Route53 quản lý.

Chọn và Copy a Hugo Theme, Install và Test

Chọn và Copy a Hugo Theme

Bạn lên trang https://themes.gohugo.io/ và chọn cho mình một theme ứng ý, trường hợp mình thì mình chọn them này: https://themes.gohugo.io/themes/hugo-coder/ Ở mỗi theme sẽ có phần hướng dẫn làm thể nào để sử dụng. Theme hugo-coder có phần hướng dẫn như bên dưới.

Quick Start
Add the repository into your Hugo Project repository as a submodule, git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder.
Configure your config.toml. You can either use this minimal configuration as a base, or look for a complete explanation about all configurations here. The config.toml inside the exampleSite is also a good reference.
Build your site with hugo server and see the result at http://localhost:1313/.

Install và Test

Tham khảo cách start với hugo ở đây

Yêu cầu

Create a site

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

hugo new site phongawsblog
cd phongawsblog
git init

Theo hướng dẫn của theme hugo-coder thì mình chạy command bên dưới

git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

Tiếp đến thì copy nội dung file themes/hugo-coder/exampleSite/config.toml ghi đè nội dung file config.toml (ở root directtory) Run command bên dưới để build sitte và bạn sẽ thấy kết quả: http://localhost:1313/

hugo server

(Hình này mình đã custom một chút rồi)

Để biết cách custom thì cần tham khảo ở đây

Mình có chỉnh sửa một chút menu, và nội dung file blog. Cấu trúc thư mục của mình trông như thế này

Lưu ý là web mà chúng ta đang xem ở local là nội dung đã được general trong thư mục public. thỉnh thoảng chúng ta sẽ cần chạy lệnh hugo đển nó generate lại

Deploy Hugo site sử dụng Amplify

Để không push những resource không cần thiết thì mình tạo file .gitignore như sau:

.gitignore

# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json

# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

# Temporary lock file while building
/.hugo_build.lock

AWS Amplify hỗ trợ Hugo và bạn có thể làm theo official guide để triển khai Hugo bằng AWS Amplify từ GitHub. Tốt nhất bạn nên sử dụng hướng dẫn Hugo version mới nhất.

Sau khi đã hoàn tất thì mình push code lên Codecommit (Bạn có thể push lên Github, Gitlab, Bitbucket đều được)

Tại giao diện AWS Amplify, chọn New app -> host web app
Chọn git repo và tiến hành authen
Sau khi authen thành công thì sẽ hiện ra danh sách repo, chọn repo vừa tạo cho blog của mình, chọn branch

Mọi thứ để default và next Web chúng ta sẽ được build cho đến khi hoàn thành

Sau khi build xong thì chúng ta có thể access đến một domain tạo sẵn có dạng https://develop...amplifyapp.com/ Để thay thế domain này mình sẽ vào mục Domain management ở Amplify, chọn Add domain -> chọn domain mình đã mua ở Route53 và tiến hành config

Vậy là chúng ta đã hoàn thành Deploy một hugo blog sử dụng Amplify, sau mỗi lần push code lên branch đã liên kết với Amplify, Amplify sẽ thực hiện tự động việc auto build cho chúng ta, việc của chúng ta bây giờ là suy nghĩ nội dung thật hay để xuất bản ra những blog chất lượng mà thôi :D

Lời kết

Sau khi trãi nghiệm viết blog đầu tiên thì cảm nhận về Hugo như sau:

Nếu bạn focus vào nội dung, không để ý nhiều về hình thức thì có lẽ đây là nền tảng khá tốt
Chúng ta có thể chọn 1 theme miễn phí trên kho themes của Hugo, và custom theo ý muốn của mình
Cách viết markdown tuy có đơn giản nhưng nếu có editor thì sẽ tiện hơn, nếu bạn dùng VScode để viết nội dung blog thì cũng đòi hỏi thành thạo mới có thể viết nhanh được
Việc chèn hình ảnh cũng có chút bất tiện là phải chuẩn bị hình ảnh ở thư mục rồi viết code để link tới. (các nền tảng như qiita thì chỉ cần capture và paste là được)
Việc custom theme có sẵn còn đòi hỏi kiến thực về lập trình Go