Minimal mistakesをNetlify上でホストする【備忘録】

Jekyllの優れたテーマの一つにminimal-mistakesがある。
これをNetlify上でホストする手順を備忘録として残す。

手順

アカウント登録

Github、Nelifyでアカウントを作成する。無料プランでOK (2024/6/16時点)。

Githubにsshで接続できるように設定しておく。

以降、GithubのアカウントIDを<use-name>と表記する。

Github上にレポジトリを作成・編集する

レポジトリを作る

Github上で空っぽの新しいリモートリポジトリを作る。
以降、このリポジトリの名前を<repo-name>と表記する。

Clone

# clone
git clone [email protected]:mmistakes/minimal-mistakes.git -b 4.26.2
# `-b`: 以下はバージョンを固定するため。最新版がよければ不要。

# ディレクトリ名の変更
mv minimal-mistakes <repo-name>

# ディレクトリに移動
cd <repo-name>

# ブランチを切り出す
git checkout -b main

# リモートリポジトリのリンクを更新
git remote set-url origin [email protected]:<user-name>/<repo-name>.git

# URLが上記のものに変更されているかを確認
git remote -v

不要なファイルを削除

# 不要なファイルを削除する。
git rm -r .github docs test screenshot-layouts.png screenshot.png CHANGELOG.md

設定を書き換える

Gemfile

source "https://rubygems.org"

gem "github-pages", group: :jekyll_plugins

gem "tzinfo-data"
gem "wdm", "~> 0.1.0" if Gem.win_platform?

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-paginate"
  gem "jekyll-sitemap"
  gem "jekyll-gist"
  gem "jekyll-feed"
  gem "jemoji"
  gem "jekyll-include-cache"
  gem "jekyll-algolia"
end

_config.ymlも好みによって書き換える。

投稿を作る

# 投稿用のmarkdownファイルを設置する場所を作成
mkdir _posts

_posts下に、下記のような2024-04-01-sample.mdというファイルを作ってみる。

---
published: true # 投稿するときtrueにする．
title: サンプル
# last_modified_at: 2014-12-19
layout: single
author: yu9824
# summary:
category: # カテゴリーは一つにする．
- sample
comments: false
toc: false
tags:
- template
---

サンプル

Netlifyにデプロイする関数を書く

# デプロイするためのGithub actionsのワークフローを置くディレクトリの作成
mkdir -p .github/workflows

.github/workflows下に、下記のようなbuild_and_deploy.yamlを作成する。

# ref: https://github.com/marketplace/actions/netlify-actions
name: Build and Deploy to Netlify
on:
  push:
    paths-ignore:
      - docker/**
      - README.md
    branches:
      - main
  pull_request:
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-22.04

    steps:
      - uses: actions/checkout@v4
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
      - run: bundle install
      - run: bundle exec jekyll build -d public
      - name: Deploy to Netlify
        uses: nwtgck/[email protected]
        with:
          publish-dir: './public'
          github-token: $
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
          production-deploy: false
          # production-branch: main
        env:
          NETLIFY_AUTH_TOKEN: $
          NETLIFY_SITE_ID: $
        timeout-minutes: 1

上記の設定では、手動で実行した場合、もしくは (特定のファイルの更新を除き) mainブランチに変更が反映されたら、サイトをビルドしてNetlifyにアップロードすることになる。

production-deployとproduction-branchの設定を変えることで直にproductionすることもできる。

push

ローカルの変更をGithubに反映させる。

git add .
git commit -m "My initial commit"
git push origin main

Nelify上に “Site” を作成する

Githubのリポジトリをインポート

‘Add new site > Import an existing project’ から先ほど作成したGithubのプロジェクトをインポートする。
Netlify側でのビルドをやめるため、 ‘Base directory’, ‘Build command’, ‘Publish directory’, ‘Functions directory’ は空欄にする。

もし、インポートしたいリポジトリが表示されない場合は、NelifyにGithubのリポジトリをみる権限を与える必要がある。

Can’t see your repo here? Configure the Netlify app on GitHub.

Nelify上でのビルドを取り消す

‘Site configuration > Build & deploy > Continuous deployment > Build settings > Build status’ から、 ‘Stopped builds’ にして ‘Save’ する。

トークンの発行・登録

トークンは他人には知られてはまずいが、build & deployには必要なのでプライベート変数 (Repository secrets) としてGithubに登録する。

リポジトリの ‘Settings > Secrets and variables > Actions > Secrets > Repository secrets’ に NETLIFY_AUTH_TOKEN と NETLIFY_SITE_ID を登録する。

NETLIFY_AUTH_TOKEN

User settings - Netlifyにアクセスして、 ‘User settings > OAuth > Personal access tokens > New access token’ より新しいトークンを発行する。

Description of your token は、自分でわかるように名づける。

Expirationはこのトークンの有効期限なので、短い方が更新が必要で面倒だけどセキュリティ的に強いという感じ。お好みで設定。

NETLIFY_SITE_ID

‘Site configuration > Site details > Site information’ の Site ID。

Github actionsを実行

Github actionsは、手動でも実行できるようになっているので、手動で実行する。

実行が成功したことを確認する。

デフォルトではプレビューのみで本番環境 (<site-name>.nelify.app) にはデプロイされていない。
プレビューで問題ないことを確認して、デプロイの詳細を確認し、Optionsから ‘Publish deploy’ で本番環境にデプロイできる。

デプロイ後、https://<site-name>.nelify.app にアクセスして、「サンプル」という投稿ができていたらOK。
あとは _config.yml を変更するなどして、細かな変更を加えていく。

完成したもの

サイト: https://minimal-mistakes-tutorial.netlify.app

https://github.com/yu9824/minimal-mistakes-tutorial

Q&A

なぜGithub pagesじゃないのか

理由は2つ。

プライベートリポジトリも無料でホストできるから
Netlifyのほうがリダイレクト機能に優れているから

なぜNetlifyでビルドしないのか

Netlifyは、無料枠を超えると自動で課金される制度のため。

参考

mmistakes/minimal-mistakes - github.com

yu9824's Notes

My own technical notes.