TOC
Hugoとgithub pagesでほぼ無料で独自ドメインブログをやる方法
- 今回は、HugoとGithub pagesを使うことで、（他の方法に比べて）無料で独自ドメインのブログサイトを公開する方法を解説します。
Hugoとは？
- Hugoは、オープンソースで開発されているウェブサイト構築のフレームワーク＆ツールです。
- 色々なテンプレートを使うことで、簡単にブログやデザインのいいサイトが構築できます。ただし、wordpressのようにGUIがあるわけではなく、CUIのコマンドと、tomlやmarkdownといった形式のファイルをエディタを使って編集し、静的なhtml/css等のファイルを生成して、サーバにファイルをアップロードして公開します。
- 一般的なブログサービスや、wordprssでサイトを構築した場合に比べてwebエンジニアリングの知識が必要となりますが、静的なファイルによって構成されているのでサーバの性能はそれほど必要なく、高速なサイトが作れるし、シンプルなサイトであれば本当に簡単に作れます。
Github pagesとは？
- Githubとは、Gitというオープンソースのツールを利用するためのサービスを提供する世界的に有名なサービスです。
- 詳細はここでは解説しません。少し調べればいくらでも説明は出てきますので。
- 今回の解説は、基本的にgitおよびgithubについては知っている＆使えることが前提となりますので、ご注意ください。
- Githubについてはweb関係の作業をするならエンジニアでなくとも知っている＆使えて損はないので、ぜひアカウント登録して使えるようになりましょう。
- Github pagesは、Githubを使ってサイトを公開するサービスで、Githubユーザーなら誰でも使えます。
- Githubは世界的なサービスなので、よほどの高負荷サイトでもない限り、個人のブログやサイト程度なら問題なくサイトとして使えます。
本当に無料？
- githubは現在publicもprivateも無料プランで無制限にリポジトリ作れるので個人で使う分には無料です。当然github pagesも使えます!
- wordpressを自分で立てたりするときのようなサーバ費用はかかりません。そのほかブログを始めるには、はてなブログのようなブログサービスを使う方法がありますが、こういったサービスは独自ドメインの設定には大抵有料プランにする必要があります
- ただし、ドメイン取得費用はかかります！ただ、これはどの方法を使って独自ドメインのブログを始める場合も同じなので、”独自ドメインの取得費用以外は”無料ということです。
- google adsenseの審査もgithub pagesで通ります（実際このサイトは審査を通してます）。
必要なもの
- Githubアカウント
- 独自ドメイン
- ドメインの取得方法はここでは解説しません。
お名前.comなどで取得すると良いでしょう。個人的にはGCPをよく使うのでgoogle domainで取るのが好きです。管理画面も扱いやすいので。
- ドメインの取得方法はここでは解説しません。
- gitおよびGithubについての基本的に知識
- mac（今回の手順はmacによって構築したときのて手順になります）
hugoの準備(mac)
macで
brewでHugoをインストールします。brewのインストール方法についてはbrew公式サイトを参照してください。brew install hugo- これでhugoコマンドが使えるようになります。
構築には
hubコマンドを使いますので、hubコマンドもインストールしておきます。hubコマンドはgitコマンドをラップしたgithub操作も行えるコマンドです。gitコマンドでも構築はできるのですが、githubを使う上でhubコマンドを入れておくと、githubの操作を行うためにいちいちgithubのサイトに行かなくて良くなるので使うことをお勧めします。hubコマンドもbrewでインストールします。brew install hub
hugoでブログを構築(mac)
では早速ブログを作っていきます。まずhugoでブログのプロジェクトを作成すします。このサイトを構築したときの手順を例として進めていきます。プロジェクト名はサイトの名前などにするといいでしょう（ここでは
sochiai-dev）。hugo new site sochiai-devプロジェクト名と同名のディレクトリが作成されますので、
cdでディレクトリ内に移動して、gitを使えるようにgit initします。cd sochiai-dev git initまず最初の状態を保存しておきたいので、初期ファイルを作ってcommitします。
touch README.md touch .gitignore echo "public" >> .gitignore echo ".DS_Store" >> .gitignore git add . git commit -m "first commit"hubコマンドで、githubにこのプロジェクトを保存するリポジトリ(private)作成してpushします。これでgithubのリポジトリにファイルが保存されます。(roadmanは私のアカウント名で、site_sochiai-devがリポジトリ名になるので、自分でやる場合はその二つは自分のものに変更してください)hub create -p site_sochiai-dev git remote add origin git@github.com:roadman/site_sochiai-dev.git git push -u origin master公式（
https://themes.gohugo.io/）からテーマを探す。- 様々なテーマがあります。
- Clean White（
https://themes.gohugo.io/hugo-theme-cleanwhite/）にして見ます。決め手はシンプルさと、レスポンシブル対応していることですね。
themeを自分のプロジェクトに適用します。
cd themes git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git cp -r hugo-theme-cleanwhite/exampleSite/** ../ cd ..早速、ローカルでどんな感じの表示になるのか試しにhugoでローカルサーバを起動して確認します。コマンドを入力すると、
Ctrl-Cで止めるまで実行し続けて、変更時は自動的に反映されます。hugo serve別terminalから、
openコマンドを使って、ローカルサーバで見れるようになったローカルサイトをブラウザで表示します。open http://localhost:1313/- 表示できていれば問題ないです。
ローカルでサイトが見れてますが、記事はテーマのデフォルトのページが表示されていると思います。デフォルトのページはいらないので削除します。記事の元データは
content/post/配下にあるので削除します。rm content/post/*.md記事を作る。
hugo new post/2019-10-19-test.mdcontent/post/2019-10-19-test.mdファイルができているので、エディタで開いて以下のように編集します。--- title: "初めまして" subtitle: "" description: "初めましての記事です" date: 2019-10-19 author: "roadman" URL: "/hello-world/" categories: ["Example"] --- Hello,world- 記事はMarkdown形式で書きますが、ファイル先頭の
---で区切られた部分の記述はpageの設定になります。titleは、ページタイトルです。description: ページ詳細の説明です。dateは、ページ公開日時です。未来の日付を指定することはできません（指定するとpageがgenerateされません）。また、ブログの記事は日付でソートされますので、それを考えて設定します。authorは、ページの記事の作成者です。URLは、ページのパーマネントリンクです。categoriesは、ページのカテゴリ設定です。好きなカテゴリ名を設定してください。
- 記事はMarkdown形式で書きますが、ファイル先頭の
再度
http://localhost:1313/をブラウザで見ると、ページの記事が表示されているかと思います。
github pagesの準備、構築
config.tomlのroot sectionに以下の行を追加します。これはあとで静的ファイルを生成したときに出力されるディレクトリ名です。。
publishDir = "docs"config.tomlの以下の設定を修正します。
baseURLは、まだ独自ドメインを設定していませんので、github pagesを使った時にサイトを表示するためのURLになります。取り急ぎサイトの体裁を整えるための設定だけしていますが、色々な設定がありますので、サイトの仕様にあったように修正してください。baseURL = "https://roadman.github.io/site_sochiai-dev/" canonifyurls = true title = "sochiai.dev" theme = "hugo-theme-cleanwhite" subheading = "webエンジニアの日々の作業や技術Tipsをまとめ、共有していくサイト" languageCode = "ja-jp" paginate = 5 publishDir = "docs" [params] SEOTitle = "sochiai.dev" description = "webエンジニアsochiaiの技術Tipsを共有していくサイト" keyword = "" slogan = "webエンジニアsochiaiの技術Tipsを共有していくサイト"静的ファイルを生成します。
hugoコマンドを実行すると、サイトのテーマと、先ほど作った記事から実際に使われる静的ファイルがdocs配下に生成されます。hugo生成した静的ファイルをgithubにpushします。
git add . git commit -m "update" git push
github pagesの設定
- Github pagesにドメインを設定する前に、ドメインの所有者を証明するための設定をドメインのDNS側に行います。以下では
Google Domainを例にしますが、他のドメイン管理サービスでもそれほど変わりません。
- Github pagesの公式の説明は以下になります。設定するIPは時期によって変わるかもなので、公式サイトを必ず確認してください。
- Githubのリポジトリのページを開きます。Settingsページを開くと下の方に
Github Pagesの設定があります。以下は設定例です。
Sourceは、master branch/docs folderを選択します。記述の通り、masterブランチのdocsディレクトリがサイトとして公開されます。Custom domainには、自分で取得したドメインを設定します（ここでは例としてsochiai.devを設定しています）。Enforce HTTPSにチェックを入れます。これによりSSLの設定及び更新を自動で行ってくれるようになります（無料のSSLであるLet’s Encryptで取得した証明書が使われます）。- 設定はすぐに反映されないことがあるのと、
Enforce HTTPSはCustom Domainの設定が反映されるまでチェックできないことがあります。その場合は少し時間を置いてからチェックしてください。
github pagesを開く
open https://sochiai.dev/- ちゃんと設定している＆設定が反映されていればサイトがみれます。
- サイトは基本的にオープンに公開されているので、リポジトリには公開されて困るような情報やファイルはいれないようにしてください。(privateリポジトリであっても公開サイトなので、docs配下は全てオープンな状態です)
運用について
- サイトを公開するだけならこれで終了です。
- この後、サイトに記事を追加したい、設定を変更したい場合は、リポジトリのファイルを修正して、リポジトリのmasterブランチにcommit&pushするだけです。
- ファイルの更新後、サイトに反映されるまで多少時間差があります。
まとめ
- これで設定は終了です。作業手順はそこそこありますが、wordpressで自分でサーバを契約してブログを建てる場合よりはかなり楽です。
- また、サイトは全て静的ファイルでできているので、Pagespeedなどでサイトチェックしても最初から結構いい数値が出ます。
- ただ、画像ファイルなどを置く場合は注意してください。あまり転送量が多かったりするとGithubから注意される可能性があります（自分は注意されたことはないのでなんともいえないですが）。画像だけCDNでキャッシュするなどの手法も有効ですが、基本的にはユーザーにとって優しいように画像サイズをリサイズ＆圧縮するのがいいです。
- 何より、自分でサーバを運用していないが運用の手間として非常に大きいし、セキュリティ的にもサーバに侵入されるとかを気にしないでいいので、手間をかけずにサイトを運用したいなら最適だと思っています。