はじめに

静的サイトジェネレータの Hugo とWebホスティングサービスの Netlify を使って、ブログを作成し公開するまでの手順です。 失敗も多かったので詰まったところもあわせて書いていきます。

HugoとNetlifyで一瞬でブログを公開できるよ、みたいな解説ページもあって、実際そのとおりやればすぐ公開できます。 ただ初心者だと少し外れたケースが生じるだけでわからなくなるので、ひとつひとつ理解しながら作っていくほうがあとあと楽かもしれません。 私は何回か詰まってしまい、そのたびに作り直しました。

私はこういうウェブサイト作るのは初めての初心者なので、信頼性の点ではほかのサイトを参考にした方がいいです。 というか初心者の人は基本的に複数のサイトを読んで参考にしながら進めるくらいでいいと思います。

作業環境

  • Windows10 64bit
  • Hugoの実行ファイルディレクトリ:C:\Hugo\bin
  • 作業ディレクトリ:%USERPROFILE%\Documents\MyBlog001
  • Hugoのバージョン: 0.54.0
  • 使用テーマ: Robust(2019年3月10日時点の最新バージョン)
  • ついでに筆者のスペック: HTML/CSS、C#、Python の入門書を1冊づつ読んだことがある程度

なぜ静的サイトジェネレータか

メリット

  • 基本的にサイトの表示が速い
  • ワードプレスとくらべて管理やセキュリティ対策が楽らしい
  • よっぽどの規模のサイトでなければNetlifyの無料プランでたりるので基本的にサーバー代が不要

Netlifyの無料枠の解説をしているページがありました。 Netlifyの無料枠のまとめ - suzu6

デメリット

  • 他のブログサービスでプラグインなどで提供されている機能が用意されていない場合が多く、実装するにはいろいろ頑張らないといけない。
  • 他のサービスと連携しないとウェブの管理画面から更新できない。

私の場合は欲しい機能を実装しようとHugoのテーマをカスタマイズし始めたら沼でした。 ついそちらにかかりっきりになってしまい記事を書き始めるのがずいぶん遅れました……。 楽しかったんですけどね。

またウェブから更新できないことについては、長期間留守にするので外出先から更新したい、とかでなければたいしたデメリットではないです。 一応NetlifyCMSなどのサービスと連携することでウェブからも更新できると思いますが、ここでは触れません。

なぜHugoか

ビルドやライブリロードが高速

ライブリロードとはhugo server -w というコマンドでローカルサーバー( http://localhost:1313/ )を実行してファイルシステムを監視し、監視領域内でファイルの作成や更新が行われるたびにサイトが最新の状態に再ビルドされブラウザが自動でリロードされるというしくみです。 そしてHugoではビルドが爆速なので、上記のリロードまでが一瞬で終わるため、記事を書くにもサイトをカスタマイズするにも、サイトの最新の状態を即確認できてストレスがありません。

Hugoをしばらく触った後にHexoという静的ジェネレータもすこし試したんですが、Hugoと比べてとても遅くて耐えられませんでした。 それほどHugoは快適です。

比較的情報が多い

情報については日本語でもそこそこありますし、英語の情報はもっと多くて翻訳にかけたら解決することが多かったです。

Gitの導入

Git for Windowsをインストール

WindowsにGitをインストールする方法 | サービス | プロエンジニア

私はあらかじめVisualStudioCodeをインストールしておき、Gitのインストール時にデフォルトエディタに指定しておきました。 それ以外は上記サイトと同じ設定です。

Windowsの人はGitBashは使えるようにしておいた方が便利だと思います。 MacやLinuxのコマンドで解説しているサイトがおおいのですが、Windowsのコマンドプロンプトでは使えないコマンドがいくつかあり、それらがGitBashで普通に使えたということがあったからです。

※ちなみにGUIで操作ができるGitHubDesktopというのもあります。 しかし見た目こそわかりやすいものの、Hugoの解説をしているサイトはほぼgitコマンドで解説しているので、両者の挙動をいちいち照合する必要があり逆に大変でした。 よってGit for Windowsを導入してコマンド操作に慣れていくほうを推奨します。

初期設定

Git for Windowsの基本的な使い方 | サービス | プロエンジニア

Gitの初歩的な解説サイト

Gitの初歩的な解説はこのへんを見ました。 数種類コマンドを覚えればとりあえずやっていけますが、Gitの基本的な理解はあったほうがいいかもしれません。

無料レッスンもあるみたいです。

Git | プログラミングの入門なら基礎から学べるProgate[プロゲート]

Hugoのインストール

ダウンロード~インストール~環境変数Pathを通す

基本このあたりの解説を見てやればいいです。

私はC:\Hugo\binにhugo.exeを入れました。 そのあとPath(※)を通します。 確認はhugo versionコマンドで以下のようなメッセージがでたら成功です(v0.54.0の場合)。

$ hugo version

Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z

※私の場合は、システムの詳細設定→環境変数 で追加してもなぜかうまくいかなかったので、setxコマンド(気軽にやるべきではないらしい)でやったところhugo以外のよくわからないPathまでいくつも追加されて焦りました。 いきなりsetxコマンドでPathを通す解説をしているサイトもありますが、setxコマンドは最終手段にした方がいいかもしれません。 なおそれでも実行できなかったのですが、システムの詳細設定の順番を入れ替えたら通りました。

作業ディレクトリの作成

コマンドプロンプトかGitBashで好きなフォルダに移動し(今回は%USERPROFILE%\Documentsにした)、hugo new site <プロジェクト名>で最低限必要なファイルやディレクトリが生成さます。プロジェクト名はMyBlog001とでもしておきます。

# ドキュメントフォルダに移動(コマンドプロンプトの場合)
cd %USERPROFILE%\Documents

# ドキュメントフォルダに移動(GitBashの場合)
cd Documents

# 作業ファイルディレクトリ作成
hugo new site MyBlog001

これでドキュメントにMyBlog001フォルダができます。MyBlog001フォルダの中身は

MyBlog001/
    ┣ archetypes/
    ┣ content/
    ┣ data/
    ┣ layouts/
    ┣ static/
    ┣ themes/
    ┗ config.toml

となっています。

ちなみにHugoの各フォルダの役割は Hugoフォルダの構成 | なかけんのHugoノート がわかりやすかったです。

Gitリポジトリの作成

ローカルリポジトリの作成

カレントディレクトリが (ユーザー)/Documents だとして、

# MyBlog001フォルダに移動
cd MyBlog001

# いまいるフォルダにローカルリポジトリを作成
git init

# .gitignoreファイル作成。(プロンプトでやってた場合、git bashを起動しMyBlog001フォルダに移動して)touch実行
touch .gitignore

適当なテキストエディタで.gitignoreファイルを開き/publicと入力し保存します。(もしかしたら不要かも)

リモートリポジトリの作成

GitHub上に空のリモートリポジトリを作成しておきます。

The world’s leading software development platform · GitHub

  1. GitHubのアカウントを取得 (参考:GitHubアカウントの新規作成方法 | プログラミング入門ナビ
  2. new repository
  3. repository name:MyBlog001と入力し、Privateを選択(以前は有料でしたが無料になりました)
  4. Create Repositry
  5. リモートリポジトリのページに移るので、Quick setupというところにある”https://github.com/(ユーザー名)/MyBlog001.git“のようなURLをコピーしておく。

そしてgut bash等で、MyBlog001フォルダに移動し、次のようにコマンドを実行していきます。

# ステージングエリア(commitするためのファイルを登録しておく場所)に登録(-Aは変更をまとめてaddするオプション)
git add -A

# ステージングエリアに登録された変更を記録する(""内は変更内容などのメッセージを書くらしい)
git commit -m "initial commit"

# ローカルリポジトリにリモートリポジトリ情報を追加(originの後は上のSSでコピーした内容)
git remote add origin https://github.com/(ユーザー名)/MyBlog001.git

# リモートリポジトリに反映させる
git push -u origin master

これでMyBlog001フォルダ内のファイルやフォルダがリモートリポジトリに反映されます。archetypesとconfig.tomlしかなくて焦りましたが、どうやら中身のないフォルダは反映されないらしいので気にしなくてよいです。

GitHubはSSHという認証方式もありますが、今回はHTTPSでやります。

テーマを適用する

テーマのダウンロード

公式サイトのテーマ一覧 Complete List | Hugo Themes から好きなのを選びます。 とはいえ、テーマによってはクセが強かったりするので、最初は利用者が多いテーマを選んだ方が困ったときに情報を集めやすいと思います。

まずこの赤線で囲んだ部分に注目します。

Hugoテーマの注意事項

Hugoの最新バージョンをインストールしてすぐにテーマを選べば気にしなくてもいいんですが、そのテーマが対応しているHugoのバージョンは一応チェックしておきます。

また”License”についてもチェックしておき、そのライセンスが許す範囲内で利用しましょう。

“Download”からテーマのリポジトリに飛ぶので、/themes フォルダにgit clone または git submodule addします。

ところで上のテーマ一覧にないテーマで恐縮なんですが、今回は私も使っているdim0627/hugo_theme_robustというテーマで説明します。

themes/robust 内のtheme.tomlを見ると、

license = "MIT"
min_version = 0.42.2

とあるので、ライセンスはMITに従い、Hugoのバージョンは0.42.2以降で使用します。 MITについてはググってください。

今回はgit submodule addでやってみます。

テーマのリポジトリのアドレスをコピー

このようにhttpsから始まるアドレスをコピーしておき、以下のコマンドでthemesフォルダにテーマをインストールします(カレントディレクトリがMyBlog001フォルダの場合)。

$ git submodule add https://github.com/dim0627/hugo_theme_robust.git themes/robust

add の次にコピーしたhttpsから始まるアドレスをペーストします。 またそのあとの “themes/robust”という指定により、MyBlog001/themes フォルダに robust という名前でフォルダが作られ、その中にテーマが格納されます。

テーマの適用

そして config.toml の theme を修正します

theme = "robust"

これでとりあえずRobustテーマで表示されるようになっているはずです。

テーマをカスタマイズしたい場合の注意

テーマはカスタマイズすることもできますが、ここでは触れません。

ですが一つだけ注意点をあげておきます。/themes/robust フォルダのファイルは編集してはいけません。

/themes/robustフォルダ内はルートディレクトリと似たような構成になっているので、いじりたい /themes/robust 内のフォルダをルートディレクトリの対応箇所へコピーして、そちらを編集しましょう。

例:/themes/robust/layouts フォルダ  >> /layouts フォルダに上書きしてそちらを編集します。

テーマのlayoutsフォルダ内のファイルと同名のファイルがルートディレクトリのlayoutsフォルダ内に存在する場合は、後者のファイルが優先的に読み込まれるので、テーマフォルダ内のファイルを変更せずにカスタマイズすることができます。

Hugo初期設定

config.tomlで次のように編集。

baseURL = "https://myblog001.netlify.com/"
languageCode = "ja"
title = "My Blog Sample001"

とりあえずURLは独自ドメインではなくxxxxx.netlify.comとしておきます。 URLの最後の「/」は必要らしいです。 titleは適当に。

ここでローカルサーバーでどうなったか見てみましょう。

hugo server -w

とやってから、ブラウザで http://localhost:1313/ に接続し、テーマが反映されていればOKです。

ローカルサーバーはCtrl+Cで終了します。

ここまでの変更をリモートリポジトリに反映させておきます。

git add -A
git commit -m "second commit"
git push origin master

Netlifyでホスティング

流れはこちらのサイトを参考にしてください。

NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する – Snaplog

ビルドコマンドは”theme=~”の部分を config.toml で指定した名前に変更します。

hugo --theme=robust --buildDrafts

--buildDraftsはなくても大丈夫かも。

おそらく最初のデプロイはエラーになります。

Settings > Build & Deploy > Build environment variables で”Edit variables”をクリックし、 VARIABLE_NAME → HUGO_VERSION、 VALUE → 0.54.0 と入力してSaveすることで正常にデプロイできるようになります。(バージョン0.54.0の場合)

サイトのURLの変更は、config.tomlのbaseURLで設定したURL(今回の例だと、https://myblog001.netlify.com/ )を入れます。 URLが他人と被ってたら、config.tomlと一緒に変更します。

Saveしたらもう一度Deployして確かめてみましょう。 下の画像の順番でクリックします。

もういちどデプロイ

https://myblog001.netlify.com/ にアクセスして確かめます。

記事を書いて公開する

記事ファイルの作成

git bashなどで、ルートフォルダにおいて、次のコマンドを入力。

hugo new posts/test.md

これにより、MyBlog001/content/posts フォルダにtest.mdファイルが作られます。 contentフォルダは主に記事のファイルを置く場所です。 contentフォルダ内に複数フォルダを作って整理することもできます。

記事ファイルの編集

VisualStudioCode などのMarkdown(後述)が書けるエディターで、test.mdを開いて記事を書きます。

一番上の—で囲まれた領域はフロントマター(Front Matter)といいます。 ここはタイトルや日時、下書きかどうかなど、記事の情報を設定するところです。 dateは自動で書きこまれていると思うので、とりあえず次の二つだけ設定しておきましょう。

---
draft: false
title: "記事テスト"
---

draft は下書き状態かどうかを表します。trueで下書き、falseで下書きではない、となります。今回は公開するのでfalseにしておきます。

archetype/default.mdの設定項目を編集することで、hugo newで記事ファイルを作成時にフロントマターにdefault.mdの設定項目が反映されるのですが、今回は省略します。

記事を書くときは、

hugo server -w

でライブリロードを使うとよいです。 ブラウザで http://localhost:1313 を見ながら、記事を編集してCtrl+Sで保存するたびに変更がブラウザに反映されるので、記事の見た目を確認しながら書き進めることができます。

記事はマークダウン(Markdown)という記法を使って書きます。 初めての人は使う頻度の高い数種類だけ覚えて、あとは少しづつふやしていけばいいでしょう。

Markdown記法 サンプル集 - Qiita

URLや画像、動画などはショートコード(Short Code)というのを使うと貼るときに便利ですが今回は省略します。

記事を公開する

記事を書いたら保存し、リモートリポジトリにpushします。

git add -A
git commit -m "記事テスト"
git push origin master

Netlifyと連携しているので、GitHubのリポジトリにプッシュすると同時に自動でNetlifyでデプロイが始まります。

デプロイが成功すると、”Overview”画面の”Production deploys”で、次の画像のように”PUBLISHED”と表示されます。

デプロイ成功

成功していたら、 https://myblog01.netlify.com で記事が公開されているか確認します。

おわりに

長いわりにほかのサイトに説明を任せてる部分が多くてすいません。

私は実際にここまでやるだけでもだいぶ苦労しました。 さらにここからテーマのカスタマイズなどしていくと、少なくとも数倍は大変です。 はてなブログとかは楽だったんだなあとしみじみ思いました。

ですがサイトの表示の速さにニヤニヤできたりウェブの技術にちょっと詳しくなったりもしますので、よかったらぜひ挑戦してみてください。