- Obsidianでローカルに記事を書いたあと、Hugo + Bear Blogテーマ + Cloudflare Pages の組み合わせで高速かつ無料で個人ブログを公開できる
- GitHubによるバージョン管理と自動デプロイにより運用が便利。記事を書いて保存し、コミットするだけで即座に公開が完了
- 初期設定には多少の開発知識が必要だが、その後のワークフローは非常にシンプルになる
- 軽量で持続可能なブログ運用方法を探している人に適している
詳細構成
- Obsidianを使ってすべての記事を書く
- ローカルファイル保存方式なので、すべてのデータを自分で所有できる
- Minimalテーマにより、すっきりして邪魔のないインターフェースを提供
- iCloudを通じてさまざまなデバイス間で無制限に同期可能（Dropbox、Google Driveも利用可能）
- 公開方法
- Hugo: 超高速な静的サイトジェネレーター
- Bear Blogテーマ: ミニマルで高速なブログテーマ
- GitHub + Cloudflare Pages: 無料でウェブサイトをデプロイ可能
- 利点: サブスクリプション料金なし、ベンダーロックインなし、プラットフォームのポリシー変更リスクなし
システム設定
- Hugoをインストールした後、新しいサイトを作成する
hugo new site myblog
cd myblog
- Bear Blogテーマを追加
git init
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog
config.toml ファイルをBear Blogテーマ用に設定する
theme = 'hugo-bearblog'
- ObsidianをHugoに接続
- Hugoの
content/blog フォルダに記事を書く
- Obsidianで "Open folder as vault" 機能を使ってそのフォルダを連携
- こうすると、Obsidianで書いた記事がそのままHugoサイトの投稿としてつながる
- Obsidianで書く記事の先頭に、Hugo用のFront Matterテンプレートを追加する
+++
title= "Your Post Title"
date= YYYY-MM-DD
tags= ["post"]
draft= true
+++
- 公開の準備ができたら
draft の値を false に変更する
- Hugoのローカルサーバー機能を使って、記事をブラウザでプレビューする
hugo server -D
- 新しいGitHubリポジトリを作成し、ローカルプロジェクトを接続する
git remote add origin https://github.com/yourusername/yourblog.git
git add .
git commit -m "Initial commit"
git push -u origin main
- Cloudflareに登録した後、Pagesプロジェクトを作成する
- GitHubリポジトリを接続し、次のビルド設定を適用
- ビルドコマンド:
hugo --minify
- 出力ディレクトリ:
public
公開ワークフロー
- Obsidianで投稿を書く
- Front Matterテンプレートの
draft: true を draft: false に変更
- GitHubにコミットしてプッシュ
git add . git commit -m "Publish new post" git push
- Cloudflare Pagesが自動的に変更を検知してサイトを再ビルドし、1〜2分以内に反映される
11件のコメント
私もHugoブログを運用しています。
Obsidianで記事を書いたあと、GitHubリポジトリへのpushをトリガーにして、Cloudflare Pagesでホスティングする方式を使っています。
さらにそこにAlgoliaの検索サービスを入れていて、新しい記事を書くたびにインデックス作成のためのshファイルを1つ用意し、gitやインデックス作成などの連携コマンドを全部まとめて入れて、shコマンドの実行で記事を公開しています。
書いた記事をときどきグラフビューでまとめて眺める楽しさがあるので、主にObsidianを使っています。
私も似たような形でやってきましたが、今は github.com のリポジトリで直接書いています。（GitHub Pages が Jekyll を自動でビルドしてくれる機能を利用）
https://plan9.kr/
えっ、あのテキストバトルを作られた方ですか？
以前コミュニティで見かけて、楽しく遊ばせてもらいました（笑） お会いできてうれしいです
私も Hugo でブログを作っているので、親近感がありますね！
Obsidian をメインのエディタに使おうかとも思っていましたが、PC が使える環境なら VSCode のほうが良い気がします。
変更内容がミリ秒単位で反映されるので、Obsidian の必要性はあまり感じませんでした。
Hugo と Obsidian を連携させる理由がよく分かりません。
Hugo ユーザーなら、VSCode のほうが自然だと思います。
これは本当に興味深いですね
digital gardenプラグインも便利です共有ありがとうございます。
obsidianを使い始めたばかりなので、一緒に使ってみようと思います。有益な情報をありがとうございます。最近Obsidianをよく使っていますが、私にはとても合っている組み合わせのようです。
私もちょうど数日前にHugoでブログを1つ作ったところだったので、とても嬉しい内容ですね。
私はプッシュ時にGitHub Pagesへデプロイするよう設定して使っています（笑）。
Obsidianもとても好きですが、vscodeで"Front Matter"という拡張機能を使うのもおすすめします。
簡易CMS機能を提供していて、完璧とまではいかなくても悪くないですよ。
Hacker Newsの意見