Edited at

Hugo + GitHub Pages でブログのプロトタイプを構築してみた。


はじめに

Hugo + GitHub Pages でブログのプロトタイプを構築した記録です。

GitHub Pages へ push するところまで,シェルスクリプトで自動化します。


記事作成・更新時の環境


  • Model: MacBook Pro (13-inch, 2016, Four Thunderbolt 3 Ports)

  • OS: macOS Catalina 10.15

  • Hugo 0.58.3


Hugo について

ターミナルから以下の手順だけでブログ記事の更新と GitHub Pages への公開までできるような環境構築を目標としています。

# Hugo によって生成されたディレクトリ (myblog とします) まで移動します。

$ cd ~/myblog

# 新規マークダウンファイル (test とします) を作成し編集します。
$ hugo new post/test.md

# 繰り返し作業を自動化するため後述するシェルスクリプトを実行します。
$ ./deploy.sh


Hugo のインストールから初期設定まで


1.インストール

以下を実行します。

$ brew install hugo

以下のコマンドで任意のフォルダに新たな Hugo プロジェクト (myblog とします) を作成します。

$ hugo new site myblog

$ cd myblog


2.テーマのダウンロード

公式サイト HugoHugo テーマ一覧 から好きなテーマを選び,以下のように $ git clone します

$ cd themes

$ git clone https://github.com/rakuishi/hugo-zen


3.記事の作成

myblog 直下へ戻ります。

$ cd

$ cd ~/myblog

以下のコマンドを実行すると,content/post/test.md が作成されます

$ hugo new post/test.md

生成された test.md は以下のようになっているので編集します。


test.md

---

title: "test"
date: 2019-09-14T00:00:00+09:00
draft: true
---

title: は記事のタイトルなので書き換えます。

date: は作成時刻です。

draft: は true で未公開,false で公開になります。

この下にマークダウン形式で記事を書きます。


test.md

---

title: "ブログ始めました。"
date: 2019-09-14T00:00:00+09:00
Lastmod: 2019-09-14T00:00:00+09:00
draft: false
---

## 〜

+++



4.設定ファイルの編集

myblog 直下の config.toml を以下のように編集します。


config.toml

author = "[hogehoge1]"

baseURL = "https://[GitHub のユーザー名].github.io/"
languageCode = "ja"
theme = "hugo-zen"
title = "[hogehoge2]"

[params]
logo = "/images/logo.jpg"


logo 用の画像ファイルは myblog/themes/hugo-zen/static/images/logo.jpg へ入れておきます。


5.公開用ファイルの生成

以下を実行します。

$ hugo server

ブラウザで localhost:1313 からプレビューができます。

$ hugo server --theme=hugo-zen --buildDrafts --watch

--theme コマンドを利用することで,プレビュー時にテーマを指定することもできます。

--buildDrafts コマンドを利用することで,上記の draft: true となっている下書き状態のファイルもプレビュー表示されます。

--watch コマンドを利用することで .md ファイルを更新する度にブラウザ側のプレビューも自動で更新されます。

リロードする手間が省けます。

以下を実行すると public が作成され,その中に公開用ファイルが生成されます。

$ hugo

次はこの生成された公開用ファイル一式を GitHub Pages で公開するための設定をしていきます。


GitHub Pages の初期設定

Hugo にて生成されたプロジェクト全体である myblog を管理するリポジトリと,その配下の公開用ファイル一式がある public を管理するリポジトリを用意します。

このままでは myblog の配下に public があるため git での管理がうまくいきません。

そこでサブモジュール化という作業を行います。


1.リポジトリの作成

GitHub 上でリモートリポジトリを2つ作成します。


  • myblog


  • [GitHub のユーザー名].github.io


[GitHub のユーザー名].github.io の内容が https://[GitHub のユーザー名].github.io にて公開されることになります。

以下がその作業になります。

# プロジェクトのルート・ディレクトリ (myblog) に移動します。

$ cd ~/myblog

# public フォルダを管理外とするために一旦削除します。
$ rm -rf public

# ローカルリポジトリを作成します。
$ git init

# add します。
$ git remote add origin git@github.com:[GitHubのユーザー名]/myblog.git
$ git add -A

# commit します。
$ git commit -m "first commit"

# push します。
$ git push origin master


2.サブモジュール化

続いて publicmyblog のサブモジュールとして追加します。

$ git submodule add git@github.com:[GitHub のユーザー名]/[GitHub のユーザー名].github.io.git public

先ほど public を削除しましたが,ここで改めて作成されます。

その public 内に公開用ファイルを生成します。

$ hugo


3.シェルスクリプトの作成

myblog の直下に以下のようなシェルスクリプト deploy.sh を作成します。


deploy.sh

#!/bin/bash

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

# Build the project.
hugo

# Go to public folder
cd public

# Add changes to git.
git add -A

# 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
cd ..

# Add changes to git.
git add -A

# 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


シェルスクリプトを実行できるようにします。

$ chmod +x deploy.sh

以下を実行することで2つのリポジトリに順に push され,https://[GitHub のユーザー名].github.io にてブログが表示されます。

$ ./deploy.sh