このブログを公開するまで

August 24, 2022

この記事は #chillSAP 夏の自由研究2022 8/27の記事として執筆していますが、SAP関係者が書くSAPとは関係のない研究です。

みなさま初めまして。でぶおぷ次郎(tnmrknm)です。

某ホワイトコンサルティング企業でSAP関連の仕事をやっている猫です。最近めっきり技術的なことをやらなくなってしまっていたのですが、このままではまずいと思い立ちブログを開設するに至りました。
これまでもいくつかQiitaなどに技術記事を書いていたのですが、これからはこちらでツラツラと書き連ねていきます。

Zennでもいいんじゃないかとか、SAP Blogとかとも迷ったのですが、SAPやってる人はZennそんなに見ないだろうし、たぶんSAP関係ないこともそこそこ書くし、だったら自分でブログ立てればいいかということで、頑張ってアウトプットしていきます。

とはいえ思いつきでブログを公開するのにはそこそこ苦労したので、初回の今回は公開までの手はずをまとめてみました。

ざっくり概要

前々から気になっていたHugo + AWS Amplifyでブログを構成しました。本当はWordpressを使ったり、あるいははてブロとかとも迷いましたが、どうせなら自分でサーバー代払って運営した方が長続きするだろうと思い、かつ多少新しい技術も触りたかったのでこの構成にしました。
あんまり作り込む部分自体に時間をかけずに済んだのは、Hugoを使ったおかげでした。
追い込んでアウトプットしていくスタイルを確立したい方には結構おすすめの手法なのでぜひ参考にしてみてください。

AWS Amplify

AWS Amplifyは静的Webアプリケーションを構築・デプロイするための簡易的なCI/CDサービスやアプリケーションのホスティング環境を提供しているサービスです。ブログ形式のような簡単な静的アプリを管理するのには一番ラクで簡単な手法かなということで選択しました。
この辺で凝ってEKSとか使って構成したがると永久にブログそのものが出来ないと思い、今回は作ることに主眼を置いています。(Done is better than perfectの精神が大事)

サービス自体は東京リージョンで公開されていることもあり、最終的にレスポンスも良好でした。コスト的にも、通信量で課金される形態なのでよほどアウトプットしなければ月に1$もかからず利用可能です。(コストはこちら) アクセス数でコストが増大しないところも良いですね。

Hugo

Hugoは「静的Webアプリケーション構築フレームワーク」です。 Hugoの大きな特徴としては、データベースを使用していないのでコンテンツは全てファイルで管理されています。ブログなどの記事はMarkdown形式のファイルで構成されているため、Amplifyのようなサービス単体でデータベースサービスなしで構成が可能となっています。

フレームワークということで、いくつかのテーマが公開されています。今回はブログ目的ということと、いくつかカスタマイズが必要なので情報の整っていそうなmainroadを選択しました。

構築していく

前準備

一応公式にも構築の手順は公開されています。

Host on AWS Amplify

Pre-requisitesにも記載がある通り、AWSアカウントのセットアップが必要です。 AWSは無料利用枠もあるのでぜひセットアップしてみてください。
あとはGitHubのアカウントもある方が良いです。最初に忘れて躓いてしまいましたが、ローカルにてHugoアプリケーションをビルドできる環境が必須です！
Macでやると簡単でしたがWindowsやLinuxでも可能なので忘れずローカルセットアップしましょう。

カスタマイズ

下記のブログが日本語でかつ一通りカスタマイズについて触れられていて参考になりました。

Hugo によるブログ作成と mainroad テーマのカスタマイズ

Hugoでベースのテーマをもとにカスタマイズをしていくことになるのですが、HugoではCSSやJSファイルに直接手を加えても良いのですが、元のレイアウトを崩してしまったり、将来のアップデート時に不具合が起こる可能性があるため非推奨のようです。
そのため、Themesというディレクトリ配下にベーステーマとなるソースを置いておき、config.tomlに手を加えることでテンプレートやスタイル等をオーバライドすることができます。

テーマカラーの変更

まずサイト全体のテーマカラーをベージュっぽい色、ハイライト色を水色に決定しました。こういった変更に関してもconfig.tomlで変更可能です。下記のように書き加えるとテーマカラーを上書きしてくれます。

[Params]
  highlightColor = "#F5E6DB"

日本語フォント

Mainroad テーマのデフォルト設定では日本語フォントが設定されていません。 Hugo 設定ファイル config.toml の .Params.customCSS フィールドを指定することでカスタムCSSファイルをインクルードできるようになっているので、これを利用して日本語フォントの設定を行います。

このサイトでは日本語フォントととして Noto Sans JP を導入しました。 Noto Sans JP を有効にするには以下のようにします:

まず Google Fonts のページ https://fonts.google.com/specimen/Noto+Sans+JP から Noto Sans JP のCSSファイルをダウンロードして static/css/notosansjp.css に保存します。

次に、このフォントを使用するためカスタムCSSファイル static/css/custom.css を以下の内容で保存します:

body {
    font-family: 'Noto Sans JP', sans-serif;
}
.logo__title {
	font-size: 32px;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	font-family: "moonflower", sans-serif;
}

これら２つのCSSファイルをインクルードするため、設定ファイル config.toml でCSSファイルのパスを指定します:

[Params]
  customCSS = ["css/notosansjp.css", "css/custom.css"]

Twitterウィジェットの設置

Mainroad テーマでは layouts/partials/widgets/.html にテンプレートファイルを保存することによって独自のサイドバーウィジェットを作成することができます（参考）。このサイトでは独自サイドバーウィジェットとして Twitter タイムラインの埋め込みを行いました。

Twitter タイムラインをサイドバーに埋め込むには、まず Twitter のヘルプ記事に従って埋め込みコードを作成し、Hugo部分テンプレートファイル layouts/partials/widgets/twitter.html として保存します。これでサイドバー用ウィジェット “twitter” として使えるようになります。

そして Hugo 設定ファイル config.toml で .Params.sidebar.widgets フィールドの値に “twitter” を追加すればサイドバーにウィジェットが追加されます:

[Params.sidebar] # サイドバーの設定
  home = "right" # ホームページでは右に表示
  list = "right"  # 一覧ページでは右に表示
  single = false # 個別ページでは表示しない
  # ウィジェットを並べる
  widgets = ["search", "recent", "categories", "taglist", "social", "twitter"]

プライバシーポリシー作成

サイトでクッキーを使って GTM 経由で Google Analytics を利用していますので、利用規約に従ってプライバシーポリシーにその利用の旨を記載する必要があります。

このサイトではその他のサイトポリシーや免責事項も含めて/privacy/のパスで公開し、Footer にリンクとして加えました。内容はこちらです。

加えたカスタマイズはこのくらいです。
本当はGoogleアナリティクスを入れたり、SNSシェアボタンを入れたりしたいんですが何よりもまずは一回完成させることを目指していきます。その辺はおいおい更新していこうかなと思います。

Amplifyへデプロイ

ある程度できたところで、なにはともあれデプロイです。
AWSコンソールへログインしてAmplifyへアクセスします。 ![A building](/images/スクリーンショット 2022-08-27 10.11.29 " “)