Hugoとは
公式トップページ によると、
The world’s fastest framework for building websites
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
つまり、
Hugoは、OSSな静的サイトジェネレーターで、サイト生成がめちゃ速いよ！
だそうです。
HUGOの特徴
静的サイト
Hugoは静的サイトをビルドするためのフレームワークです。
静的サイトとは、HTML、CSS、JavaScriptで構成されており、サーバーサイドの処理はありません。
さらに、基本的にはHTML、CSS、JavaScriptをゴリゴリ書く必要もありません。
Hugoにはテンプレート機能があり、 公開されているテーマ がたくさんあるので、好みのもの選んで使えます。
また、選んだテーマを自分でカスタマイズすることも可能です。その場合は、Hugoの仕組みや、HTML / CSS / JavaScriptの知識が多少必要となります。（少しカスタマイズする程度であれば、そんなに難しくはないと思います。）
記事はMarkdown / AsciiDocなどの軽量マークアップ言語で書けます。
Hugoでビルドすれば、それを元にHTMLを生成してくれるので、記事を書くときはテキストで構造的な文章で書けるのが魅力だと思います。
高速＆マルチプラットフォーム
Hugoは、Go言語で実装されています。
そのため、マルチプラットフォームでHugoを使えて、サイト生成が高速でできます。
Netlifyとは
静的サイトをホスティングしてくれるサービスです。
Hugoでは静的サイト(HTMLなど)が生成されるだけなので、それを外部に公開する必要があります。
昔であればWEBサーバを自前で構築して・・など、知識も労力も必要な大変な作業でしたが、Netlifyは、そこらへんをいい感じで請け負ってくれるサービスです。
簡単な手順で、しかも無料で！！
Netlifyの特徴
CD（継続的デプロイ）
Netlifyのメイン機能がこれです。
GitHub / GitLabなどのGitリポジトリと連携し、リポジトリへのPushを検知したら、自動でビルド＆デプロイをしてくれます。
CIツール（Jenkins / CircleCI）は必要ありません。
つまり、事前設定さえしておけば、あとは記事をリポジトリにPushするだけで、自動で公開されちゃうわけです。
Gitリポジトリ
リポジトリはpublicでもprivateでもNetlifyは利用可能です。
また、ブランチ毎にデプロイ可能なので、ステージング環境として開発ブランチにPushしてプレビューし、確認ができたら、masterブランチにMergeして本番環境へ適用といった運用も可能になります。
CDNで高速配信
CSS・画像などをNetlify側でキャッシュしてくれて、 CDNサーバは日本にも設定されているそうなので、表示速度向上が期待できるそうです。
QuickStart
HugoとNetlifyを使って、サンプル用のサイトを構築してみます。
Hugo
Hugo公式に手順があるので、基本はそれに従えばOKです。
私の手順を載せておきます。
Hugoのインストール
ローカル環境にHugoをインストールします。
私の場合は、WSLにLinuxbrewを導入しているので、それでインストールしました。
$ brew install hugoインストールが完了したら、Hugoのバージョンを確認
$ hugo version
Hugo Static Site Generator v0.55.6/extended linux/amd64 BuildDate: unknownHugoで新規サイトを作成
hugo-quickstart という名前のサイトを作成します。hugo コマンドを使って作成します。
$ hugo new site hugo-quickstart作成すると、下記のようなディレクトリ構成になっています。
$ tree hugo-quickstart
hugo-quickstart
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files次に、テーマを追加します。
ここのテーマから好きなものを選んでもOKですし、 ランキングされた人気のテーマから選んでもOKです。
公式のチュートリアルは、 Ananke theme で説明していますが、私は色々テーマを使ってみた結果、 robust というテーマを使っています。このブログもrobustテーマをベースに少しカスタマイズしています。
なぜかrobustテーマは上記リンクのテーマリストには入ってないんですよね。
ただ作者が日本の方ということもあり、robustテーマを扱った日本語の記事がよく見つかります。
$ cd hugo-quickstart
$ git init
$ git submodule add https://github.com/dim0627/hugo_theme_robust.git themes/robust次に、config.tomlを修正します。
baseURL = "https://syocky-hugo-quickstart.netlify.com/"
title = "Hugo QuickStart"
theme = "robust"baseURL は、独自ドメインを使わなければ、xxx.netlify.com にしておいてください。また、URLの最後には必ず「/」を入れるのを忘れないでください。
title は、サイトのタイトルなので好きなタイトルを指定してください。
次に、記事を追加します。 次のように、記事を追加するコマンドがあります。
$ hugo new posts/my-first-post.mdcontent/posts/my-first-post.md に下記のようなファイルが作成されているはずです。
---
title: "My First Post"
date: 2019-09-10T21:58:04+09:00
draft: true
---少し修正してテスト記事を編集します。
---
title: "My First Post"
date: 2019-09-10T21:58:04+09:00
---
これは、テスト記事です。作成した記事を、ローカル環境で確認します。
下記コマンドでHugo Serverを起動します。
$ hugo server起動できたら、 http://localhost:1313/ にアクセスすれば確認できます。
確認して問題なければ、リモートリポジトリにPUSHします。
※リモートリポジトリは事前に作成しておいてください
$ git add -A
$ git commit -m "1st commit"
$ git remote add origin git@github.com:syocky/hugo-quickstart.git
$ git push -u origin master参考までに今回使ったリポジトリです。
https://github.com/syocky/hugo-quickstart
Netlifyでホスティング
Hugo公式ドキュメントにNetlifyでのホスティング手順がありますので、それに従えばOKです。
私の手順を載せておきます。
※事前にNetlifyアカウント登録は完了させておいてください
Netlifyの設定＆デプロイ手順
Netlifyにログインして、
New site from Git をクリック
ここでは、GitHub を選択
該当のリポジトリが出てこない場合は、
Configure the Netlify app on GitHub をクリック
Only select repositories で該当のリポジトリを選択して Save
次に hugo のビルドコマンドなどを指定してますが、公式に従うと、hugoプロジェクト（今回だと hugo-quickstart ）直下に netlify.toml を作成すればOKです。netlify.toml は公式そのままコピーでOKです。
netlify.toml を作成したらPushします。
hugo-quickstart をクリックして、
Deploy site をクリックすればビルドが始まります。
しばらくして、緑色になっていればビルド成功です。
次に、サイトのURLを変更するため、Site settings をクリック
Change site name をクリック
config.tomlのURLに合わせます。
今回作成したサイトはこちらになります。
まとめ
いかがでしたでしょうか？
個人用途のブログであれば、Hugo + Netlifyで簡単に構築できるイメージが掴めたのではないでしょうか。
次回は、このブログでも使っているrobustテーマを色々カスタマイズしているので、そのあたりを紹介していこうと思います。