今までWordpressで技術ブログを運用していました。
利用する上で不便はありませんでしたが、サーバー建てかつDBある状態で運用していると気にがかりなのはセキュリティ面でした。 またどうしても毎月千円前後コストがかかるのでプライベートで書いているブログの費用を抑えられないか調べていました。

調査結果、静的サイトジェネレーターHugoを利用することとしました。 シンプルですしテーマも多い、ビルド動作がかなり速いのが特徴です。

当記事ではHugoを利用する上でのコマンドや、Wordpressからの移行方法、詰まりポイントについて記述します。

Hugoインストールからサイト作成コマンド 見出しへのリンク

  • Hugoインストール
brew install hugo
  • Version確認(インストールされてるか確認する為)
hugo version
  • Hugoでサイト作成
hugo new site [新しいサイト名]
  • Theme選定
    Hugoテーマ
    当ブログで利用しているテーマはCoder

  • Themeインストール

git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

ただブログを構築する上でテーマを編集することは全然ありえるので、ダウンロードしてローカルに配置するのが良い。

  • config.tomlを編集
    themes/hugo-coder/exampleSite/config.toml の内容をconfig.tomlにコピーしてカスタマイズする。

  • 記事投稿

hugo new posts/my-first-post.md
  • サーバー起動
    -Dで下書き記事も表示される。
hugo server -D
  • 静的ファイル作成
    後にS3にアップする静的ファイル。
    実行後public配下が作成される。
hugo
  • 記事内画像表示
    Markdown 拡張方式
![This is a image](/images/image01.png)
  • Wordpress記事Export
    WordPress to Hugo Exporterプラグインをインストール。

  • Export記事の編集
    リンク先や画像ファイル、HTMLに変換されてしまっている箇所の修正 (ここが一番時間かかった)

デプロイ先:S3,Route53,ACM,CloudFront 見出しへのリンク

S3 見出しへのリンク

  • ドメイン名のバケット作成
    • 静的ウェブサイトホスティング
      • 有効
      • ホスティングタイプ:バケットホスティング
      • インデックスドキュメント: index.html
    • パブリックアクセスをすべて ブロック: オン
    • バケットポリシー
      • ↓のOrigin Access IdentityはCloudFrontのオリジンタブ、Origin accessの値
{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::ドメイン名/*"
        }
    ]
}

Route53 見出しへのリンク

  • ドメインの登録
# 名前解決出来るか確認.IPアドレスが返却されれば、名前解決できている
$nslookup ドメイン名
  • Aレコード追加
    • Simpleルーティング
    • エイリアス:はい
      • トラフィックのルーティング先
        • CloudFront(米国東部 (バージニア北部))

ACM 見出しへのリンク

  • バージニア北部
  • HTTPS対応に利用する証明書発行
    • CNAMEレコード発行

CloudFront 見出しへのリンク

  • ディストリビューション追加
    • オリジンドメインに新規ドメイン分追加
    • オリジンパスなし
    • S3バケットのアクセス制限:
    • ビヘイビア:
      • ビューワープロトコルポリシー, HTTP を HTTPS にリダイレクト
  • 代替ドメイン名 (CNAME)
    • ドメイン名
  • カスタム SSL 証明書 - オプション
    • ACM分指定
  • デフォルトルートオブジェクト
    • 空、index.html指定しないのはLambda@Edgeを紐づけてるから
  • キャッシュ削除
    • オブジェクトパス
    • /*
  • ビヘイビアの関数の関連付け, TOP配下のページが表示できない
    • オリジンリクエスト, Lambda@Edge

TOPページは見えるけど配下記事が403エラー 見出しへのリンク

配下のサブディレクトリはindex.htmlが表示されないので、Lambda@Edegでindex.htmlファイルを見る様に実装する。

Lambda@Edge

'use strict';

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    request.uri = request.uri.replace(/\/$/i, '/index.html');
    callback(null, request);
};

ただLambda@Edgeへの実装がこれだけだと別の問題発生

  • Wordpressから移行した際に、URL最後スラッシュなしの場合ページが表示されない
    Wordpressで運営していた時の記事URLは「URL最後スラッシュなし」だった。
    ただHugoブログをS3で運営していると記事URLは「URL最後スラッシュあり」となる為、Wordpress時代のリンクから飛んできた場合記事が表示されなくなってしまう。
    ちなみにHugoでスラッシュがありとなるのはフォルダ内のindex.htmlファイルを参照している為URLがディレクトリ表示としてスラッシュありで指定される。
    対応は以下記事参考にした。
    https://higelog.brassworks.jp/2955

広告貼り付け Google AdSense 見出しへのリンク

  • GoogleAdSenseの自動広告貼り付け layout/_default/baseof.html の head内にAdSenseのコードを貼り付ける。
    その後hugoコマンドすると全てのページに適用される。
    私はTOPページには反映したくなかったのでTOPのindex.htmlを手動で広告Scriptを削除。

  • 個別広告を貼り付ける場合

    • ファイル置き場 /themes/hugo-coder/layouts/shortcodes/ad.html
    • 呼び出し元は {{< ad >}}を記載する

フォントのカスタマイズ 見出しへのリンク

config.tomlでカスタマイズCSSを指定

custom_css = ["css/custom.css"]

custom.cssにfont-family指定する。他サイズや色なども。