Obsidian -> Github -> Cloudflare Pages with Hugo

まどや
Web開発
目次

サイトリニューアル

  1. Gatsbyでのサイト管理が面倒になった
    • とくにパッケージ依存関係の解決とかが億劫
  2. どうせなので前から気になってたCloudflare Pagesにホスト移行
  3. SSGはHugoを選択
    • Zolaは新しいCloudflare Pagesで不具合が出てるらしくてやめた
  4. せっかくなのでObsidianのみでサイト更新が完結するように全部自動化

以下は手順メモ。

構築手順

ローカル（Obsidian & Hugo）

  1. ObsidianのVaultを新規作成する
  2. Vaultのフォルダでgit initをしてgit configする
  3. Obsidian Gitプラグインを導入して好きに設定する
    • Create Backupのホットキーを設定するのがおすすめ
    • Push on backupを有効にして自動pushさせる
  4. Vaultフォルダの中でhugo new site hogeする
    • Vault階層の下にhoge階層が作られる
    • コマンド最後のディレクトリ名hogeは自由に変更可
    • 後でCloudflare Pagesのルートディレクトリにこのhogeを指定する
  5. Hugoのtheme設定を済ませる
  6. Vault階層の.obsidianやhoge階層のpublicはgitignoreする

リモート（Github & Cloudflare Pages）

  1. Githubに空リポジトリを作って、ローカルでgit remote addしておく
  2. Obsidian Vaultをgit push -u origin mainする
  3. Cloudflare PagesでHugoを選んでから以下のように設定する
    • プロダクションブランチ: main
    • ビルドコマンド: hugo
    • ビルド出力ディレクトリ: /public
    • 環境変数: HUGO_ENV = production
    • ルートディレクトリ: /hoge ←ここ重要
  4. デプロイしてエラーが出ないか確認する
  5. 必要なら独自ドメインも設定する

サイト更新手順

2ステップのみであとは全部自動で処理される。

  1. Obsidianでhoge階層のcontent以下にマークダウンファイルを作る
    • Templaterプラグインでファイル作成時にfront matterを自動挿入すると楽
    • Linterプラグインも併用すると更新日時lastmodを自動更新できて吉
  2. 編集し終えたらCreate Backupする（ホットキーを設定しておくと良い）
    1. 勝手にGithubにファイルがpushされる
    2. 勝手にCloudflareでhugoが走る
    3. 勝手にCloudflare Pagesにデプロイされる

移行して良かった点

  • Obsidianでファイル保存するだけですべてが完結する
    • ローカルでhugoコマンドを一切走らせないで済むのが良い
  • 何もかもが爆速
    • ファイル保存→Pagesデプロイまで30秒かからないくらい
  • 独自ドメインをCloudflareで管理しているので一元管理できて良い
  • 更新が楽になったからサイト更新頻度が上がるかもしれない
    • 上がらないかもしれない