ブログの移行と再編成

本文では、以前このブログが Notion で使用していた Nobelium フレームワークについて紹介します。現在、このブログは Astro フレームワークに変更されています。

探索#

今年の 2 月、サーバーの問題でブログを Typecho から Notion に移行し、Super.so を通じて運営しました。正直なところ、全体的にはあまり満足していませんでした。主に以下の 3 点が理由です：

Super.so はブログに RSS サブスクリプションを提供していませんでした。仕方なく最初は rss.com で作成したフィードを使用しましたが、不安定で全文を出力できませんでした。その後 fetchrss.com に切り替えましたが、一部の RSS リーダーでしか全文を表示できませんでした。最後に、DIYgod さんの新プロジェクトであるオープンソースブログ xLog を見つけ、これで RSS の問題が解決しました。
Super.so にはコメント機能も統合されていませんでした。私のブログにはコメントがあまり多くありませんが、全くないわけではありません。Tally を見つけましたが、読者の使用ハードルが高すぎるため批判を受けました。
Super.so はシンプルなウェブサイトの構築には適していますが、ブログには適していません。Notion + Super.so を CMS として使用するのは非常に適していますが、単純にブログを運営する場合、特にコンテンツが増えると、ページ管理が複雑で混乱する問題が露呈しました。

そこで、私は Notion により適したブログ運営サービスを探し始めました。

Notion を利用したウェブサイト構築プロジェクトは多くあり、選別の結果、Feather.so、Notablog、NotionNext、Nobelium の 4 つを選びました。

Feather.so は非常に優れており、Notion をブログとして使用したい場合、最良の運営サービスと言えます。RSS やコメント機能があり、SEO 最適化も非常に良好で、ページ管理のロジックもスムーズです…… ただし、良いサービスは高価格に対応することが多く、Super.so の月額 $12 でも高いと感じていたのに、こちらは月額 $39 です。

Notablog は私が長い間注目していたプロジェクトで、アメリカ国籍の中国人によって GitHub でオープンソース化されています。全体的な印象は非常にシンプルでエレガントで、操作と管理のロジックも明確で、VPS に簡単にデプロイできます。しかし、このプロジェクトはここ 1 年ほど更新がありません。

NotionNext は私が以前デプロイしたプロジェクトで、記事を書いて紹介したこともあり、数人の友人にも推薦しました。現在まで、開発者の更新は頻繁で、熱心にメンテナンスされています。ただし、Notion Block のサポートが完全ではなく、更新が少し面倒で、私のような怠け者にはあまり適していません。

Nobelium は Notablog や NotionNext と同様に GitHub でオープンソースのプロジェクトですが、後者の 2 つとは大きく異なります。Notablog は個人サイトに近いですし、NotionNext は多くのテーマをサポートしているため、派手に見えます。Nobelium は極めてシンプルなスタイルのブログで、華やかなレンダリングも多様なテーマも複雑な機能もありません。普通の Nobelium は私に原点回帰の感覚を与えてくれました。個人ブログはこうあるべきではないでしょうか？

デプロイ#

Nobelium のデプロイは複雑ではなく、開発者が GitHub のプロジェクトページに詳細に記載していますので、私は簡単に説明します。

ステップ 1： Notion template を自分の Notion アカウントにコピーします。

このデータベース内の各属性は非常に理解しやすいです。

Note

データベース属性の説明

title： 記事のタイトル；
date： 記事の公開日時。空白の場合は記事作成日時がデフォルト；
slug： 記事 URL の末尾の文字、すなわち .com/xxx の xxx 部分。英語を使用し、空白は - で代替することをお勧めします。中国語や空白、句読点を使用すると、UrlEncode により長い文字列に変わり、リンクが長くて見栄えが悪くなります；
summary： 記事の概要で、ホームページのタイトルの下に表示されます；
tags： 記事のタグで、記事を分類できます；
status： 記事の状態で、Published 状態のものだけがブログに公開表示されます；Draft は草稿状態、Idea はアイデア状態、Revise は改訂状態で、これらの状態はブログに公開表示されません；
type： Post はホームページに直接表示され、Page は URL に直接アクセスした場合のみ表示され、ホームページの記事リストには表示されません。

ステップ 2：GitHub でプロジェクトをフォークした後、blog.config.js の内容を変更する必要があります。

const BLOG = {
  title: "CRAIGARY", // あなたのブログ名（タイトル）
  author: "Craig Hart", // あなたのニックネーム
  email: "[email protected]", // あなたのメールアドレス
  link: "https://nobelium.vercel.app", // あなたのブログの URL
  description: "This gonna be an awesome website.", // あなたのブログの説明（副タイトル）
  lang: "en-US", // 言語、'en-US'は英語、'zh-CN'は簡体字中国語、'zh-HK'は香港繁体字中国語、'zh-TW'は台湾繁体字中国語、'ja-JP'は日本語、'es-ES'はスペイン語
  timezone: "Asia/Shanghai", // タイムゾーン、詳細は https://en.wikipedia.org/wiki/List_of_tz_database_time_zones を参照
  font: "sans-serif", // フォント、'sans-serif'はサンセリフ体、'serif'はセリフ体
  lightBackground: "#ffffff", // 明るい背景、16進数の色を使用、例：#fffefc、# を忘れないでください
  darkBackground: "#18181B", // 暗い背景、16進数の色を使用、# を忘れないでください
  path: "", // フォルダー内にデプロイする場合を除き、このファイルは空のままにしてください
  since: 2021, // ブログの開始年、空白の場合は現在の年を使用
  sortByDate: false, // 日付でソート、false は否、true は是
  showAbout: true, // 当サイトについて表示
  showArchive: true, // アーカイブを表示
  autoCollapsedNavBar: false, // ナビゲーションバーを自動折りたたみ
  ogImageGenerateURL: "https://og-image-craigary.vercel.app", // OG 画像リンクを生成
  socialLink: "https://twitter.com/craigaryhart", // ソーシャルプラットフォームリンク、記入後、記事ページでニックネームをクリックすると対応するプラットフォームに移動します
  seo: {
    keywords: ["Blog", "Website", "Notion"], // キーワード
    googleSiteVerification: "", // この値を削除するか、自分の Google サイト検証コードに置き換えます
  },
  notionPageId: process.env.NOTION_PAGE_ID, // これを変更しないでください！！！
  notionAccessToken: process.env.NOTION_ACCESS_TOKEN, // データベースを公開したくない場合は使用
  analytics: {
    provider: "", // 現在提供されている訪問者統計は Google Analytics と Ackee の 2 種類です。Google Analytics を使用する場合は 'ga' を記入し、Ackee を使用する場合は 'ackee' を記入し、使用しない場合は空白のままにします
    ackeeConfig: {
      tracker: "", // Ackee を使用する場合は記入、例：'https://ackee.craigary.net/tracker.js'
      dataAckeeServer: "", // Ackee を使用する場合は記入、例：'https://ackee.craigary.net'
      domainId: "", // Ackee を使用する場合は記入、例：'0e2257a8-54d4-4847-91a1-0311ea48cc7b'
    },
    gaConfig: {
      measurementId: "", // Google Analytics を使用する場合は記入、例：'G-XXXXXXXXXX'
    },
  },
  comment: {
    // 現在統合されているコメントプラグインには gitalk、utterances、cusdis が含まれます
    provider: "", // 使用しているコメントプラグインを記入、空白の場合は使用しないことを示します
    gitalkConfig: {
      repo: "", // ここに gitalk から取得した情報を記入
      owner: "", // ここに gitalk から取得した情報を記入
      admin: [], // ここに gitalk から取得した情報を記入
      clientID: "", // ここに gitalk から取得した情報を記入
      clientSecret: "", // ここに gitalk から取得した情報を記入
      distractionFreeMode: false,
    },
    utterancesConfig: {
      repo: "", // ここに utterances から取得した情報を記入
    },
    cusdisConfig: {
      appId: "", // ここに cusdis から取得した情報を記入
      host: "https://cusdis.com", // 自分で cusdis サービスをデプロイした場合は、自分のサービスアドレスに変更
      scriptSrc: "https://cusdis.com/js/cusdis.es.js", // 自分で cusdis サービスをデプロイした場合は、自分のサービスアドレスに変更
    },
  },
  isProd: process.env.VERCEL_ENV === "production", // 開発環境と生成環境を区別、詳細は https://vercel.com/docs/environment-variables#system-environment-variables を参照
};
// export default BLOG
module.exports = BLOG;

ステップ 3：変更が完了したら、Vercel にデプロイすれば完了です。1️⃣ で NOTION_PAGE_ID を記入し、2️⃣ で Page ID を記入してから Add をクリックします。

Notion Page ID とは何か

Notion で Share をクリックし、Share to web を開くと、公開アクセス可能な URL が生成されます。例えば https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4 のように、https://xxx.notion.site/ の後、?v= の前の部分が Page ID で、すなわち 80c301f9f7264a4aa5dfc1f8b9841222 です。

Cusdis#

私は秉儒が《なぜ私は Cusdis をやめたいと思ったが、また後悔したのか？》で述べた理想的なコメントシステムの姿に非常に共感しています：

匿名コメント機能がある；Twitter、Github、Telegram、FB、Google などの異なるログイン方法を使用できる；メールでログインも可能；Markdown をサポート；Tg や Slack などの通信ソフトと接続してリアルタイムで通知できる；メールでコメント者に返信があったことを通知できる（メールを残している場合）；軽量でプライバシーに配慮。

blog.config.js からもわかるように、Nobelium のコメントプラグインは gitalk、utterances、cusdis をサポートしています。

Utterances は使用したことがないので、考慮しません。Gitalk はコメントを書く際に GitHub アカウントでログインする必要があり、匿名ではなく、国内でのアクセスも良くないため考慮しません。Cusdis は Randy さんが開発したコメントプラグインで、非常にコンパクトで便利で、コメント時にログインする必要がなく匿名コメントができるため、唯一の選択肢となりました。また、以前使用したことがあり、理想的なコメントシステムに非常に近い印象があります。

私は自分でデプロイすることを選ばず、直接 cusdis の公式サービスを使用し、Webhook を追加して、新しいコメントがあれば Tg でリアルタイムに通知されるようにしました。以前 MTPROTO を構築したことがあり、Tg からの通知が受け取れない心配もありません。

cusdis はログイン不要のコメントサービスであるため、すべての匿名コメントは管理者の承認が必要です。少し面倒に見えるかもしれませんが、テスト中に Tg でログインなしでコメントを承認できることがわかり、移動も非常に便利でした。

修正#

デプロイが完了した後、私は Notion で元々 Super.so データベースにあった記事を Nobelium のデータベースに移動しました。そしてブログページをリフレッシュすると、デフォルトのナビゲーションバー、フッター、コードブロック、フォントにあまり満足していないことに気付きました。そこで、コードがわからない私は ChatGPT の助けを借りてカスタマイズを始めました。

ナビゲーションバー#

最初に変更したのはナビゲーションバーです。components/Header.js に以下のようなコードがあります：

const NavBar = () => {
  const BLOG = useConfig()
  const locale = useLocale()
  const links = [
    { id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
    { id: 1, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout },
    { id: 2, name: locale.NAV.RSS, to: '/feed', show: true, external: true },
    { id: 3, name: locale.NAV.SEARCH, to: '/search', show: true }
  ]

ここで id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true は id: 表示順序, name: local.NAV. 変数, to: 'パス', show: true と翻訳できます。

簡単に理解すると、変数 はナビゲーションバーに表示する名前の変数で、パス はその変数が指す URL です。例えば、id: 0 のリンクの変数は INDEX で、パスはブログのアドレスです。

変数が存在するので、まずはその変数が何であるかを宣言するファイルで変数名を設定する必要があります。assets/i18n/basic には en-US.json など 6 つのファイルがあり、これは blog.config.js で設定した言語に対応しています。そこで、私は zh-CN.json にナビゲーションバーの変数と表示名を変更・追加しました。

// 変更前
"NAV": {
    "INDEX": "ブログ",
    "RSS": "サブスクリプション",
    "SEARCH": "検索",
    "ABOUT": "について"
  },

// 変更後
"NAV": {
    "INDEX": "Blog",
    "RSS": "RSS",
    "SEARCH": "Search",
    "ABOUT": "About",
		"Page": "Page",
		"Newsletter":"Newsletter"
  },

Newsletter を追加したため、私の小報童の有料コラムに移動するので、RSS をサブスクリプションとして表示すると意味の分岐が生じるため、すべての変数の表示名を英語に変更しました。

zh-CN.json の変更が完了した後、私は Header.js でナビゲーションバーの各リンクの表示順序を変更し、About（内容を Page ページに移動）を削除しました。

以上のコード内容の変更が完了した後、私は Notion に戻り、Nobelium のデータベースに type が Page のページを 2 つ追加しました。そのうちの 1 つの title は Newsletter、slug は空白（コード内で追加済み）で、もう 1 つの title は Page、slug は page です。

フッター#

Nobelium のデフォルトのフッターは左側に © ニックネームブログ開始年 - 現在の年、右側に ▲ Powered by Vercel となっています。

私はこれが美しくないと感じ、左側の © ニックネームブログ開始年 - 現在の年 を右側に移動し、▲ Powered by Vercel を Page ページに移動し、左側には Copyright ページリンクを持つ Creative Commons アイコンを表示することにしました。

components/Footer.js をしばらく見ましたが、どう変更すればよいかわからなかったので、ChatGPT に尋ねたところ、彼は直接コードを生成してくれました。それをコピー＆ペーストして再デプロイすると、ずいぶん美しくなりました。

コードブロック#

深色テーマでは、コードブロックの色が依然として明るいことに気付き、夜間に見ると非常に目立ちます。いろいろ検索した結果、Leon が《新しいブログを記録する：nobelium、Vercel、Tailwind CSS とドメイン》でこの点についても言及しており、彼は Prism.js が提供する暗い背景 prism-tomorrow.css を使用し、notion.css のコードも変更していました。私はそれほど面倒にせず、直接 pages/_app.js で元の prism.css を置き換えました。

// 置き換え前
import "prismjs/themes/prism.css";

// 置き換え後
import "prismjs/themes/prism-tomorrow.css";

フォント#

私はずっと GitHub でオープンソースの霞婺フォントが好きで、以前 Typecho を使用していたときに霞婺文楷にフォントを変更したいと思っていましたが、成功しませんでした。今回はどうしても試してみたかったのです。

私は public/fonts に 4 つの woff2 フォントファイルがあるのを見つけ、霞婜文楷の LXGW Bright GB バージョンをダウンロードして LXGWBrightGB-Regular.woff2 をアップロードしました。

その後、まず styles/globals.css にフォントを宣言しました。

@font-face {
  font-family: 'LXGWBrightGB-Regular';
  src: url('/fonts/LXGWBrightGB-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

次に tailwind.config.js にフォントを追加しました。

// 変更前
fontFamily: {
        sans: FONTS_SANS,
        serif: FONTS_SERIF,
        noEmoji: [
          '"IBM Plex Sans"',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'sans-serif'
        ]
      }

// 変更後
fontFamily: {
        lxgw: ['LXGWBrightGB-Regular', 'sans-serif'],
        sans: FONTS_SANS,
        serif: FONTS_SERIF,
        noEmoji: [
          '"IBM Plex Sans"',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'sans-serif'
        ]
      }

その後、components フォルダー内の Container.js と NotionRenderer.js の 2 つのファイルを変更しました。

ついに、私はブログに霞婺フォントを設定し、心願を実現しました。

完成#

コード部分の修正が完了した後、次は Notion に戻り、Nobelium データベースでブログの内容を充実させることです。

まず、Page ページの内容を充実させました。Page ページはブログの独立したページの入口として定義されており、リンクなしのメニューボタンであるべきです。その構造は理想的には以下のようになります：

Page
├──── [Memos](https://memo.hhzz.plus/explore)
├──── [File Gallery](https://file.hhzz.love)
├──── [Monitor](https://monitor.hhzz.plus/status/public)
├──── [About](https://justgoidea.com/about)
├──── [Copyright](https://justgoidea.com/copyright)
└──── [Friend Link](https://justgoidea.com/links)

Nobelium は現在二次メニュー（submenu）をサポートしていないため、ナビゲーションバーをシンプルに保つために、私の Memos、File Gallery、Monitor の 3 つの独立ページと、元々 About と Friend Link に表示されるべき内容を Page ページにまとめることにしました。

Memos は、GitHub 上の flomo のオープンソースプロジェクト memos を利用して自分でデプロイした迅速なメモです。ここには現在未成熟なアイデアがいくつか保存されており、私のプライベートな「Twitter」とも見なすことができます。現在の分類には #閃念、#思考、#碎碎念、#吐槽、#推薦 などがあります。

File Gallery はリソース共有サイトで、面白くて実用的なリソースを収集して保存しています。

Monitor は、私がネット上にデプロイしたウェブサイト、サービス、VPS の稼働状況を監視するための監視サイトです。

About は About This Site と About Me の 2 部に分かれています。

About This Site では、ブログの名称（タイトル）、URL、ロゴ、説明（副タイトル）、著作権声明、技術構成、DNS と CDN サービス、使用フォントを列挙しました。フッターの ▲ Powered by Vercel を削除したため、技術声明の中で説明を行い、Vercel への感謝も表明しました。同様に、Cloudflare を DNS と CDN サービスとして使用し、霞婺フォントを使用していることも説明し、感謝の意を表しました。また、ブログを書くことを続ける理由についても少し書きました。

About Me では、私の MBTI 性格、身分と職業について簡単に説明し、座右の銘を記し、メールアドレスと Twitter を残しました。

Page ページの内容を充実させた後、Copyright ページを作成し、Footer.js を修正して、左側の Creative Commons アイコンがこのページを指すようにしました。

まとめ#

ブログは本来純粋であり、記録と共有のために存在すべきです。Notion は非常に使いやすく、Nobelium は非常にシンプルで、私のブログに対するすべてのニーズを満たしています。この過程で、私は Tailwind CSS や Next.js について多くの知識を学びました。まだ入門はしていませんが、少なくとも理解できるようになり、ChatGPT にどのように質問すれば望むコードを出力できるかもわかりました。次は、文章の質をどう向上させるかを真剣に考え、整理することです。