Featured image of post 【無料】GitLab+Hugo+Obsidianでぼくのかんがえたさいきょうの記事書き→公開環境を作る

【無料】GitLab+Hugo+Obsidianでぼくのかんがえたさいきょうの記事書き→公開環境を作る

ぼくのかんがえたさいきょうのHugo×Obsidian連携

注意

この記事はまだ執筆中です。draft: trueにしろ

結果

このサイトです。 パソコン(あるいはAndroid)上のObsidianから編集することが可能です。 iOSにかんしては未検証ですがおそらく可能かと思われます。

成功した点

  • GitLabのプライベートレポジトリ×2でHugoのサイトとコンテンツを分けて管理
  • デスクトップ（モバイル）で.mdを更新すると自動的にGitLab Pagesも更新

未解決な点

  • Android上でテンプレートから新規記事を作成できない（既存の記事をコピーして上書きすることで対処可能）
  • 記事の更新時にページの更新ジョブが二回走る
  • Obsidianのテンプレートが発展途上

動機

  1. 自分のサイトほちぃ！！！
  2. でもhtmlとかcssとかJavaScriptとか難しそう…
  3. マークダウンならメモ書きでも使ってるし書ける！！使ってるObsidianから記事にする機能もあるらしいぞ！！
  4. Obsidian Publish :　月　額　1　0　ド　ル　（　執　筆　時　レ　ー　ト　で　約　1　6　0　0　円　）
  5. 書くかどうかわからないものに月額10ドルかぁ…
  6. 静的サイトジェネレーターを使えばタダでできるかもだって！？

当初の目標

  • 完全無料にしたい
  • 記事のマークダウンはあまりオープンにしたくない
  • Androidでターミナルエミュレータを使いたくない、Obsidian Gitプラグインだけで済ませたい
  • いい感じの見た目にしたい
  • Obsidian単体で記事を更新したい

偉大なる先駆者様方

かなり参考にしました。ありがとうございます。

非エンジニアの初心者がHugo(テーマStack)+GitHub Pagesでブログを開設するまで
icon
miiitomi.github.io
Gitlab Pagesを有効化してHugoでMarkdownをWebページ化する(Windows) | SyachikuLOG
icon
syachiku.net
GitLab Pagesことはじめ #個人開発 - Qiita
icon
qiita.com
Pelican から Hugo への移行検討
hugo.ainoniwa.net
git - How can I clone a private submodule in GitLab CI? - Stack Overflow
icon
stackoverflow.com
gitlab - Is there any automatic way to update the parent git repo to point to the latest commit of …
icon
stackoverflow.com
Hugoでシンプルなリンクカード（ブログカード）を作った
icon
rkd3.dev

やったこと

注意

著者しばかぶはド素人です。 間違った手順やおかしい手順が含まれているかもしれません。許してください。 また、情報は記事執筆時の情報であることに留意してください。

Hugoに必要なプログラムの用意

  1. Git for Windowsのインストール 
    1

    winget install --id Git.Git -e --source winget
    公式サイトから導入してもokです。
  2. Goを公式サイトから導入、必要があればパスを通す1
  3. Hugo公式サイトからDart Sassを導入

Hugoを導入、プロジェクトを作成

  1. Hugoを導入 
    1

    winget install Hugo.Hugo.Extended
    例によって公式サイトからでもインストールできます
  2. Hugoのプロジェクトを作成2 
    1
2

    cd /your/project/folder
hugo new site <プロジェクト名>
  1. Gitと連携する 
    1
2

    cd <プロジェクト名>
git init --initial-branch=master
  2. テーマを追加する このページではStackを使用しています。 
    1

    git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
  3. テスト用にサンプルサイトをコピーする themes/hugo-theme-stack内の.gitignore、config.yaml、themes/hugo-theme-stack/examplesite内のcontentフォルダー、hugo.yamlをプロジェクトのルートフォルダにコピーあるいは上書きしてください。
  4. Hugoが正常に動作するかテストする 
    1

    hugo server -D
    ブラウザでlocalhost:1313にアクセスするとサンプルのサイトが表示されるはずです。
  5. contentフォルダをhugoのフォルダの外側へ移動させておく

GitLabと連携、コンテンツ管理環境の整備

  1. GitLabで同じグループ内にhugo用のプロジェクトとcontentフォルダ用のプロジェクトを作る このときREADMEを作るとブランチがmainになります。
  2. 空のレポジトリに出る説明に従ってhugo用のプロジェクトに先ほどのフォルダをアップロードする
  3. 同様にしてcontentフォルダ用のレポジトリにもアップロードする

2つのレポジトリの連携

  1. お互いのレポジトリのCI/CD設定でレポジトリ、親となるプロジェクトからのアクセスを許可
  2. hugoのレポジトリからcontentのレポジトリをサブモジュールとして追加 
    1

    git submodule add ../<contentフォルダのレポジトリ名>.git
  3. hugoのレポジトリに以下のジョブを追加 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

    image: registry.gitlab.com/pages/hugo/hugo_extended:latest
variables:
GIT_SUBMODULE_STRATEGY: recursive
pages:
  stage: deploy
  environment: production
  script:
  - git submodule update --init --recursive
  - git submodule update --remote
  - git config user.name "CI Bot"
  - git config user.email "ci@example.com"
  - git add .
  - git remote set-url origin "https://gitlab-ci-token:${ACCESS_TOKEN}@gitlab.com/path/to/your/repo.git"
  - git checkout master
  - git commit -m "Update Submodule" ||
  - git push origin
  - hugo
  artifacts:
    paths:
  - public
    expire_in: 1 day
  4. contentのレポジトリに以下のジョブを追加 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

       stages:
  - build
build_job_dev:
  stage: build
  variables:
    PLUGIN_NAME: coppercrm  
  trigger:
    project: path/to/your/repo
    branch: master
  only: 
    - master

このあとはhugo.yamlやconfig.yaml、contentの中身をいじっていくといい感じのサイトができます！3

  1. wingetで導入するとパスがおかしくなるらしい？ ↩︎

  2. すでにプロジェクト名と同じ名前のフォルダがある場合失敗します。その場合はhugo new site <プロジェクト名> --forceを試してください。 ↩︎

  3. またこれに関しても書きます ↩︎

© 2024 柴犬被り
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。