Obsidian Publish と GitHub Pages／Hugo：公開ワークフローの最適解を探る

2025年11月9日

Obsidian

Obsidian Publish と GitHub Pages／Hugo：公開ワークフローの最適解を探る

Obsidian でメモを書き溜めたら、次は「どうやって公開するか」が気になりますよね。公式の Obsidian Publish はワンクリックで公開できる手軽さが魅力ですが、月額料金がかかります。一方、GitHub Pages と Hugo を組み合わせれば無料で運用できますが、セットアップには少し手間がかかるのも事実です。

本記事では、Obsidian のコンテンツを Web 公開する際の代表的な選択肢である「Obsidian Publish」と「GitHub Pages／Hugo」を徹底比較します。それぞれの特徴、メリット・デメリット、適したユースケースを整理し、あなたのワークフローに最適な公開方法を見つけるお手伝いをいたします。

背景

Obsidian とコンテンツ公開のニーズ

Obsidian は Markdown ベースのナレッジベースツールとして、個人のメモから技術ドキュメント、ブログ記事の下書きまで幅広く活用されています。ローカルファイルで管理できる安心感と、リンク・タグによる柔軟な情報整理が人気の理由です。

しかし、Obsidian 単体では「書いた内容を Web で公開する」機能は備わっていません。社内ドキュメントを共有したい、技術ブログを運営したい、ポートフォリオサイトを作りたいといったニーズに応えるには、何らかの公開手段が必要になります。

主な公開手段の選択肢

Obsidian のコンテンツを Web 公開する方法は大きく分けて以下の 3 つです。

#	公開方法	概要
1	Obsidian Publish	公式の有料サービス。ボタン一つで公開可能
2	静的サイトジェネレーター	Hugo、Jekyll、Gatsby などでビルドし、GitHub Pages などにホスティング
3	カスタムソリューション	Next.js、Astro など自由度の高いフレームワークで独自構築

本記事では、最も人気の高い「Obsidian Publish」と「GitHub Pages／Hugo」の 2 つに焦点を当てて比較していきます。

公開ワークフローの全体像

以下の図は、Obsidian からコンテンツを公開するまでの基本的なフローを示しています。

mermaidflowchart TD
  writer["執筆者"] -->|Markdown 作成| obsidian["Obsidian<br/>ローカルファイル"]
  obsidian -->|公開方法の選択| choice{公開手段}
  choice -->|有料・簡単| publish["Obsidian Publish"]
  choice -->|無料・要設定| static["静的サイト<br/>ジェネレーター"]
  publish --> cloud["Obsidian Cloud"]
  cloud --> web1["公開サイト"]
  static --> build["ビルド処理<br/>Hugo/Jekyll 等"]
  build --> hosting["GitHub Pages<br/>Netlify 等"]
  hosting --> web2["公開サイト"]

この図からわかるように、Obsidian Publish は「執筆 → 公開」のステップが少なく、静的サイトジェネレーターは「ビルド → ホスティング」の工程が追加される点が大きな違いです。

課題

Obsidian Publish の課題

コスト面での負担

Obsidian Publish は 月額 $8（年払いで約 $96） の利用料が発生します。個人のブログ運営や趣味のドキュメント公開にとっては、継続的なコストが負担になることがあります。

特に以下のような場合は、コストが課題となるでしょう。

複数のサイトを運営したい（サイトごとに課金）
学生や趣味で始めたい（予算が限られる）
試験的に使ってみたい（短期間の利用）

カスタマイズの制約

Obsidian Publish はシンプルさを重視した設計のため、デザインやレイアウトのカスタマイズには限界があります。CSS のカスタマイズは可能ですが、テンプレート構造そのものを変更することはできません。

以下のような要望には対応しきれない場合があります。

独自のナビゲーション構造を実装したい
コメント機能や検索機能を拡張したい
Google Analytics 以外の分析ツールを組み込みたい
SEO 最適化を細かくコントロールしたい

データの所在とポータビリティ

Obsidian Publish では、公開データは Obsidian のクラウドサーバーに保存されます。ローカルファイルは手元に残りますが、公開サイトそのもののバックアップや移行は、Obsidian のサービスに依存する形になります。

GitHub Pages／Hugo の課題

セットアップの複雑さ

GitHub Pages と Hugo を組み合わせる場合、以下のような初期セットアップが必要です。

#	セットアップ項目	内容
1	Hugo のインストール	ローカル環境への Hugo CLI のセットアップ
2	テーマの選定と設定	数百種類のテーマから選択、設定ファイルの編集
3	GitHub リポジトリ作成	ソースコード管理用のリポジトリ準備
4	GitHub Actions 設定	自動ビルド・デプロイのワークフロー構築
5	カスタムドメイン設定	DNS 設定、HTTPS 証明書の設定（オプション）

初めての方には、これらの工程が高いハードルに感じられることがあります。特に Git や CLI ツールに不慣れな場合、つまづきやすいポイントが多くなります。

運用・保守の負担

Hugo + GitHub Pages の構成では、以下のような継続的な運用作業が発生します。

Hugo のバージョン管理: 新バージョンへのアップデート、互換性の確認
テーマの更新: テーマの更新に伴う設定変更、カスタマイズの調整
GitHub Actions のメンテナンス: ワークフローのエラー対応、依存パッケージの更新
ビルドエラーの対処: Markdown の記法ミス、設定ファイルの不整合など

Obsidian Publish では自動的に処理される部分を、自分で管理する必要があるため、技術的な知識と時間が求められます。

Obsidian との同期作業

Obsidian の Vault（ノート保管庫）と Hugo のコンテンツディレクトリは、別々の場所に存在します。そのため、以下のような作業が必要になります。

mermaidflowchart LR
  vault["Obsidian Vault<br/>ローカルフォルダ"] -->|手動コピー| content["Hugo content/<br/>ディレクトリ"]
  content -->|git add/commit| repo["GitHub<br/>リポジトリ"]
  repo -->|GitHub Actions| build["Hugo ビルド"]
  build --> pages["GitHub Pages<br/>公開サイト"]

この図が示すように、Obsidian で執筆した内容を Hugo のディレクトリにコピーし、Git でコミット・プッシュするという複数のステップが発生します。プラグインやスクリプトで自動化することも可能ですが、初期設定には追加の手間がかかります。

解決策

Obsidian Publish の強み

ワンクリック公開の簡便さ

Obsidian Publish の最大の魅力は、技術的な知識がなくても簡単に公開できる点です。以下のステップだけで、あなたのノートが Web サイトとして公開されます。

Obsidian アプリで「Publish」タブを開く
公開したいノートを選択
「Publish」ボタンをクリック

これだけで、数秒後には専用 URL でアクセスできる公開サイトが完成します。Git コマンドもビルドツールも必要ありません。

公式サポートの安心感

Obsidian 公式が提供するサービスなので、以下のような安心感があります。

アップデートへの自動対応: Obsidian 本体の新機能が Publish にも反映される
セキュリティ管理: HTTPS 対応、プライベートページの認証機能
パフォーマンス最適化: CDN による高速配信、レスポンスタイムの改善
サポート体制: 公式フォーラムやドキュメントが充実

適したユースケース

以下のような方には、Obsidian Publish が最適な選択肢となるでしょう。

#	ユースケース	理由
1	技術的な知識が少ない方	セットアップ不要で始められる
2	時間を節約したい方	執筆に集中でき、公開作業は最小限
3	セキュアな社内ドキュメント共有	パスワード保護、メンバー限定公開が可能
4	頻繁に更新するコンテンツ	リアルタイムで反映、即座に修正可能

GitHub Pages／Hugo の強み

完全無料での運用

GitHub Pages は 無料プランでも静的サイトのホスティングが可能です。Hugo も オープンソースのツールなので、ライセンス費用は一切かかりません。

コストの比較表を見てみましょう。

#	項目	Obsidian Publish	GitHub Pages + Hugo
1	初期費用	$0	$0
2	月額費用	$8	$0
3	年間費用	$96	$0
4	カスタムドメイン	追加費用なし	ドメイン代のみ（年 $10〜）

長期的に運用する場合、GitHub Pages + Hugo は大幅なコスト削減につながります。

高いカスタマイズ性

Hugo は静的サイトジェネレーターの中でも特に柔軟性が高く、以下のようなカスタマイズが可能です。

mermaidflowchart TD
  hugo["Hugo プロジェクト"] --> theme["テーマ選択<br/>300+ 種類"]
  hugo --> layout["レイアウト<br/>カスタマイズ"]
  hugo --> shortcode["ショートコード<br/>独自機能追加"]
  hugo --> config["設定ファイル<br/>TOML/YAML"]

  theme --> design["デザイン<br/>完全制御"]
  layout --> design
  shortcode --> feature["機能拡張"]
  config --> seo["SEO 最適化"]

この図が示すように、Hugo ではテーマ、レイアウト、機能、SEO まで、あらゆる要素を自分好みに調整できます。

Git ベースのバージョン管理

GitHub でコンテンツを管理することで、以下のようなメリットが得られます。

変更履歴の完全な追跡: いつ、誰が、何を変更したかが明確
ブランチ戦略: 下書き、レビュー、公開といったワークフローを Git ブランチで実現
コラボレーション: プルリクエストでレビュー、複数人での執筆管理
バックアップ: リポジトリをクローンすれば、いつでもどこでも復元可能

適したユースケース

以下のような方には、GitHub Pages + Hugo が最適な選択肢となります。

#	ユースケース	理由
1	コストを抑えたい方	完全無料で運用可能
2	デザインにこだわりたい方	テーマやレイアウトを自由にカスタマイズ
3	複数人で執筆・管理する方	Git の強力なバージョン管理とコラボレーション機能
4	技術的な学習を楽しみたい方	Hugo、Git、CI/CD の実践的なスキルが身につく

具体例

Obsidian Publish のセットアップ手順

ステップ 1: Obsidian Publish の有効化

まず、Obsidian の設定から Publish 機能を有効化します。

Obsidian アプリを開いて、左下の歯車アイコン（設定）をクリックします。サイドバーから「Core plugins」を選択し、「Publish」をオンにしてください。

ステップ 2: サイトの作成

「Publish」タブが左サイドバーに表示されるので、クリックします。

初回は「Create site」ボタンが表示されるので、クリックして新しいサイトを作成します。サイト ID（URL の一部になります）を入力し、「Create」をクリックしてください。

typescript// サイト ID の例
// 入力: my-tech-blog
// 生成される URL: https://publish.obsidian.md/my-tech-blog

ステップ 3: 公開するノートの選択

作成したサイトが表示されたら、「New changes」タブで公開したいノートにチェックを入れます。

フォルダ全体を選択することもできますし、個別のノートだけを選ぶことも可能です。選択が完了したら、「Publish」ボタンをクリックします。

ステップ 4: サイトのカスタマイズ

「Site options」タブでは、以下のようなカスタマイズが可能です。

#	設定項目	内容
1	Site name	サイトのタイトル
2	Home page	トップページとして表示するノート
3	Theme	ライトモード、ダークモード、または自動切替
4	Custom CSS	独自のスタイルシート適用
5	Reading experience	フォントサイズ、行間などの調整

これだけで、プロフェッショナルな見た目の公開サイトが完成します。

ステップ 5: カスタムドメインの設定（オプション）

独自ドメインを使いたい場合は、「Site options」の「Custom domain」セクションで設定できます。

bash# DNS レコードの設定例（お使いのドメインレジストラで設定）
# CNAME レコード
# Name: blog (または @)
# Value: publish-main.obsidian.md

DNS 設定が反映されるまで、数時間から 24 時間程度かかる場合があります。

GitHub Pages／Hugo のセットアップ手順

ステップ 1: Hugo のインストール

まず、ローカル環境に Hugo をインストールします。macOS の場合は Homebrew、Windows の場合は Chocolatey が便利です。

bash# macOS の場合
brew install hugo

# Windows の場合
choco install hugo-extended -y

インストールが完了したら、バージョンを確認してみましょう。

bash# Hugo のバージョン確認
hugo version
# 出力例: hugo v0.120.4+extended darwin/arm64

ステップ 2: Hugo サイトの作成

次に、Hugo の新しいサイトプロジェクトを作成します。

bash# 新しいサイトを作成
hugo new site my-obsidian-blog
# 作成されたディレクトリに移動
cd my-obsidian-blog

このコマンドで、以下のようなディレクトリ構造が生成されます。

typescript// 生成されるディレクトリ構造
my-obsidian-blog/
├── archetypes/      // 新規ページのテンプレート
├── content/         // Markdown コンテンツを配置
├── data/            // データファイル（JSON、YAML など）
├── layouts/         // カスタムレイアウト
├── static/          // 画像、CSS、JS などの静的ファイル
├── themes/          // テーマを配置
└── hugo.toml        // サイト設定ファイル

ステップ 3: テーマのインストール

Hugo には豊富なテーマが用意されています。ここでは人気のある「PaperMod」テーマを例に説明します。

bash# Git サブモジュールとしてテーマを追加
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

次に、設定ファイルでテーマを指定します。

toml# hugo.toml の編集
baseURL = "https://yourusername.github.io/"
languageCode = "ja"
title = "My Obsidian Blog"
theme = "PaperMod"

[params]
  description = "Obsidian から Hugo で公開する技術ブログ"
  author = "Your Name"

ステップ 4: コンテンツの作成

Obsidian で執筆した Markdown ファイルを Hugo の content ディレクトリにコピーします。

bash# 新しい記事を作成
hugo new posts/my-first-post.md

作成されたファイルを編集して、Front Matter とコンテンツを追加します。

markdown---
title: 'Obsidian と Hugo で始める技術ブログ'
date: 2025-01-15T10:00:00+09:00
draft: false
tags: ['Obsidian', 'Hugo', 'ブログ']
---

ここに記事の本文を書きます。Obsidian で書いた Markdown をそのまま使えます。

ステップ 5: ローカルでプレビュー

Hugo にはビルトインの開発サーバーがあるので、ローカルで確認できます。

bash# 開発サーバーを起動
hugo server -D
# -D オプションは draft: true の記事も表示する

ブラウザで http://localhost:1313 にアクセスすると、サイトのプレビューが表示されます。ファイルを編集すると、自動的にブラウザがリロードされるので、リアルタイムで変更を確認できます。

ステップ 6: GitHub リポジトリの作成

GitHub で新しいリポジトリを作成します。リポジトリ名は yourusername.github.io にすると、自動的にルートドメインで公開されます。

bash# Git の初期設定（まだの場合）
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# リモートリポジトリを追加
git remote add origin https://github.com/yourusername/yourusername.github.io.git

# 初回コミットとプッシュ
git add .
git commit -m "Initial commit: Hugo site setup"
git push -u origin main

ステップ 7: GitHub Actions の設定

自動ビルド・デプロイのために、GitHub Actions のワークフローを設定します。

プロジェクトのルートに .github/workflows ディレクトリを作成し、hugo.yml ファイルを配置します。

yaml# .github/workflows/hugo.yml
name: Deploy Hugo site to Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

次に、ビルドステップを追加します。

yaml- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: 'latest'
    extended: true

- name: Build
  run: hugo --minify

最後に、デプロイステップを追加します。

yaml      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v3

ステップ 8: GitHub Pages の有効化

GitHub リポジトリの「Settings」→「Pages」で、以下のように設定します。

#	設定項目	値
1	Source	GitHub Actions
2	Branch	（自動設定）
3	Custom domain	（必要に応じて設定）

設定が完了したら、main ブランチに変更をプッシュするたびに、自動的にビルド・デプロイが実行されます。

bash# 変更をプッシュ
git add .
git commit -m "Add GitHub Actions workflow"
git push

数分後、https://yourusername.github.io でサイトが公開されます。

Obsidian から Hugo への同期を自動化

Obsidian で執筆した内容を Hugo に自動的に同期するには、以下のような方法があります。

方法 1: シンボリックリンクの活用

Obsidian の Vault と Hugo の content ディレクトリをシンボリックリンクで接続します。

bash# Hugo の content ディレクトリを削除
rm -rf content/posts

# Obsidian の特定フォルダをシンボリックリンク
ln -s /path/to/obsidian/vault/blog-posts content/posts

これにより、Obsidian で書いた内容が即座に Hugo に反映されます。

方法 2: Obsidian プラグインの利用

「Obsidian Git」プラグインを使えば、Obsidian 内から直接 Git 操作ができます。

プラグインをインストールして、以下のように設定します。

#	設定項目	推奨値
1	Auto backup interval	10 minutes
2	Commit message	"vault backup: {{date}}"
3	Auto pull interval	5 minutes
4	Auto push	Enabled

これにより、Obsidian での編集が自動的に GitHub にプッシュされ、GitHub Actions が起動してサイトが更新されます。

方法 3: カスタムスクリプトの作成

シェルスクリプトで同期処理を自動化することもできます。

bash#!/bin/bash
# sync-to-hugo.sh

# Obsidian Vault のパス
VAULT_PATH="/path/to/obsidian/vault/blog-posts"
# Hugo の content パス
HUGO_CONTENT="/path/to/hugo-site/content/posts"

# rsync で同期（画像も含む）
rsync -av --delete "$VAULT_PATH/" "$HUGO_CONTENT/"

# Git にコミット・プッシュ
cd /path/to/hugo-site
git add .
git commit -m "Sync from Obsidian: $(date +%Y-%m-%d)"
git push

このスクリプトを cron や launchd で定期実行すれば、完全自動化が実現できます。

実際の運用フロー比較

以下の図は、両方の方法での実際の運用フローを比較したものです。

mermaidsequenceDiagram
  participant Writer as 執筆者
  participant Obsidian as Obsidian
  participant Publish as Obsidian Publish
  participant Git as Git/GitHub
  participant Actions as GitHub Actions
  participant Pages as GitHub Pages

  Note over Writer,Publish: Obsidian Publish のフロー
  Writer->>Obsidian: 記事執筆
  Writer->>Publish: 公開ボタンクリック
  Publish-->>Writer: 即座に公開完了

  Note over Writer,Pages: GitHub Pages + Hugo のフロー
  Writer->>Obsidian: 記事執筆
  Writer->>Git: git add/commit/push
  Git->>Actions: ワークフロー起動
  Actions->>Actions: Hugo ビルド
  Actions->>Pages: デプロイ
  Pages-->>Writer: 公開完了（数分後）

この図からわかるように、Obsidian Publish は即座に公開されますが、Hugo の場合はビルド・デプロイのプロセスがあるため、数分程度の遅延が発生します。

まとめ

Obsidian のコンテンツを Web 公開する方法として、「Obsidian Publish」と「GitHub Pages／Hugo」を比較してきました。どちらにも明確な長所と短所があり、ユースケースによって最適な選択肢は異なります。

Obsidian Publish は、技術的な知識が少ない方や、時間をかけずにすぐ公開したい方に最適です。月額 $8 のコストはかかりますが、セットアップや運用の手間を考えれば、十分に価値のある投資といえるでしょう。公式サポートの安心感、リアルタイムでの更新反映、パスワード保護などのセキュリティ機能も魅力です。

一方、GitHub Pages／Hugo は、コストを抑えたい方、デザインや機能を細かくカスタマイズしたい方、Git によるバージョン管理を活用したい方に向いています。初期セットアップには時間がかかりますが、一度構築すれば長期的にコストゼロで運用でき、完全にコントロールできる自分だけのサイトが手に入ります。

最終的には、以下の観点で選択するとよいでしょう。