Zolaで静的サイトを爆速構築する

今回はZolaというRust製の静的サイトジェネレーターを使ってブログを作ってみました。とにかく速くて、カスタマイズも簡単。実際に使ってみた手順をシェアします。

まずはZolaをインストール

最初に、Zolaをインストールしましょう。公式サイトから最新版が手に入ります。

macOSならHomebrewでサクッと入ります:

brew install zola

Windowsの方は、リリースページから実行ファイルを落として、PATHに追加すればOKです。

サイトを作ってみる

Zolaが入ったら、さっそくサイトを作りましょう:

zola init mysite

これでmysiteというディレクトリに、Zolaの基本構造が一式揃います。

ビルドしてローカルで確認

では、作ったサイトを動かしてみます:

cd mysite

ビルドはこれだけ:

zola build

ローカルサーバーで表示確認:

zola serve

http://127.0.0.1:1111にアクセスすれば、サイトが見られます。

カスタマイズしていく

サイトのカスタマイズはconfig.tomlで設定を変えて、contentディレクトリに記事を追加していく感じです。記事はMarkdownで書けるので、サクサク書けて便利ですね。

デプロイする

サイトができたら、お好きな静的ホスティングにデプロイしましょう。zola buildでpublicディレクトリに静的ファイルが生成されるので、それをアップロードするだけです。

Hostingerにデプロイしてみる

実際にHostingerにデプロイする手順はこんな感じ:

1. ビルド実行: まずサイトをビルドして、publicディレクトリに静的ファイルを生成します。

   zola build
   

2. Hostingerにログイン: Hostingerにアクセスしてログインします。

3. ファイルマネージャーを開く: コントロールパネルからファイルマネージャーに入ります。

4. ファイルをアップロード: public_htmlディレクトリに移動して、Zolaのpublicディレクトリの中身をまるごとアップロードします。

5. 動作確認: アップロードが終わったら、ドメインにアクセスして確認しましょう。

GitHub Actionsで自動デプロイ

毎回手動でアップロードするのは面倒なので、GitHub Actionsで自動化しましょう:

実際のワークフローを見てみます。

リポジトリに.github/workflows/deploy.ymlを作って、以下の内容を追加:

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.

SecretsとVariablesを設定

GitHubリポジトリのSettings > Secrets and variables > Actionsから、以下を追加します:

• Secrets:

  • HOSTINGER_FTP_PASSWORD: HostingerのFTPパスワード

• Variables:

  • HOSTINGER_FTP_SERVER: HostingerのFTPサーバーアドレス
  • HOSTINGER_FTP_USERNAME: HostingerのFTPユーザー名
  • HOSTINGER_FTP_DIR: デプロイ先のサーバーディレクトリ

これで、mainブランチにプッシュするだけで、自動的にHostingerへデプロイされるようになります。便利ですね。