🪴 Quartz 4.0

Obsidianってどうなの？導入手順も記載【Obsidian⇄S3⇄Quartz(Githubリポジトリー)→Amplify(デプロイ先)】

9 min read

本記事は、メモ系ツールの話

雑にまとめました、自分用メモよりですが、導入したい人にとっては、ノーヒントよりは本気になっているはずです。導入難度が高めなので、真似する人はよっほどの物好きかなと思います。

どんなの？

Obsidianとは、Markdown用のエディタ

そんで、プラグインが豊富なので自分に合ったMarkdownエディタとして使える

参考: https://aki-m.hatenadiary.com/entry/2022/06/02/230757

公開は、QuartzというマークダウンをHTMLに変換してくれるもの

→Reactベースのアプリっぽい、React使いだと抵抗少ないかも

参考: https://quartz.jzhao.xyz/(記事少ないので公式で)

参考: https://note.com/devlive/n/n3250edc2ee8f

雨後くあ個人として使えるの？

NotionAPIと連携している雨後くあの情報発信局サイトがあるし、必要に感じてないです。(ごめんなさい)

佐藤かえでさん触り始めてて、エンジニアたるもの勉強しないのも違うかなと思い、試しに導入した

また、ここ最近思っている複数サービスの同時投稿の研究としてもよさそうかもなという気持ちである(今年のどこかでやりたい話)

って記事書き終えて自分のサイト見たらアクセスできなかったところで思い出しました。こやつ、非対応ブロックがあったり、NotionAPIの文字数制限あったりするとページ自体開いてくれないと不便な点があった。

NotionAPI使ったWebページはスマホからNotionAI生成で必要なので、小分類メモに使うことにする。

問題点

https://x.com/Kuarisu/status/1875438860995588104 https://x.com/Kuarisu/status/1875444656018018632

準備

構成図

  1. ローカル（Obsidian）のプラグイン「Remotely Save」でS3にアップさせる
  2. 最新のS3上の資材(マークダウンファイルなど)を毎日0時に取得してGitHubの自分のリポジトリーにコミットする
    1. S3とGitHubリポジトリーの同期課題
  3. コミットされたらAWS Amplify上でデプロイが走る
    1. buildコマンド後に静的サイト生成されるpublicが無事デプロイできるかの課題

1.ObsidianとS3同期

ローカル（Obsidian）のプラグイン「Remotely Save」でS3にアップさせる

まずObsidianインストールしておく

以下、アクセスし、手順を確認する(リンクからいい感じにインストールできた記憶)

https://github.com/remotely-save/remotely-save

導入できたか確認する

S3アクセス可能なIAM情報を入力しておく 設定後、S3バケット「obsidian-quartz-kua」覗くと反映されている

2.S3からGithub同期

Quartz をコードスペースで作業する

https://github.com/jackyzha0/quartz.git にアクセスする

右上の「Use this template」から「Create a new repository」を選択し、自身で作業するリポジトリーをクローンする Code＞Create codespace on v4実行

事前知識

S3同期のトラブルシューティング

S3との同期が失敗する一般的な原因として、以下が考えられます：

  • AWS認証情報の問題： AWSのアクセスキーとシークレットキーが正しく設定されているか確認
  • 権限の不足： IAMユーザーがS3バケットに対して適切な権限（読み取り/書き込み）を持っているか確認
  • バケット名の誤り： S3バケット名が正確に指定されているか確認
  • リージョンの設定： AWS CLIの設定でリージョンが正しく指定されているか確認

確認方法：

# AWS認証情報の確認
aws configure list
 
# 同期確認
aws s3 sync s3://obsidian-quartz-kua/

これらのコマンドを実行して、エラーメッセージを確認することで具体的な問題を特定できます。

「aws s3 sync」コマンドについて説明します

  • S3バケット「obsidian-quartz-kua」から、ローカルの「./content」ディレクトリに同期を行います
  • 「—delete」オプションは、S3に存在しないファイルをローカルから削除することを意味します

つまり、このコマンドは：

  • ObsidianのノートをS3に保存しておき
  • Quartzでビルドする際にS3から最新のコンテンツを取得し
  • ローカルの古いファイルを自動的に削除する

という一連の同期処理を実現しています。これにより、Obsidianで作成したノートを自動的にQuartzの静的サイトに反映できます。

AWS認証情報の設定方法

AWS CLIで認証情報を設定するには、以下のコマンドを使用します：

aws configure
 
AWS Access Key ID [None]: YOUR_ACCESS_KEY
AWS Secret Access Key [None]: YOUR_SECRET_KEY
Default region name [None]: ap-northeast-1
Default output format [None]: json

または、環境変数として設定することもできます：

export AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY
export AWS_SECRET_ACCESS_KEY=YOUR_SECRET_KEY
export AWS_DEFAULT_REGION=ap-northeast-1

認証情報が正しく設定されているか確認するには：あ

aws configure list
aws sts get-caller-identity

Github Actions設定

github actions の設定また、settings/Actions/General のWorkflow permissions が Read and write permissionsになっていることを確認してください。(github actionがリポジトリのcommit&pushを行うのに必要です)

ホスティングした際のgithubリポジトリに、環境変数AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEYをセットします。settings/Secrets and variables/Actions から設定可能です。

https://storage.googleapis.com/zenn-user-upload/c7a7b0424a28-20240730.png

Actions>Generalから読み取りと書き込みの設定をしておく

Workflow pemissionsのラジオボタンをRead and Write…にする

https://storage.googleapis.com/zenn-user-upload/f0220636f5bd-20240730.png

.github/workflows/sync_s3.yamlファイルを新たに作成し、以下のyamlを記載します。

name: Sync and Commit S3 Data

on:
  # github actionsをトリガーするスケジュール。 ... (1)
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch: # 手動トリガー

jobs:
  fetch_and_commit:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v4
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ap-northeast-1

    # AWS S3 との同期 ... (2)
    - name: Fetch data from S3
      run: aws s3 sync s3://xxx-your-own-s3-bucket-name-xxx ./content --delete

    # gitの差分がないときにコミットしないようにチェック ... (3)
    - name: check for changes
      run: |
        git add -A
        git diff --staged --quiet || echo "git_changed=true" >> $GITHUB_ENV

    - name: Commit changes
      if: env.git_changed == 'true'
      run: |
        git config --global user.name 'github-actions'
        git config --global user.email 'github-actions@github.com'
        git add -A
        git commit -m 'Sync data with S3'
        git push origin v4

(1)cronはUTCで設定されているので、同期したいお好みの時刻を個人で適宜設定するようにしてください。

(2)上記に run: aws s3 sync s3://xxx-your-own-s3-bucket-name-xxx ./content --delete

というコマンドがあると思いますが、ここには自分で設定したs3バケットの名前を入れるようにしてください。

試す際は、適当にファイル変えてコミットするとGitHubAction動くのでおためしください

成功有無はGitHubのActions参照

S3構成参考: https://zenn.dev/miroscular/articles/3799028b4487c7

3.Quartzのデプロイ方法（Amplify）

コミットされたらAWS Amplify上でデプロイが走る

※amplifyのデプロイ手順は割愛

設定注意箇所

Nodeのバージョンを設定しておくこと

Quartzをビルドすると、静的サイトのファイルが「public」ディレクトリに生成されます。Amplifyでデプロイする際の主なステップは：

  • ビルドコマンドの設定： 「npm run build」を指定して、Quartzのビルドを実
  • 出力ディレクトリ： 「public」を指定（ここに静的サイトのファイルが生成される）
  • ベースディレクトリ： プロジェクトのルートディレクトリを指定

Amplifyの設定例（amplify.yml）：

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - 'npm install'
                - 'npm run quartz build'
    artifacts:
        baseDirectory: public
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'

設定できたら、失敗していると思うので再デプロイ

Graph View

Backlinks