HUGO + GitHub Pages を用いたウェブサイトの構築方法
HUGOとGithub Pagesを用いたウェブサイトの構築方法についてまとめていきたいと思います．
開発環境
- Windows10 Pro
- CPU: Core i7-3610QM @2.30GHz
- RAM: 8GB
- Chocolatey v0.10.15
- Hugo Static Site Generator v0.59.1-D5DAB232 windows/amd64 BuildDate: 2019-10-31T15:22:43Z
必要なもの
- HUGO
- Git
- GitHub アカウント
HUGOとは
HUGOは，Goで書かれた高速かつモダンな静的サイトジェネレータです．
HUGOは様々な用途のウェブサイトフレームワークです．技術的に言えば，静的サイトジェネレータです．
各閲覧者が来る度に動的にビルドを行うシステムとは異なり，HUGOは記事を作ったときと更新したときにページをビルドします．
ウェブサイトは編集されるよりもはるかに頻繁に表示されるため，HUGOはウェブサイトのエンドユーザに最適な表示法を提供します．
また，ウェブサイト作成者に理想的な執筆ができるように設計されています．
GitHub Pagesとは
GitHub Pagesは，GitHubのリポジトリ上のHTML，CSS，JavaScriptだけを使い構築される静的サイトホスティングサービスです．
このサービスでは，必要に応じてビルドを行い，ウェブサイトが公開されます．
GitHubの github.io もしくは自身のカスタムドメイン上に自身のサイトを投稿することができます．
GitHub Pagesのサンプルサイトは，ここから見ることができます．
HUGOのインストール
Windowsの場合，まずChocolateyをインストールします．
インストール方法は，ここに書いてあります．
手順ですが，以下のようになります．
1.管理者権限でコマンドプロンプトを実行します．
# 2020/01/10時点のコマンドですので，しっかりと確認してください．
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
3.しばらく待つとインストール完了です．
最後にHUGOについては，以下のコマンドでインストールが可能です．
choco install hugo
HUGOによるウェブサイトの構築
それでは，ウェブサイトを作っていこうと思います． 基本的には，チュートリアルに従って行っていこうと思います．
新しいウェブサイトの構築
まず好きなディレクトリでコマンドプロンプトを実行し，以下のコマンドを打ちます．
> hugo new site quickstart
Congratulations! Your new Hugo site is created in I:\temp\quickstart.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
そうすると，そのフォルダに quickstart というフォルダができます．
フォルダ構成は以下のようになっています．
> cd quickstart
> tree
I:.
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes
テーマの追加
HUGOでは，様々なウェブサイトのテーマが公開されています．
ここから，確認することができます．
今回はチュートリアルと異なり，Business Frontpageを使ってみようと思います．
最初に，GitHubからテーマをダウンロードし，自身のウェブサイトの themes ディレクトリに追加します．
# カレントディレクトリは，quickstartとします．
> tree
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes
> git init
> git submodule add https://github.com/cowboysmall-tools/hugo-business-frontpage-theme.git themes/hugo-business-frontpage-theme
themes/hugo-business-frontpage-theme/exampleSite を全てコピーして， quickstart 以下に貼り付けます．
以下のコマンドを実行し， http://localhost:1313/に接続すると以下のようなサイトが見れると思います．
> hugo server
テーマのカスタマイズ
テーマをカスタマイズするために，themes/hugo-business-frontpage-theme以下のstatic, layouts，i18n，imagesをコピーして，quickstart以下に貼り付けます．
そして，layouts以下のhtmlなどを編集することでテーマのカスタマイズを行っていきます．
themes/hugo-business-frontpage-theme以下のhtmlなどを編集しても，テーマのカスタマイズは可能ですが，一般的にはここはいじらないようです．
GitHub Pagesへの適用
最後にGitHub Pagesへ適用していきます．
GitHub Pagesへ適用する方法は他にもあると思いますが，今回はhugoによって生成された静的ファイルをGitHubのリポジトリにアップロードすることで適用する方法を行っていきます．
静的ファイルの生成
まず，以下のコマンドをうち，htmlなどのファイルを生成していきます．--minifyというオプションは，htmlなどを圧縮して生成してくれます．
> hugo --minify
Building sites …
| EN
+------------------+----+
Pages | 4
Paginator pages | 0
Non-page files | 0
Static files | 30
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 895 ms
そうするとpublicフォルダとresourcesフォルダが生成されると思います．
> tree
I:.
├─archetypes
├─content
├─data
├─layouts
├─public <=======生成される
├─resources <=======生成される
├─static
└─themes
GitHub Pagesへの適用
次に，GitHub上で<GitHubのユーザ名>.github.ioというリポジトリを作成します．
例えば，GitHubアカウントのユーザ名がHOGEの場合，以下のようになります．
HOGE/HOGE.github.io
そして，先ほど生成されたpublicフォルダをHOGE/HOGE.github.ioにプッシュしていきます．
cd public // publicフォルダに移動
git init // gitを開始
git remote add origin https://github.com/HOGE/HOGE.github.io.git // originのリポジトリを追加
git add . // 変更されたものを適用
git commit -m "init commit"
git push -u origin master
以上でGitHub Pagesへの適用は終わりです．
https://HOGE.github.ioにアクセスすると，適用されているのが分かると思います．
まとめ
今回は，HUGOとGitHub Pagesを用いてウェブサイトを作る方法についてまとめました．
本来ならば，GitHubリポジトリは1つで十分なのですが，ソースコードのほうをプライベートリポジトリで管理したかったので，このようにしました．
今後はGitHub Actionsを用いて，自動化なども行っていきたいです．