ブログの移行と再編成

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

探索#

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

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 サービスとして使用し、霞婺フォントを使用していることも、Vercel と同様に非常に使いやすい無料サービスを提供しているため、説明し感謝の意を表すべきです。また、私がブログを書くことを続けている理由についても少し書きました。

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

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

まとめ#

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