Hugo + FirebaseHosting + GitHubActionsで簡易ブログ作る
はじめに
元々はてなブログを使って個人ブログを運用していたんですが、ドメイン持ってるし自前で用意したいなと思いつつ。 とはいえお金かかるなら、はてなブログProでいいじゃんって話になるので無料で整えたいと思ったところです。
サイトを作ってみる
Hugo
https://github.com/gohugoio/hugo
Golangで作られた静的サイトジェネレーターです
macOSであれば
brew install hugo
で取得できます(もちろんdocにあるようにgit cloneしてgo installもできます)
Markdownをparseしてhtmlを吐き出してくれるので記述側はMarkdownで書くだけでokです
まずは作ってみる
それでは最低限の構成で作ってみます
$ hugo new site example
実行すると example というディレクトリが作成され、これがサイトの土台になります。
example 配下にはいくつかディレクトリやファイルがありそれぞれこのようになってます
| 名前 | 説明 |
|---|---|
| archetypes | hugo new する時に使われるテンプレートを格納する場所 |
| config.toml | サイトの設定ファイル, yamlにしてもok |
| content | コンテンツ(Markdown)を格納する場所 |
| data | コンテンツ以外のデータを格納する場所 |
| layouts | 独自テンプレートを格納する場所 |
| static | サイトで使われるCSSや画像などの静的ファイルを格納する場所 |
| themes | 後述するThemeを格納する場所 |
作成が完了しましたら
$ hugo server -D
でローカルで立ち上がります
Theme
Hugoにはいくつかテーマがあります
https://themes.gohugo.io/
Themeの導入方法はThemeのdocに書いてあると思うので省略します。
ちなみにこのブログのテーマは Anubis を導入しています
外部公開する
Firebase Hosting
https://firebase.google.com/docs/hosting?hl=ja
コンテンツをホスティングしてくれるサービス
基本無料ですが、転送量が10GB/月を超えるとサイトが無効になるので注意です。
あと無料枠だと保有できるサイズが10GBまでなので動画コンテンツが多かったりすると難しいです。
雑多に書くブログなのでアクセス数はどうせ少ないし、運用コスト固定でかかるならこっちでって感じで採用しました。
- まずFirebaseConsoleでプロジェクトを作成します
- Firebase Hostingで新しいサイトを作成します
- Firebase CLIをインストールします
- hugoで作成したディレクトリに移動して
firebase loginしたのちfirebase initで作成したプロジェクトと紐付けします firebase deployを実行するとuploadできます
GitHub Actions
これで
- HugoでMarkdown → 静的サイト生成
- FirebaseHostingで配信
という環境は揃ったんですが、いざ記事を上げるとなるとアップロードは手動になります。 始めた当初は問題ないですが、例えば端末を変更するとアップロード環境を再構築する必要があります。 せっかくMarkdownというPreviewが可能な便利なもので書いてるのでアップロード環境はGitHubActionsに乗っけます
設定に関してはこのブログのを参考に組むと良さそうです。
https://github.com/slme9364/slme-blog/blob/main/.github/workflows/firebase-hosting-merge.yml
おわり
これで一通り、記事を書いてGitHubに上げるとデプロイを自動でやってくれる環境ができました。
おそらく一番苦戦するところはGitHub Actionsかconfig.tomlあたりだと思いますので、その際はこのブログのリポジトリを参考にしてください！