【まとめ】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

  • 事前準備
    ドメイン取得

  • Route53

    • Hosted ZoneでTypePublic作成
    • NSレコード4つメモ (最後の.は不要)
    • ドメイン管理している別サイトでNSレコードを登録する
  • S3

    • ドメイン名のバケット作成
    • パブリックアクセス設定
    • バケットポリシー作成(CloudFront設定後、当ポリシーは削除する)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::ドメイン/*"
        }
    ]
}
  • 静的ホスティングの設定

    • インデックスドキュメントにファイル名指定(index.html)
  • www.ドメイン名のバケット作成

    • 公開設定
    • リクエストリダイレクト
  • Route53

    • Aレコード作成,Aliasバケットのエンドポイント
    • wwwも同様にAレコード作成
  • ACM, CloudFront, S3

    • HTTPS対応に利用する証明書発行
      • CNAMEレコード発行
    • S3バケットとACMで発行した証明書をCloudFrontに紐づける
    • ドメインのDNSルーティング設定
      • AレコードをS3からCloudFrontに変更
    • S3バケットのパブリックアクセス制限
  • 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 >}}を記載する
comments powered by Disqus