タイトルの通りの構成でtwitterに書くには長すぎるけどなんか真面目に記事書くのもだるいみたいな文章を置く場所を作ったのだった。

以下は作成時のメモ。

githubにリポジトリ用意

GithubにGithub Pages用のリポジトリを作成しておく。

User Pages Siteという概念とProject Pages Siteという概念があるのだが、今回はProject Pages Siteのほうで作成する。

https://help.github.com/articles/custom-domain-redirects-for-github-pages-sites/

Hugoをローカル環境にセットアップ

HugoはGo製の静的ページ作成ツール。なんかやたら早い。

今回はWindows10上で動かしていく。バイナリはgithubのリリースから適当に落としてくる。

中身を適当なフォルダに配置したら、以下のコマンドを実行してひな型を作る。

$ hugo new site gomama.blog

gomama.blogの箇所は任意の名称でよい。

テーマ設定

Hugoにはあらかじめ用意されたテーマが色々とあるので、Hugo Themeを見ながら好みのものを取得する。

今回はAglaus というテーマを利用することにした。

まず、themesフォルダでgit cloneする。

$ cd themes
$ git clone https://github.com/dim0627/hugo_theme_aglaus.git

それからconfig.tomlをAglausのページにあるように編集しておく。

baseURL = "https://blog.majigomama.com/"
languageCode = "ja-JP"
title = "gomama blog"
theme = "hugo_theme_aglaus" # ここにテーマ名を書くとコマンド実行時のテーマ指定が不要
hasCJKLanguage = true

[params]
  dateformat = "Jan 2, 2006"
  latestSize = 4
  ampscripts = """
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
"""

記事作成

実際に記事を作成していく。

hugo newを実行することで記事のひな型を作る。

$ hugo new post/start-blog.md

markdownで適当に中身を書いていく。

プレビューは以下のコマンドを実行した後 http://localhost:1313/ にアクセスすれば見える。

$ hugo server -w -D

-wをつけることで保存するだけで自動でプレビューも更新される。便利。-Dがあるとdraft状態の記事もビルドされる。draft状態とかいうのがいきなり出てきたけど、hugo newをしたとき、記事はdraft=trueの状態になっている。この状態だとpublicフォルダに記事が生成されない。公開する際はdraft状態じゃなくする必要があるのだった。

というわけで記事が完成したの公開できる状態にする。

$ hugo undraft content/post/start-blog.md
$ hugo

とすることでpublicフォルダが生成され、めでたく記事を公開できる状態になる。

githubへ登録

publicフォルダの中身をgithubへ登録する。

$ cd public
$ git init
$ git add .
$ git commit -m "Initial commit."
$ git remote add origin https://github.com/gomama/hugo-blog.git
$ git push -u origin master

とりあえずこれでGithub Pages上で公開できる状態になった。また、元の設定などもgit管理できるようにしておく。

$ cd ..
$ git init
$ echo /public/ >> .gitignore
$ echo /theme/ >> .gitignore
$ touch data/.gitkeep
$ touch layouts/.gitkeep
$ touch content/.gitkeep
$ touch static/.gitkeep
$ git add .
$ git commit -m "Initial commit."

実際の更新時、いちいちcommitやらなんやらを順番にやるのはだるいので、スクリプト化しておきたい。それはまた別途考える。

Cloudflare設定

次にCloudFlareから転送する設定を行う。独自ドメインが必要なので事前に確保しておくこと。

CloudFlareはCDNで、無料プランがある。まずは登録する。メールアドレスとパスワードを入れるだけ。

以下などを参考に設定する。

https://qiita.com/superbrothers/items/95e5723e9bd320094537

なお、この記事中だとCloudFlareのSSL設定は”Flexible”、つまりCloudFlareとgithub間は平文通信となる設定を選んでいるが、2017年現在はgithub pagesもssl対応しているため、FULLを選んで問題ない。というかFULLを選ぶ方がよい。FULL(Strict)は証明書の有効性が確認できずダメだった。

とりあえずこれで独自ドメインHTTPSなページができた。次はうまいかんじに更新するスキームを作っていく。