dorakueyon

Hugo + Gihub + 独自ドメイン(お名前.com) でSSLな話し

題名通り、新たにHugoを使ったブログを作るときに利用したサイトとかをメモ.

そもそもブログを作るに至った経緯はまた別の話し.

Hugo

導入

Hugoの導入(ローカルでserver動かしてWebブラウザでみるところまで)は特にハマりどころなし. お好きな記事でどうぞ.

デザインの選定

ここは沼にハマると一番時間がかかる部分. Hugoの見た目は基本下記3パターンのアプローチがある.

  1. ふろむフルスクラッチ
  2. 既存のThemeを利用してそのまま利用
  3. 既存のThemeを利用しつつ上書き修正

1.はまずHugo初級者からすると下調べから時間かかるので却下。 ということで普通の人は2.か3.にいきつくと思う.

結論、3. にならざるおえないかな.

まずは2.で落ち着けるか下記の公式を巡回

400近いThemesから自分の理想なThe Oneを見つけるのは胸が苦しくなったのでいくつかのランキング系まとめサイトに逃げた.

欲しかったのはシンプル/ミニマリスティックなやつ. 結局200近くくらい見比べつつ適当に手元にcloneしながら確認しつつ、最終的に下記のThemeに決めた

その名も”One”. そう、まさに僕だけのThe Oneだね.

ただ英語が基本のデザインなのか、自分の狙う感じのデザインには若干ずれてる. ちょっとそれじゃない感が要所要所にある感じ.

そうすると気になるところからHTML/CSS修正したくなってしまい、結局多少デザインいじることに.

差分は下記のような感じ.

$ diff -r ./layouts ./themes/one/layouts | grep -E '^[\+|-]\s' | wc -l
      26

$ diff -r ./static/css ./themes/one/static/css | grep -E '^[\+|-]\s' | wc -l
      61

html系が26行前後、cssが61行言語修正した. (加筆修正含む) こうしてみると100行以下修正するだけで個人的に満足いくデザインになるのは嬉しい.

ちなみに今回初めて知った名詞でblog-card|ブログカードというものがあって、なんてことはないはてぶとかでよく見るやつ ↓これ

ライトな記法で↑みたいに展開するために、layouts配下に新規にshortcodesフォルダを追加して、他の方々のやつを参考に自分でも使わせていただいた.

あまり使いすぎるとHugo以外に移行するときに移行スクリプトの作成が必要になるかな. という不安も拭えないのであまり種類ふやさず運用していこう.

ここまででとりあえずローカル上で動くところまでおわる.

Github

導入

ここも特に難しい所はないはずなので、特に記載はしません.

ここまででとりあえずWeb上で動くところまでおわる. そしてこの時点でSSL対応も完了しているのでとりあえずサイトをWebに公開したい、っていう人はここまで.

ただしドメインはgithub.io

ベンダーロックインは死んでもするなと死んだおじいさんに言われているので、感動も冷めやらぬまま独自ドメインの設定に.

独自ドメイン

ドメインを持っていなければまずは取得ということになる. これは正直なんでもよい。

ムーム? ディグネーション?とか色々あるけどやはり日本語名称の安心感からお名前.comを利用.

ここからSSLを見越したDSNの設定をしていく.

またまたGithub (SSL化)

SSLにしようと色々とCloudFrontとか使って頑張ろうとしたんだけど、結局Github側でgithub.ioのSSL化まで対応されていた.(2018年2月ごろより)

CloudFrontにNSむけてしまっていたがシンプルな構成にするためにGithub側でのSSL化をすることに.

ここらへんを参考に、ドメイン管理サイト側でAレコードを設定していく.

設定は完了したのだがTTLが標準のままだったようなので各所のDNSサーバーに新Aレコード設定が染み渡るのは時間がかかるようでまだサイトへの疎通が確認できていない.

このページが見れているということは新しい設定が世界に染み渡った結果です.

ちなみに”染み出す”というワードを使う人が現職で多いのだけど、使うのが恥ずかしくて意識をしないと口からでてこない.

以上です.

tech