【まとめ】HugoブログS3・CloudFrontで公開 Wordpressからの移行

今まで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

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指定する。他サイズや色なども。

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