Cách tạo website tĩnh với Zola

Nếu bạn đang tìm một công cụ làm blog đơn giản, siêu nhanh, thì Zola chính là thứ bạn cần! Được viết bằng Rust nên nó nhanh vô cùng, lại còn dễ dùng và customize thoải mái. Mình sẽ hướng dẫn bạn từng bước để tạo một website tĩnh với Zola nhé.

Bước 1: Cài đặt Zola

Việc đầu tiên là cài Zola. Bạn có thể tải bản mới nhất từ trang chính thức.

Nếu dùng macOS thì siêu đơn giản với Homebrew:

brew install zola

Còn Windows thì tải file thực thi từ trang releases về rồi thêm vào PATH là xong.

Bước 2: Tạo site mới

Sau khi cài xong, tạo site mới chỉ cần một câu lệnh:

zola init mysite

Câu lệnh này sẽ tạo folder mysite với cấu trúc cơ bản sẵn sàng để bạn bắt đầu.

Bước 3: Build và chạy site

Giờ thì vào folder vừa tạo:

cd mysite

Để build site:

zola build

Muốn xem trước trên máy local thì:

zola serve

Xong! Mở trình duyệt lên http://127.0.0.1:1111 là bạn thấy site của mình ngay.

Bước 4: Tùy chỉnh theo ý bạn

Muốn chỉnh site theo ý mình thì sửa file config.toml và thêm nội dung vào folder content. Zola dùng Markdown nên việc viết bài và format cực kỳ đơn giản.

Bước 5: Deploy site lên hosting

Khi đã ok với site của mình rồi, bạn có thể deploy lên bất kỳ hosting tĩnh nào. Sau khi chạy zola build, tất cả file tĩnh sẽ nằm gọn trong folder public - chỉ việc upload lên hosting là xong.

Bước 6: Deploy lên Hostinger

Nếu bạn dùng Hostinger, làm theo các bước này:

1. Build site: Đảm bảo đã build xong và có folder public.

   zola build
   

2. Đăng nhập Hostinger: Vào Hostinger và đăng nhập tài khoản.

3. Mở File Manager: Trong dashboard Hostinger, vào File Manager.

4. Upload site: Trong File Manager, vào folder public_html rồi upload toàn bộ nội dung từ folder public của Zola lên đây.

5. Kiểm tra: Xong xuôi rồi thì mở domain của bạn lên xem site đã chạy chưa.

Bước 7: Tự động hóa Deploy với GitHub CI/CD

Muốn pro hơn? Tự động hóa việc deploy bằng GitHub Actions cho tiện! Mỗi lần push code là tự động deploy luôn.

Cùng xem workflow nhé.

Tạo file .github/workflows/deploy.yml trong repo với nội dung:

name: Deploy Blog

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        # This step checks out the repository so the workflow can access the code.

      - name: Install Zola
        uses: taiki-e/install-action@v2
        with:
          tool: zola@0.19.1
        # This step installs Zola, specifying the version to use.

      - name: Build
        run: zola build
        # This step builds the site using Zola.

      - name: Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ vars.HOSTINGER_FTP_SERVER }}
          username: ${{ vars.HOSTINGER_FTP_USERNAME }}
          password: ${{ secrets.HOSTINGER_FTP_PASSWORD }}
          local-dir: public/
          server-dir: ${{ vars.HOSTINGER_FTP_DIR }}
        # This step deploys the built site to Hostinger using FTP.

Thiết lập Secrets và Variables

Trong GitHub repo, vào Settings > Secrets and variables > Actions rồi thêm:

• Secrets:

  • HOSTINGER_FTP_PASSWORD: Mật khẩu FTP của bạn trên Hostinger.

• Variables:

  • HOSTINGER_FTP_SERVER: Địa chỉ FTP server Hostinger.
  • HOSTINGER_FTP_USERNAME: Username FTP Hostinger.
  • HOSTINGER_FTP_DIR: Folder trên server mà bạn muốn deploy vào.

Vậy là xong! Từ giờ mỗi lần push lên branch main, GitHub Actions sẽ tự động build và deploy site lên Hostinger cho bạn.