10分で静的サイトを作成する【Hugo+GitHub Pages】

2021年3月11日 · 2 min read · Hugo GitHub Pages ·

手軽にサイトが作れる。しかも無料

Hugoとは
GitHub Pagesとは
実際に作成してみる

Hugoとは

Hugoは静的サイトを簡単に自動生成してくれるツールである。
こいつのいいところは

Markdownだけで記事が書ける(HTMLの知識不要)
Goを使っているので生成が滅茶苦茶早い →Jekyllとの比較
テーマが公開されており、簡単にそれらを試すことができる
無料

とくに自分的にはMarkdownだけで記事が書ける点はすごく気に入っています。
自分はHTMLやCSSのフロント側の知識は皆無なので1から作成することはできないし、従来からあるブログ形式やワードプレスだと、管理画面で記事を書く感じになるので気軽に記事を書けないという欠点がありました。
しかし、このツールだとMarkdownでいいのでエディタさえあればとりあえず記事を書けるという気軽さがあります。ソース管理はGitHubで行います。静的サイトならこれで十分ですね。

GitHub Pagesとは

GitHub PagesとはGitHubが提供している静的サイトのホスティングサービスです。
このGitHub Pagesには2種類あり、ユーザ(組織アカウント)用のページとプロジェクト用のページがあります。

ユーザ用は
https://[USERNAME].github.io/
のようなURLになり、[USERNAME].github.ioというリポジトリを作成すると自動的にページを作成してくれます。
※[USERNAME]は自分のID名が入ります

プロジェクト用は
https://[USERNAME].github.io/[リポジトリ名]/
のようなURLになり、プロジェクト名は自由でリポジトリの数だけ作成できます。

今回は、ユーザ用のページで作成します。
理由としては、

プロジェクト用は課金しないと、ソースコードが丸見え
[リポジトリ名]が入るため階層が深くなり、設定を弄る必要がある。(ドメイン取得すれば解決できるが)
があります。

ユーザ用でも[USERNAME].github.ioのリポジトリ自体は丸見えなのですが、ここにはHugoで自動生成されたものだけを置き、実際のデータ管理はプライベートリポジトリで行うことができます。
ファンサイトみたいなやつはプロジェクト用でもいいかもしれませんが、ブログとかはやっぱりプライベートにしたいですよね

実際に作成してみる

以下、Windonws10の環境で行います。

1. Hugoをインストール

公式から最新のhugo_0.XX.0_Windows-64bit.zipをDLして解凍、適当な場所に保存します。
そしてそのフォルダのPathを通すだけです。

コマンドプロンプトを起動して

1hugo version

でバージョンが返ってきたらインストール完了です。

2. GitHubにリポジトリを作成する

まずGitHubに二つリポジトリを作成します

ソースコードを管理するリポジトリ
実際に公開するリポジトリ

まずソースコードを[管理するリポジトリ]を作成します。
このリポジトリ名はなんでもいいです。
プライベートでも問題ありません。自分の例では以下のように作成しています。(プライベートなのでみれないと思いますが)
https://github.com/sakuya712/sakunote

次に実際に[サイトとして公開するリポジトリ]を作成します。
このリポジトリは先ほどのとおり[USERNAME].github.ioというリポジトリを作成します。
こちらをプライベートにしたい場合は課金が必要です。
それと、リポジトリ作成時にREADMEを作成するようにしてください。
(あとの工程で空っぽのリポジトリだとエラーになるため)
自分の場合は以下のようになっています。
https://github.com/sakuya712/sakuya712.github.io

3. 初期ファイルをGitHubにプッシュする

まず適当にコマンドで作業ファイルに移動して以下のコマンドを打つ

1hugo new site myblog

これでHugoの初期ファイルが生成されます。

生成したディレクトリに移動して、リポジトリを作成、ソースコード管理のリモートリポジトリをセットします。
自分の場合では、git remote add origin git@github.com:sakuya712/sakunote.gitです。

1cd myblog
2git init
3git remote add origin [ソースコード管理のリポジトリ]

リモートリポジトリをセットできたら初期ファイルをコミットして、プッシュしてください。

1git add -A
2git commit -m "first commit"
3git push origin master

次にサイトとして公開するリポジトリを以下のようにして参照関連つけします。
自分の場合はgit@github.com:sakuya712/sakuya712.github.io.gitです。

1git submodule add [サイトとして公開するリポジトリ] public

(※このとき、リポジトリ作成時のREADMEがないとエラーになる)
ここで最後のpublicを忘れないようにしてください。このフォルダにはHugoで生成されたファイルが入ります。

参照できたらpublicフォルダに移動し、リポジトリを作成時のREADMEはもう要らないので削除。そしてコミットしてプッシュします。

1cd public
2git rm README.md
3git add -A
4git commit -m "set myPages submodule"
5git push origin master
6cd ..\

これでリモートとローカルの関連付けができました。

4. テーマを適用する

公式サイトから使いたいテーマを探します。
自分はClarityというものを使いました。
殆どのテーマではそこからGitHubのページに飛べるので、そのリポジトリを関連付けをします。
自分の場合は、

1git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity

です。大抵のテーマにはサンプルデータが用意されているので

1robocopy /e /is .\themes\hugo-clarity\exampleSite\ .\

でサンプルデータをコピーしてください

このサンプルから最低限の変更が必要なのはconfig.tomlのbaseurlを自分のURLに変更することです。
自分の場合は以下のようにします。

1baseurl = "https://sakuya712.github.io"

テーマが適用されたかのテスト方法として

1hugo server

で、ローカルサーバーを立てれます。
http://localhost:1313にアクセスして、テーマが適用さえていたら成功です。
ローカルサーバーを閉じるときは[Ctrl+C]です

5. デプロイする

テーマが正常に適用できていると

1hugo

と打つことでpublicフォルダに実際にデプロイするHTMLなどが生成されます。

毎回デプロイの作業は面倒なのでバッチファイルを作成します。
このリポジトリは生成されたものをただアップしていくだけなのでコメントやブランチは適当です。
Deploy.bat

1@echo off
2rem hugoで生成されたファイルをコミットしてgithub.ioにプッシュする
3hugo
4cd %~dp0public
5git add -A
6set time_tmp=%time: =0%
7set now=%date:/=%%time_tmp:~0,2%%time_tmp:~3,2%%time_tmp:~6,2%
8git commit -m %now%
9git push origin master

このバッチファイルを含めて管理するリポジトリにプッシュします。

1git add -A
2git commit -m "template commit"
3git push origin master

そして、先ほど作ったDeploy.batを走らせるとデプロイ完了。
しばらくして、https://[USERNAME].github.io/にアクセスするとページができています。

6. カスタマイズする

あとは、テーマの設定や素材の変更、サンプル記事を消して、自分の記事を追加するなどしてカスタマイズしてください。
ファイル管理は、管理するリポジトリで自由におこなってください。
サイトを更新したい場合は、Deploy.batを押すだけです。

お疲れ様でした。

次回は具体的なカスタマイズ方法を解説していきたい