Hugo + GitHub Pagesで独自メインのブログ作ってみました
前回の記事、「Webマーケターのはしくれ、ブログはじめました」の最後にも書いたとおり、このブログは静的サイトジェネレータの『Hugo』とGItHubが提供している静的サイトのホスティングサービス『GitHub Pages』を使っています。
GitHubについてすら初心者で、あらゆるところでつまずきまくりましたが、なんとか公開できました。
いろんな記事を参考にさせていただいたのですが、
- mzgkさんの「Hugo・GitHub Pages・独自ドメインでブログを構築 : 0」の記事0~4
- Asuka Suzukiさんの「Hugo + GitHub Pagesでブログを作る#1」の記事#1~#2
がとても丁寧に書かれており、大変参考になりました。ありがとうございました。
今回はその手順を残しておきたいと思います。
0. 目次
- Hugoとは
- GitHub Pagesとは
- 記事公開までのおおまかな流れ
- Hugoのインストール
- 作業ディレクトリの設定
- Hugoのテーマのインストール
- 記事生成
- GitHub Pagesの設定
- 独自ドメインの設定＆SSL化
- 記事をWebに公開
- さいごに
1. Hugoとは
Hugoとはgolang製の静的サイトジェネレータです。html／css／jsで構成されたサイトを効率よく作るためのフレームワークです。静的サイトジェネレータには他にも「Middleman」や「Jekyll」「Octopress」「Hexo」などがあるそうです。
Hugoのメリット
- Markdownで気軽にWebページを公開できる
- ページ表示速度が速い
- ビルドが速い
Hugoのデメリット
- 動的な処理が苦手
たぶん他にもメリット・デメリットはたくさんあるのでしょうが、まだ使い始めて間もなく、実感できる部分が少ないので、使用感についてはいつかまた書こうかと思います。
とりあえず、単純に記事を公開するだけで、サイト内にフォームを作ったり、データをDB管理する必要がなければHugoで十分な気がします。
2. GitHub Pagesとは
GitHub Pagesとは、GitHubのリポジトリに上げたファイルをもとに、無料でWebページを公開できるホスティングサービスです。
GitHub Pagesのメリット
- 無料で使える（Webサーバを用意しなくてよい）
- JavaScriptも動作する
- 独自ドメインの設定もできる
- プロジェクト単位でページを公開できる
GitHub Pagesのデメリット
- ソースコードなどサイトのファイルが公開される
GitHub Pagesについてもまだ分かっていない部分が多いです。そもそもGitHubについても。なので、もっと使っていきます（ = ちゃんとブログ更新していきます）
3. 記事公開までのおおまかな流れ
Hugoで記事ファイル生成 ➜ GitHubにプッシュ
以上です 笑
4. Hugoのインストール
まず私の環境について。
- macOS Sierra 10.12.4
- Homebrew 1.1.13
- Hugo Static Site Generator v0.21-DEV
Macの場合は、Homebrewでインストールできます。
$ brew install hugo
インストール完了確認
$ hugo version
Hugo Static Site Generator v0.21-DEV darwin/amd64 BuildDate: 2017-04-30T18:40:31+09:00
ちなみに、Homebrewが入っていない場合は先に入れておく必要があります。
# Homebrewのインストール
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# 問題がないかチェック
$ brew doctor
# 最新のバージョンにアップデート
$ brew update
これでHugoのインストールはおわりです。
5.作業ディレクトリの作成
hugo new site hogehogeのコマンドで、hogehogeという名前のディレクトリがカレントディレクトリに作成されます。今回はncolumnで作成します。
$ hugo new site ncolumn
ディレクトリの構成はこんなかんじになっています。
$ tree -a
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 1 file
各ディレクトリ・ファイルの概要
archetypes
デフォルトのMarkdownの記事テンプレートを置いておくディレクトリです。
config.toml
サイト全体に対する各種設定を記述しておくファイルです。サイトのタイトル、言語、使用テーマなど他にも細かな設定ができます。
content
記事のMarkdownファイルが置かれるディレクトリです。
data
config.toml以外で、サイト全体で使うパラメータを記述したファイルを置くディレクトリです。
layouts
サイトのレイアウトに関するファイルを置くディレクトリです。
static
静的ファイルを置くディレクトリ。ビルド時にpublicという公開用ディレクトリにコピーされます。
themes
レイアウトのテーマファイルが置かれるディレクトリです。
6. Hugoのテーマのインストール
Hugoのテーマを選定し、git cloneコマンドで落としてきます。
今回は、Tranquilpeakというテーマを使用しました。
$ cd themes
$ git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
これでテーマのインストールはおわりです。
7. 記事生成
記事の生成は、hugo new <filename>でできます。作業用ディレクトリ直下でコマンド実行する必要があります。
$ hugo new post/hogehoge.md
そうすると、contentディレクトリの配下にpostディレクトリが作成され、そこにhogehoge.mdが作られます。
├── content
│ └── post
│ └── hogehoge.md
hogehoge.mdの中身を見てみます。
+++
date = "2017-05-13T16:31:37+09:00"
draft = true
title = "hogehoge"
+++
+++で囲まれた部分は各種設定を記述する部分です。後半の+++より下に記事内容を書いていきます。
+++
date = "2017-05-13T16:31:37+09:00"
draft = true
title = "hogehoge"
+++
はじめての記事作成、本文サンプルです。
Hugoでは、hugo serverコマンドを使うと、ローカルでサーバを立ち上げてプレビューを行えます。
http://127.0.0.1:1313/で確認できます。
ちなみにhugoコマンドだけで実行すると、ビルドして終了となります。
$ hugo server -t hugo-tranquilpeak-theme -D -w
ここでの-tとか-D、-wはオプションです。
| オプション | 概要 |
|---|---|
| -t（-theme） | テーマを指定する。指定しない場合には、<作業ディレクトリ>/layouts/のレイアウトが適用される。 |
| -w（-watch） | ライブリロードが有効になる。わざわざブラウザでリロードしなくてすむ。 |
| -D（-buildDrafts） | 記事のdraftのステータスにかかわらず、記事をビルド対象にする。draft = trueのときに、-Dを指定しないとビルドされない。 |
あと、テーマにあわせてconfig.tmolに設定を記述する必要があります。どんな設定が可能かは各テーマのドキュメントを読む必要があります。ちなみにTranquilpeakについてはこちらで確認できます。config.tomlのサンプル
config.tomlに設定を記述しなかった場合とした場合で、この時点では以下のような表示になるかと思います。
config.tomlに設定を記述しなかった場合
config.tomlに設定を記述した場合
ローカルでサーバを立ち上げ、プレビューで確認して問題なければ、記事ファイルを開き、draft = falseに変更し、以下のコマンドで公開用のファイルを生成します。ここでも-tでテーマを指定します。
$ hugo -t hugo-tranquilpeak-theme
これで、publicディレクトリが作成され、そこに公開用ファイル1式が置かれています。これらをまるごとWebサーバに移せばWebに公開されます。 今回はGitHub Pagesを使って公開するので、次にその手順を書いていきます。
8. GitHub Pagesの設定
GitHub Pagesで公開する用のディレクトリ作成
GitHub Pagesでの公開用ディレクトリdocsを作成します。
$ mkdir docs
Hugoのビルドコマンドhugoによって生成される公開用ファイル1式がpublicディレクトリに置かれますが、その中身をdocsにコピーします。
$ cp -p -f -R public/* docs
このあと、GitHubにプッシュすればよいのですが、その前にGitHub側の設定を行います。
リポジトリの設定
GitHubのアカウントを持っていなければ作成します。 そのあと、GitHub Pagesで公開するリポジトリを作成します。
設定画面はこんなかんじです。
リポジトリの作成画面
GitHub Pagesの設定画面
9. 独自ドメインの設定＆SSL化
ドメインはすでに取得済みの前提で進めます。
GitHub Pagesで提供してくれる<accountname>.github.ioのドメインだとSSL化されているのですが、今回は独自ドメインを用いるので、「CloudFlare」というサービスを利用します。
このあたりは、カスタムドメインの GitHub Pages で HTTPS を使うを参考にさせていただきました。
CloudFlareは、主にCDN（Content Delivery Network：コンテンツ・デリバリ・ネットワーク）を提供するサービスとのことです。 恥ずかしながら、CDNというものについてよく知らなかったのですが、 -CDN：コンテンツデリバリーネットワークの仕組みとは？主要サービスの比較や無料CDN「cloud flare」の設定手順 - 第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか） を読むとなんとなくイメージがわきました。
CDNは画像とか動画ファイルを配信する仕組みで、アクセス元からネットワーク的に距離の近いサーバから配信することで、コンテンツを効率的に配信できるもの、という認識です。たぶんあっていると思います…
ncolumn.comへのリクエストに対し、CDNのサーバのほうを見に行ってもらう必要があるので、今回は以下を行います。
- CloudFlare側で、DNS設定を行う（独自ドメインncolumn.comとGitHubのIPアドレスを紐付ける）
- GitHub側にCNAMEファイルを設置する
- 独自ドメインを取得したサービス側で、ncolumn.comのネームサーバをCloudFlareのネームサーバのほうに変更する
DNS設定
CloudFlareの管理画面で独自ドメインを登録し、GitHubのIPアドレスを設定します。 GitHubのIPアドレスは、こちらを参考に、以下を用います。
192.30.252.153
192.30.252.154
設定画面はこんなかんじです。
CNAMEファイルの設置
またもやCNAMEという知らないワードが出てきたので、調べてみたところ、CloudFlare側で設定したAレコードというのはドメイン名とIPの関係を定義し、CNAMEはそれに別名をつけることができるものだとのことです。 AレコードとCNAMEレコードの違いを参考にさせていただきました。
独自ドメイン名を記載したCNAMEファイルを、docsディレクトリ直下に置きます。
$ cd docs
$ echo ncolumn.com > CNAME
ネームサーバの変更
ドメインはお名前.comで取得したので、お名前.comの管理画面でCloudFlareの管理画面で確認したネームサーバ名を設定します。 CloudFlareのネームサーバ名は、管理画面のDNSタブで確認でき、~~ns.cloudflare.comとなっているかと思います。
お名前.comでの設定画面はこんなかんじです。
↓に~~ns.cloudflare.comを設定する
SSL化
CloudFlareのCryptoタブで、SSLを有効化できます。
11. 記事をWebに公開
docsディレクトリでGit管理を開始し、さいごにプッシュして公開します。
# Git初期化
$ git init
# コミット
$ git add -A
$ git commit -m "Initial commit"
# リモートリポジトリ追加
$ git remote add origin https://github.com/nobuhiii/ncolumn.git
# プッシュ
$ git push -u origin master
これで記事のWeb公開はおわり（のはず）です。
12. さいごに
今回、記事には書いていないですが、公開鍵・秘密鍵の設定とか、複数のGitHubアカウントを使用、Gitのsubmoduleなど他にもいろんなところでつまずきましたが、なんとか公開までたどり着きました…
今までDNSまわりのことや、Gitのことについてなんとなく雰囲気はわかっていたつもりだったのですが、知らないことだらけでとても良い機会になりました。
算数、数学では実際に数式を書いて、プログラミングでは写経して流れを追っていくのと同じく、自分の手を動かすというのは非常に重要だなと再認識しました。
2記事目にしてだいぶがっつり書いてしまいましたが、これからもブログはゆるりと更新していきたいと思います。
おわり。
