blog移転

May 23, 2021 · 5 min.
tech

hugo aws

blogのバックエンドをWordPress@AWS-EC2からhugo@AWS-S3に切り替えました。

WordPressはバージョンアップやプラグインの更新が煩雑なのと MySQLのバックアップ・管理が手間だったので、 hugoに切り替えることでこれらが不要となり、かなり満足です。

hugoのセットアップとアップロードの手順をまとめておきます。

hugoのセットアップ Link to this heading

インストール Link to this heading

自分の生活環境はMacなんでhomebrewでhugoをインストールしました。

terminfo
1$ brew install hugo

サイトの作成 Link to this heading

hugoをインストールすると、hugoコマンドが利用できるようになります。 hugo new site <ディレクトリ名>はサイトを構築するのに必要最低限の設定とディレクトリを作成します。

terminfo
 1$ hugo new site my_site
 2Congratulations! Your new Hugo site is created in /path/to/my_site.
 3
 4Just a few more steps and you're ready to go:
 5
 61. Download a theme into the same-named folder.
 7   Choose a theme from https://themes.gohugo.io/ or
 8   create your own with the "hugo new theme <THEMENAME>" command.
 92. Perhaps you want to add some content. You can add single files
10   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
113. Start the built-in live server via "hugo server".
12
13Visit https://gohugo.io/ for quickstart guide and full documentation.

テーマの適用 Link to this heading

hugoはかなり多くのテーマがあるので、Hugo Themesから好みのテーマをピックアップしました。 自分はuBloggerにしています。

適用方法はテーマのインストール手順の通り、以下を実行。

terminfo
1$ cd /path/to/my_site
2$ git submodule add https://github.com/upagge/uBlogger.git themes/uBlogger

適用はこれだけなんで、かなり簡単です。

基本設定 Link to this heading

hugoで生成したサイトの設定ファイルは、ディレクトリ直下のconfig.tomlです。 詳細な設定内容はこちらを参照してください。

最終的に、こんな感じに落ち着きました。

toml
 1baseURL = "https://blog.ohr486.net/"
 2languageCode = "ja"
 3title = "ohr486's blog"
 4
 5# この設定を入れないと、サマリが長くなりすぎてしまう
 6# CJK=Chinese,Japanese,Koreanの略らしい、しらなかった
 7hasCJKLanguage = true
 8
 9# テーマ
10theme = "uBlogger"
11
12[params]
13    # uBloggerのバージョン、gitのsubmoduleでインストールしたので対象のタグに合わせている
14    version = "2.0.X"
15
16    [params.page]
17        # SNSボタンはTwitterとFacebookを指定
18        [params.page.share]
19            enable = true
20            Twitter = true
21            Facebook = true
22
23# ヘッダに記事一覧、タグ、カテゴリメニューを追加
24[menu]
25    [[menu.main]]
26        identifier = "posts"
27        name = "Posts"
28        url = "/posts/"
29        weight = 1
30    [[menu.main]]
31        identifier = "tags"
32        name = "Tags"
33        url = "/tags/"
34        weight = 2
35    [[menu.main]]
36        identifier = "categories"
37        name = "Categories"
38        url = "/categories/"
39        weight = 3
40
41[markup]
42    [markup.highlight]
43        codeFences = true
44        guessSyntax = true
45        # uBloggerのテーマを利用する際は必ずnoClassesをfalseにする必要があります
46        noClasses = false

記事の作成 Link to this heading

記事を追加する場合はhugoコマンドを使って以下の様に実行します。

terminfo
1$ hugo new <ディレクトリ名>/<記事名>.md

このコマンドでcontent配下の指定したディレクトリにmdファイルが作成されます。 自分は設定ファイルで記事のパスを/posts/としているのでディレクトリ名はpostsにしました。

ローカルサーバーの起動 Link to this heading

作成した記事は、hugo serverで起動したテストサーバーで確認できます。 よく利用するオプションは以下です。

オプション 効果
-w ファイルの変更を自動検知
-D ドラフト記事(draft=true)も対象にしてページを作成
–disableFastRender キャッシュを無効化
-F 未来の日付のページも作成

以下の様にテストサーバーを起動して、http://localhost:1313にアクセスするとサイトが確認できます。

terminfo
1$ hugo server -w -D --disableFastRender -F

コンテンツ生成 Link to this heading

テストサーバーで問題なければhugoコマンドで静的なHTMLファイルを出力できます。

terminfo
 1$ hugo
 2Start building sites …
 3
 4                   | EN
 5-------------------+-----
 6  Pages            |  7
 7  Paginator pages  |  0
 8  Non-page files   |  0
 9  Static files     | 88
10  Processed images |  0
11  Aliases          |  1
12  Sitemaps         |  1
13  Cleaned          |  0
14
15Total in 160 ms

デフォルトだとカレント直下のpublicディレクトリが生成され、そこにファイルが出力されます。

terminfo
1$ ls public
2404.html    categories  css         img         index.html  index.xml   js          lib         page        sitemap.xml tags

AWSのセットアップ Link to this heading

ホスティング&デプロイ Link to this heading

hugoで生成したコンテンツのホスティング方法は、公式サイトのHosting&Deploymentにまとまっています。 Netlifyにホスティングするのがおすすめらしいのですが、 自分はAWSのS3を使ってホスティングする事にしました。

S3のセットアップ Link to this heading

当然ですがS3のバケットを作成する必要があります。 自分はterraformでプライベートのAWSのリソースを管理しているので s3のtfファイル を作ってterraform plan & applyでバケットを作成しました。

deployment Link to this heading

deploymentの設定はconfig.tomlに以下の様に記載しました。

toml
 1[deployment]
 2    [[deployment.targets]]
 3        name = "blog.ohr486.net"
 4        URL = "s3://<作成したバケット名>?region=ap-northeast-1"
 5
 6    [[deployment.matchers]]
 7        pattern = "^.+\\.(js|css|svg|ttf)$"
 8        cacheControl = "max-age=31536000, no-transform, public"
 9        gzip = true
10
11    [[deployment.matchers]]
12        pattern = "^.+\\.(png|jpg)$"
13        cacheControl = "max-age=31536000, no-transform, public"
14        gzip = false
15
16    [[deployment.matchers]]
17        pattern = "^sitemap\\.xml$"
18        contentType = "application/xml"
19        gzip = true
20
21    [[deployment.matchers]]
22        pattern = "^.+\\.(html|xml|json)$"
23        gzip = true

deployment設定を記載したら、

terminfo
1$ hugo deploy --dryRun

でdryRun、

terminfo
1$ hugo deploy

でデプロイできます。

注意点ですが、作成した記事がドラフト(draft: true)の場合、当然deploy対象にならないので、 ドラフト状態を解除(draft: false)しておく必要があります。

コンテンツ生成してdeployした結果は以下。

terminfo
 1$ hugo
 2Start building sites …
 3
 4                   | EN
 5-------------------+-----
 6  Pages            | 16
 7  Paginator pages  |  0
 8  Non-page files   |  0
 9  Static files     | 88
10  Processed images |  0
11  Aliases          |  5
12  Sitemaps         |  1
13  Cleaned          |  0
14
15Total in 156 ms
16$ hugo deploy
17Deploying to target "blog.ohr486.net" (s3://blog.ohr486.net?region=ap-northeast-1)
18Identified 108 file(s) to upload, totaling 3.0 MB, and 0 file(s) to delete.
19Success!
20Success!

まとめ Link to this heading

WordPressからhugoに切り替えました。 使ってみた感想としては、かなり軽量でコンテンツのジェネレートがちょっぱやなので快適です。 CI化やコメント機能の追加等まだまだやる事は残ってるのですが、一旦記事をポストできるところまでできたので終了。