✍️

zola でブログサイトを作成し GitHub Pages にデプロイする

2022/12/19に公開約7,400字

概要

zola でブログサイトを作成し GitHub Pages にデプロイします。

ブログサイトのリポジトリは非公開にしたいので、ブログサイトの管理とデプロイするリポジトリは別けます。

リポジトリ

次の2つのリポジトリを用意します。

  • ブログサイトを管理する非公開リポジトリ
  • ブログサイトをデプロイする公開リポジトリ

環境構築

VSCode の devcontainer で zola の環境を構築します。

  1. devcontainer の定義ファイルを作成します。

    .devcontainer/devcontainer.json
    // For format details, see https://aka.ms/devcontainer.json. For config options, see the
    // README at: https://github.com/devcontainers/templates/tree/main/src/alpine
    {
        "name": "blog-site",
        "image": "mcr.microsoft.com/devcontainers/base:alpine-3.16",
    
        // Features to add to the dev container. More info: https://containers.dev/features.
        // "features": {},
    
        // Use 'forwardPorts' to make a list of ports inside the container available locally.
        // "forwardPorts": [],
    
        // Use 'postCreateCommand' to run commands after the container is created.
        "postCreateCommand": "sudo apk add zola",
    
        // Configure tool-specific properties.
        "customizations": {
            "vscode": {
                "extensions": [
                    "mutantdino.resourcemonito",
                    "tamasfe.even-better-toml"
                ]
            }
        }
    
        // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
        // "remoteUser": "root"
    }
    
  2. devcontainer を起動します。(以降の作業手順は devcontainer で実施します。)

  3. zola の 初期化 を実施します。

    zola init my_site
    

    ディレクトリ構成

    .
    ├── README.md
    └── my_site
        ├── config.toml
        ├── content
        ├── sass
        ├── static
        ├── templates
        └── themes
    
  4. 初期化で生成されたサイトをブラウザで確認します。

    my_site ディレクトリに移動してローカルサーバーを起動します。

    zola serve
    

    ブラウザ

テーマの導入

Zola themes からブログテーマ simple-dev-blog を使用します。

  1. テーマを my_site/themes ディレクトリにクローンします。

    git clone --depth=1 \
    https://github.com/bennetthardwick/simple-dev-blog-zola-starter \
    themes/simple-dev-blog
    
  2. config.toml に theme, taxonomies を追記します。

    my_site/config.toml
    # The URL the site will be built for
    base_url = "https://st-little.github.io"
    
    theme = "simple-dev-blog"
    taxonomies = [ { name = "tags" } ]
    
    # Whether to automatically compile all Sass files in the sass directory
    compile_sass = true
    
    # Whether to build a search index to be used later on by a JavaScript library
    build_search_index = true
    
    [markdown]
    # Whether to do syntax highlighting
    # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
    highlight_code = true
    
    [extra]
    # Put all your custom variables here
    
  3. テーマの内容 my_site/themes/simple-dev-blog をコンテンツ my_site/content にコピーします。

    cp themes/simple-dev-blog/content/* ./content -r
    
  4. ブラウザでテーマが反映されていることを確認します。

    Top

    About

    Blog

テーマのカスタマイズ

トップ画面

  1. my_site/content/_index.md を編集します。

About 画面

  1. my_site/content/about.md を編集します。

プロフィール画像、アイコン画像

  1. 新しいプロフィール画像、アイコン画像を保存します。

    • プロフィール画像: my_site/content/profile.jpg
    • アイコン画像: my_site/content/icon.jpg
  2. config.toml の [extra] で画像のファイル名を設定します。

    my_site/config.toml
    [extra]
    icon = "icon.jpg"
    profile_small = "icon.jpg"
    

フッター

フッターに表示される次の文言を削除します。

A simple dev-blog theme created by Bennett. You can follow him on Github (if you like).
  1. config.toml の [extra] でフッターの文言を空文字に設定します。

    my_site/config.toml
    [extra]
    footer_about = ""
    

ブログ記事の作成

  1. 新しいブログ記事 2022-12-01-create-blog-site-with-zola.md を作成します。

    touch content/blog/2022-12-01-create-blog-site-with-zola.md
    
  2. +++ ブロックを追記してタイトルとタグを定義します。

    my_site/content/blog/2022-12-01-create-blog-site-with-zola.md
    +++
    title = "zola で作ったブログを GitHub Pages で公開する"
    draft = false
    [taxonomies]
    tags = ["zola", "GitHub Pages"]
    +++
    

    下書きにする場合は draft を true にします。

  3. +++ ブロックの次にブログ記事の内容を追記します。

Personal access token の作成

GitHub Actions のデプロイで使用する Personal access token を作成します。

  1. Settings/Developer settings/Tokens を開きます。

  2. Generate new token を選択します。

  3. Select scopes の public_repo にチェックを入れます。

  4. Generate token を選択し Personal access token を作成します。

  5. 作成された Personal access token は GitHub Actions で使用するのでコピーします。

Personal access token の設定

  1. ブログサイトを管理するリポジトリを開き Settings を選択します。

  2. サイドメニューから Secrets/Actions を選択します。

  3. New repository secret を選択します。

  4. 入力フィールドを入力して Add secret を選択します。

    • Name: ACTIONS_DEPLOY_TOKEN
    • Secret: Personal access token を貼り付ける

GitHub Actions の作成

GitHub Actions を使用して GitHub Pages にブログサイトをデプロイします。

  1. GitHub Pages/Github Actions を参考に GitHub Actions を作成します。

    .github/workflows/gh-pages.yml
    # On every push this script is executed
    on: push
    name: Build and deploy GH Pages
    jobs:
    build:
        runs-on: ubuntu-latest
        if: github.ref == 'refs/heads/main'
        steps:
        - name: checkout
            uses: actions/checkout@v3.0.0
            with:
            submodules: true
        - name: build_and_deploy
            uses: shalzz/zola-deploy-action@v0.16.1
            env:
            # Target repository
            REPOSITORY: st-little/st-little.github.io
            # Target branch
            PAGES_BRANCH: gh-pages
            # Build directory
            BUILD_DIR: my_site
            # Provide personal access token
            TOKEN: ${{ secrets.ACTIONS_DEPLOY_TOKEN }}
            # Or if publishing to the same repo, use the automatic token
            #TOKEN: ${{ secrets.GITHUB_TOKEN }}
    

デプロイの実施

  1. main ブランチに作成したブログサイトをマージします。

  2. Github Actions でビルド&デプロイが実施されます。

ブログサイトの確認

  1. ブログサイトをデプロイするリポジトリを開き Settings を選択します。

  2. サイドメニューから Pages を選択します。

  3. Visit site ボタンを選択しデプロイしたブログサイトを表示します。

カスタムドメインの設定

  1. サブドメイン blog の DNS レコードを追加します。

  2. ドメインが書かれた my_site/static/CNAME ファイルを作成します。

    echo blog.little-method.com > static/CNAME
    
    my_site/static/CNAME
    blog.little-method.com
    
  3. CNAME ファイルを main ブランチにマージして GitHub Pages にデプロイします。

  4. ブログサイトをデプロイするリポジトリを開き Settings を選択します。

  5. サイドメニューから Pages を選択します。

  6. Custom domain が正しく設定されていることを確認します。

Discussion

ログインするとコメントできます