HugoとNetlifyでBlogを再開

    hugo   blog hugo Netlify Go  Comments

header

きっかけ

アウトプットの場として、Blogを再度作ることとした。

せっかくなので、テキスト資産を残しやすい方法をとることとし、markdown + “Hugo” + 静的サイトホスティングという方式にてはじめてみようかと思います。 静的サイトジェネレーターは2020年現在だと複数選択肢がありますが、Go言語製で速い、と評判なのでHugoを使ってみることにしました。 個人的には、GraphQLを利用するGatsubyも気になっていますが、これはまた別の機会に試みてみようと思います。

本エントリは、本Blog立ち上げにあたっての大まかな流れと、ポイントをまとめておくこととします。

大まかにやったこと

大まかには、NetlifyではじめるHugoを参考にさせていただき、環境構築からデプロイまで実施しました。

hugoの導入

インストール

MacであればHomebrewを利用して簡単にインストール可能です。

brew install hugo

新しくサイトを作る

hugo new site blog

このコマンドでblogというディレクトリが作成されるので、その配下で作業を行います。

テーマを決める

Hugo Themesに大量のテーマがあるので、ここから選ぶのがまず早い。 私はHugo Theme Pureというテーマを元に、一部手を入れて利用することにしました。

テーマ設定を一部変更したかったので、このテーマのリポジトリを自分のGitHubにforkした上で、git submodulesとしてテーマを組み込み、変更点をcommitしながら利用することにしました。

forkしたテーマの手直し箇所は以下。

  • profile系の情報を、自分の情報に書き換えた。
  • cssのfont-family変更。具体的には以下。

Original

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

Modify

font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  • avatar、faviconを自分のものに変更
  • コメント欄にDISQUSを利用

独自ドメインの取得

ちょっと悩みましたが、今後のことも考えて自分のドメインを持っておくのはいいだろうと考え、Google Domainで取得。

ホスティング先をどうするか

最近の静的サイトのホスティング先はいくつか候補があります。 代表的なものは以下三つ。

GitHub Pagesは数年前に利用したことがあったので、今回は新しいことをやってみようと考え選択肢から外しました。 NetlifyとAWS Amplifyはどちらにするかちょっと悩みましたが、なんとなくNetlifyを利用することにしました。 GitHubに寄せてさえいれば、ホスティング先を変えるのは簡単にできそうなので、一旦今回は安易に流行りに乗ることにします。

Netlifyにdeployするには、netlify.tomlをルートディレクトリに置いておく必要あるので注意が必要です。netlify.tomlの具体的な記述方法については、Host on Netlifyに記載のものをコピペすればOKです。 Netlifyを利用すると、Let’s Encryptの証明書も自動適用してくれて、デプロイ後自動的にSSL化されるので、非常に楽です。

Netlifyを利用するにあたっては以下を参考にしました。

気づかなくて地味にハマったところ

  • hugo serverで起動する簡易Webサーバーではカスタム404ページが利用できないため、ローカル環境で表示されなくても問題ない。GithubPagesやNetlifyでは何も意識することなく、生成物をデプロイするだけで利用できる。ただし、Apacheなどでホスティングする場合は設定変更が必要。
  • /about/が404エラーになる問題
    • これは、content/about.mdを新しく作成して中身を作ることで解決。

余談

余談ですが、一応AWS Amplify Consoleについてもデプロイできるかどうかまでの動作確認は実施済み。最終的な環境をNetlifyにするか、AWS Amplify Consoleにするかはちょっと悩み中です。AWS Amplify Consoleのアプリ名ではピリオドが使用禁止ということに気づかず、ビルド時にエラーが発生してハマってしまった。。 アプリ名の入力欄の時点でエラー表示するとかしてほしいですね！

AWS Amplify Consoleの利用にあたっては、AWS Amplifyコンソールを使ってHugoベースの静的サイトを構築を参考にしました。

記事内のコメントと動作が異なった、もしくは変更した点

Git submodulesについての挙動

以下の件については、少なくとも2020/3/6時点では、問題なく動作したので、気にしなくてよいと思います。一年ぐらい経っているので修正済みということなのかも。

注意点としては、レポジトリからソースコードを取得する際、サブモジュールは取得できないようです。

例えば、別レポジトリで管理されているテーマを利用したい場合、サブモジュールは利用しないようにしてください。

参考 Pipeline Error: My GitHub source stage contains Git submodules, but CodePipeline doesn’t initialize them

ビルドコマンドが適切に自動生成されない。

AWS Amplify ConsoleにGithubのリポジトリを指定後、Hugoを利用していることを自動認識してビルドコマンドが生成されるはずが生成されなかった。ので、以下コマンドに手動で書き換えしました。

version: 0.1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []
Hugoのlatestを利用する

環境変数を以下のように変更して、常に最新版を利用するように変更しました。 AWS Amplify Console上で、アプリの設定 > ビルドの設定 > Build image settingsの"Edit"を押して、“Add package version override"にて、Hugoのlatestを指定。

Reference

一部本文内と重複がありますが、細かいこと含めて参考にさせていただいた記事群です。

tatsuSE - Saboten Engineer

”A rolling stone gathers no moss.”is my inscription.