目前、私のウェブサイトの公開プロセスは、この記事の技術を使用しています。Notion を使用して記事を書いている場合は、この記事「Vercel + Notion で個人ブログを作成する」を参照してください。
手順の概要:
- 自分の静的ウェブサイトジェネレータを選択します。私は Hugo を選びました。
- Hugo を使用して構造を初期化し、GitHub リポジトリにアップロードします。
- Obsidian で記事を書き、プラグインを使用して指定された記事(md 形式)を 2 番目のステップのリポジトリにアップロードします。このプラグインの役割は、Obsidian のマークダウンコンテンツを Hugo で必要な形式に適合させることです。
- リポジトリをデプロイし、ドメインを設定します。
関連ツール#
- Obsidian + Github Publisher プラグイン(必須)
- Hugo + Paper Mod テーマ(他のものを選択できます)
- GitHub(必須)
- Vercel(他のものを選択できます)
具体的な手順は以下を参照してください。
Hugo + PaperMod#
Hugo を使用してウェブサイトを初期化し、お好みのテーマを設定し、GitHub に公開します。具体的な手順については、以下を参照してください。
- 公式テーマドキュメント:PaperMod
- 私のリポジトリ:miaogaolin/workspace-obsidian-publisher(公式テーマを少し変更しました)
Github Publisher#
Obsidian に Github Publisher プラグインをインストールし、このプラグインの役割は、Obsidian の記事とローカルの添付ファイルを GitHub リポジトリにアップロードすることです。アップロード前に、ファイルディレクトリの指定やカスタムコンテンツの置換などを行うことができます。
Github の設定#
注意:
- 生成されたトークンは GitHub のパブリックリポジトリに保存しないでください。トークンが検出されると無効になります。
- トークンを生成する際のリンクには自動的に権限が付与されます。名前と有効期限を設定するだけで大丈夫です。
デフォルトの設定#
私の使用状況に基づいて、設定を保存しました。直接使用することができます。詳細については、Github Publisher プラグインを Hugo に適合させる設定を参照してください。
miaogaolin/obsidian-github-publisher-hugoに移動して、settings.json 設定をコピーしてプラグインに貼り付けてインポートします。
Obsidian の記事テンプレート#
Obsidian のテンプレートに設定した内容を詳しく説明します。これは、記事を統一的に設定するためのものです。私の設定は Hugo と強く関連していますが、他のツールを使用している場合は、状況に応じて調整してください。
---
date: "{{date}}" # 作成日時、私の場合はYYYY-MM-DDTHH:mm:ssZの形式で生成されます
tags:
- タグ1
- タグ2
title: "{{title}}"
slug: "{{time}}" # URLのアクセス名をカスタマイズします。デフォルトではタイムスタンプを使用します
share: false # Github Publisherプラグインと連携するために使用します。trueはObsidianの記事を公開できることを意味します
canonicalURL: "" # 以前に他の場所で公開された記事のアドレス。重複を避けるために、このプロパティが設定されている場合はcanonicalURLの記事が優先的に表示されます
keywords: # SEO最適化に使用されます。設定しない場合はデフォルトでタグの内容が使用されます
- キーワード1
- キーワード2
description: "" # 記事の説明。SEO最適化のため、空の場合は記事の先頭部分がデフォルトで使用されます
series: "シリーズ" # シリーズ記事
lastmod: # 記事の最終更新日時
lang: "cn" # デフォルトでは書かなくても大丈夫です。設定ファイルでデフォルトの言語が設定されます(cnは中国語、enは英語など)
cover.image: "" # 記事のカバー画像のアドレス
author: # 作者の名前
dir: # Github Publisherプラグインと連携して記事をアップロードするディレクトリを設定します
---
- dir 属性:この設定を行わない場合、デフォルトで content/posts ディレクトリにアップロードされます。設定した場合は、content をルートディレクトリとして使用します。例:About Me、Sponsorの 2 つの記事では、
dir: ./
と設定しています。 cover.image
:カバー画像を設定します。Github Publisher を使用すると、二次キーに変換されます。
公開#
Obsidian コマンド#
もちろん、プラグインの設定はメニューモードもサポートしています。設定は、Plugin settings -> Menu に移動します。
まず、コマンドラインで公開します。active を入力し、次に Github Publisher を選択します。記事の share 属性を true にすることを忘れないでください。
右下隅にアップロードの進捗状況が表示されます。完了すると、右上隅に通知が表示されます。
share 属性が true の複数の記事をアップロードする場合、次のコマンドを使用します。
- Refresh published and upload new notes:share 属性が true で新しく更新された記事を公開します。
- Refresh all published notes:share 属性が true のすべての記事を公開します。
Vercel のデプロイ#
次に、Vercelの公式ウェブサイトにアクセスし、上記のリポジトリをデプロイします。
Github Pages や Netlify を選択することもできますし、独自のサーバーを使用することもできます。
1. Github#
Github でログインします。
2. プロジェクトの作成#
3. インポートとデプロイ#
フォークしたプロジェクトを Github からインポートし、「import」をクリックしてから「deploy」をクリックします。しばらくお待ちください。
4. ドメイン#
次に、自分のドメインを入力し、「ADD」をクリックします。推奨されるリダイレクトルールを選択し、指示に従って自分のドメインを解析します。
コンテンツの最適化に関連するプラグイン#
これらの Obsidian プラグインは、ウェブサイトの公開には必須ではありませんが、コンテンツのフォーマットを最適化するために役立ちます。
- Obsidian Linter プラグイン:英語の両側にスペースを追加する設定のみ使用しています。
- Image Converter:画像の形式を統一し、WebP 形式に変換し、画像の解像度を設定しています。
- Unique attachments:添付ファイルのファイル名を「文字 + 数字」の形式に統一します。設定に WebP 画像形式を追加することを忘れないでください。
- Image Inserter:画像を検索するために使用し、記事のカバー画像を設定します(
cover.image
プロパティを設定します)。
まとめ#
Obsidian の記事を最終的に望む形式に適合させるために、Github Publisher プラグインの使用方法を重点的に学びました。
Hugo 静的ウェブサイトジェネレータを選択するか、Hexo を選択するかは、どちらでも構いません。