Hugoを使って生成した静的ページをGithub pagesにデプロイする

今回はHugoを使って生成した静的ページをGithub pagesにデプロイしてみようと思います。 公式サイトを参考にしているので、まずは公式サイトを読んで試してみてください。

やりたいこと

環境

環境は以下の通りです。git, hugoはすでにインストールしてある前提です。hugoが入っていないmacの人はbrew install hugoしましょう。

  • macOS 10.14.5

  • Git 2.19.1

  • hugo 0.55.6

手順

Githubに[username].github.ioを作成する

GitHubリポジトリを作成してcloneします。

$ git clone https://github.com/dais39/dais39.github.io.git

Githubに管理用のリポジトリを作成する(Hugoを導入するリポジトリ)

GitHubリポジトリを作成してcloneします。

$ git clone https://github.com/dais39/hugoadmin.git

$ cd hugoadmin

プロジェクトを作成

$ hugo new site myPage

$ cd myPage

$ ls 
archetypes  config.toml content     data    layouts     public      resources   static      themes

テーマを導入

https://themes.gohugo.io/ から自分の好きなテーマを探して、git submoduleでtheme/配下にテーマを紐づけます。 今回は以下のテンプレートを使います。

GitHub - jacobsun/edidor: A hugo theme that looks like an editor with a builtin style generator, INFINITE COLOR MODE from a market perspective. 😂

$ git submodule add https://github.com/jacobsun/edidor theme/editor

次にconfig.tomlの中身を修正して、テンプレートを有効にします。

$ echo 'theme = "editor"' >> config.toml

publicディレクトリを削除

ない場合はスキップでOK

$ rm -rf public

デプロイ先のリポジトリをpublicディレクトリと紐づける

$ git submodule add -b master git@github.com:dais39/dais39.github.io.git public

デプロイ用スクリプトの作成

以下の内容でdeploy.shをmyPage配下に作成します。 作成後ファイルの権限をchmod +x deploy.shで変更します。

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

デプロイ

./deploy.shを実行するとデプロイ先のリポジトリにpushされます。 https://[username].github.io にアクセスすると、ページが表示されていると思います。

参考資料

https://gohugo.io/hosting-and-deployment/hosting-on-github/