ObsidianとHugoでブログサイト作りました

  ·   1 min read

きっかけ

これまでいくつかのサービス上で、ブログをちょっとだけ書いて、放置してしまってを繰り返してきましたが、ただただ気ままにメモをおける自分だけの場を用意してみるのもいいかと思ったのと、せっかく Obsidian でメモを書いているなら、書いたものがそのまま Upload されるような環境が構築できたら「書く」ことがちょっと楽になるんじゃないか、ということで構築してみました。

一度作ってしまえばそれまでではありますが、見直し用にメモしておきます。

記事公開までの流れ

Obsidian + Obsidian Git + Hugo -> GitHub -> Cloudflare Pages

前提

以下がインストールまたはアカウント作成済みであること。

  • Obsidian
  • Obsidian Git: Obsidian のプラグイン
  • GitHub
  • Hugo
  • Cloudflare Pages
  • Go

作業手順

Obsidian と GitHub

1. GitHub に Obsidian 用の Repository を作成する

Repository 名はなんでも OK

2. Obsidian の Valut を 1. で作成した Repository に push

git remote add origin https://github.com/xxx/xxxxx.git
git push -u origin main

3. Obsidian Git の設定を入れる

設定は適当に。定期的に自動で commit & push されるようにするのが楽かと思います。

Hugo

1. Obsidian の中に Hugo 用のディレクトリを作成する

hugo new site [Hugo用のディレクトリ名]

2. .gitignore に、 Hugo が生成するファイル置き場を追記

/public/
/resources/
/.hugo_build.lock

3. Theme 設定を行う

ここでは Stack を、Hugo Modulesから使用する <選定理由>

  1. 検索機能があること(自分の見直しに使いたい)
  2. シンプルであること
  3. ドキュメントが読みやすいこと

初回のみの設定

hugo mod init github.com/ユーザー名/プロジェクト名

hugo.toml

[module]
[module.imports](module.imports)
    path = 'github.com/CaiJimmy/hugo-theme-stack/v3'

hugo server して正しくサービスが立ち上がれば OK

4. サイトを整える

Stack | Card-style Hugo theme designed for bloggersをもとに、頑張って作る。
hugo-theme-stack-starter を参照しながら、どこをどういじると変化するのかを理解できればなんとかなる。

Cloudflare

ある程度のサイトの形と、サンプル記事を上げたところでデプロイを試してみる。 公式の 手順

1. Pages の作成

Workers & Pages > Pages より “Git に接続” を選択

GitHub と連携できるので、選択

セットアップを、以下のように設定する
特に気をつけなければならないのは、ルートディレクトリの設定。必ず Obsidian vault の中で作成した hugo 用のディレクトリを指定すること

ここまでの内容で、デプロイが成功すればあとは Obsidian で記事を書き、それが Obsidian Git 経由で GitHub に上がるたびにサイトが更新される用になります。