Hugo + GitHub Pagesでブログを作成する方法

Hugo + GitHub Pagesでブログを作成する方法を説明します。

2019-09-15

Koki

2 分で読めます

本記事では、Hugo + GitHub Pagesの組み合わせでブログ環境を構築する方法について説明します。
上から順番に読んでいただくと、ブログを作成できるような流れになっています。

本記事の内容です。

環境
前提条件
インストール
サイトを作成
記事を作成
テーマを適用
ローカルでサーバ起動
GitHub PagesへDeploy
テーマ
- テーマ一覧
- 個人的おすすめテーマ
参考にしたページ

環境

Windows10 (1903)

前提条件

Chocolateyインストール済み
Gitインストール済み

インストール

下記コマンドを実行します。コマンドを実行するディレクトリはどこでも良いです。

choco install hugo -confirm
choco install hugo-extended -confirm

サイトを作成

サイトを作成したいディレクトリで下記コマンドを実行します。
[サイト名]には、好きなサイト名を入力してください。

hugo new site [サイト名]

記事を作成

記事を作成するには、作成したサイトディレクトリのルートで下記コマンドを実行します。
[ディレクトリ名]は、後述する各テーマに沿って指定します。
[記事名]は、好きな記事名を入力してください。

hugo new [ディレクトリ名]/[記事名].md

記事作成後は、自由に作成したMarkdownファイルを編集します。

テーマを適用

本記事内では、hugo-future-imperfect-slimを適用します。
最初に作成したサイトディレクトリのルートで下記のコマンドを実行し、GitHubからthemesディレクトリへテーマをダウンロードします。

git clone https://github.com/pacollins/hugo-future-imperfect-slim.git themes/hugo-future-imperfect-slim

その後、下記コマンドを同ディレクトリで実行し、サンプルサイトの設定を適用します。

xcopy /s /e .\themes\hugo-future-imperfect-slim\exampleSite .

ちなみに、テーマを適用する場合は、下記の様にconfig.tomlへ「theme=”[テーマ名]"」の行を追記します。

theme = "hugo-future-imperfect-slim"

テーマの一覧を確認できるページについては、本記事最後に記述します。

ローカルでサーバ起動

下記コマンドを実行する。

hugo server

また、下記のように「-p [ポート番号]」とオプションを付けると、そのポート番号で起動することが可能。

hugo server -p 12345

これで、最低限ホームページを作成することができます。

GitHub PagesへDeploy

ゴール

今回は、GitHub Pagesのサブディレクトリで公開します。例:下記URLにてブログを公開。
https://koki-nakamura22.github.io/test-hugo-blog/

GitHub上でブログ用のリポジトリを作成

静的ファイルを公開するためのリポジトリを作成します。
今回は「test-hugo-blog」という名前のリポジトリを作成します。

作成したリポジトリをクローン

サイトディレクトリのルートで下記コマンドを実行し、作成したリポジトリをクローンします。
下記のコマンドでは、念のためクローン前に既存のpublicディレクトリを削除しています。

rmdir /s /q public
git clone https://github.com/koki-nakamura22/test-hugo-blog.git public

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

deploy.batというファイルをサイトディレクトリのルートに作成し、下記コードをファイル内にコピー&ペーストします。

@echo off

REM Build the project.
hugo

REM Go to public directory.
cd public

REM Add changes to git.
git add .

REM Create a commit message.
set d=%date%
set yyyy=%d:~-10,4%
set mm=%d:~-5,2%
set dd=%d:~-2,2%
set t=%time: =0%
set hh=%t:~0,2%
set mn=%t:~3,2%
set ss=%t:~6,2%
set commitMsg=Site updated: %yyyy%-%mm%-%dd% %hh%:%mn%:%ss%

REM Commit.
git commit -m "%commitMsg%"

REM Push source and build repos.
git push origin master

REM Come back to the project root.
cd ..

echo "The web page has been updated!"

GitHub Pagesの設定

「GitHub上でブログ用のリポジトリを作成」で作成したリポジトリのページを開き、下記の設定を行います。
Settings -> GitHub PagesのSourceでmaster branchを選択 (大体の場合はmaster branchだと思います。)
実際の画面を確認しながら作業を行いたい方は、下記ページを参考にするとわかりやすいです。