このブログのツアー

何回でも「ブログ作ろう!」と考えてようやく後悔できました!このブログは自分が学んだことや記憶したいことなどを記録するための場所だ。誰か役に立つかもしれないので、公開した。今まで色々なプラトフォームやサービスなどを調べましたが、どこかが足りない昨日がなかっただ。結局、以下の昨日がマストで明確して、自分で作るようにする:

  • 自分でホスト:他のサービスにコンテンツをコントロールするといやな感じ
  • 多言語対応(i18n):英語と日本語の両方にかきたい
  • コンテンツはどう考えても静的な感じなので、清適サイトでベスト
  • ブログの種類はタグでつけたい
  • tooling – 開発が好きのでいつものツールで活用したい (GitHub, Markdown, など)

あれば嬉しい機能:

  • 統計情報(Google Analyticsほどではなく、ページ数とか)
  • フィードバック(コメントではなく)

その要件に考えて、「Metalsmith」に試しました。MetalsmithはNode.jsの公式仕様書で作製されている。ほぼ全部できたけど、多言語はプラグインでできるけど、ちょっと辛かったので、ギブアップだった。

次は「vuepress」だった。色々なホストに発行することは簡単でできましたし、多言語対応はゼロからサッポートしているので、とても嬉しかった。でも、vuepressがまだまだ「alpha」版で、そんなに毎日ブログの見た目とかいじりたくないなと思って、今後に考える。

結局、Hugoの方がいい感じで作れるような感じになった。完全に静的サイトだし、CICDに作ろのは簡単だし、多言語もサッポートしているし、ちょうどいいかなと思って作って見た。

NOTE: 以下のCICDを作るのは勉強になりましたが、Netlifyに移動した!

新しいフローは以下

Git Push/PR作成 → NetlifyがHugoビルド → Netlifyが発行する → 完了!


投稿から公開までのツアー:

このブログはサービスの3つを利用する:

  • GitHub.com (ソースコード管理・ワークフォロー管理)
  • Azure DevOps (CICD)
  • AWS (ホストのプラートフォーム)

以下の流れでイメージできると思う。 (draw.ioのおかげさまで):

ブログの記事追加の流れ

GitHubのPrivate Repositoryでコード管理している。PRベースでコラボレーションや編集がやりやすいため。投稿ごとに新しい分岐る(例:posts/my-blog-tour)。ローカルのhugoでhugo new posts/my-blog-tour.mdのファイルを実行して、メタデータの全部を自動生成されている。両言語に書いてからgit pushをする。そのあとは、GitHubでPRを作って、だれかにアサインして、マージされる。マージされるときに「Azure DevOps」のビルドを実行される。

そのビルドのステップは:

  • ソースをGitHubからダウンロードする
  • Submoduleもダウンロードする(ThemeはSubmoduleで紐づけている)
  • Hugoをダウンロードする
  • HugoでMDからHtmlに変更され、「Artifacts」のダイレクトリーにコピーする

ビルドが正常に終わったら、発行の流れ:

  • 「Artifacts」からコピーする
  • AWSのS3にアップロードする