Leon

この記事にはいくつかの修正が加えられています。最新の文章は こちら でご覧ください。

長文警告（うっかり 1 万字以上書いてしまった…… 論文を書くのにこのモチベーションがあればいいのに）。最近、現実のプレッシャーから逃れるために、数日間狂ったように作業していました。 nobelium を使って新しいブログを立ち上げ、Tailwind CSS をいじり、ついでにドメインも購入して、自分のブログに自分のドメインを設定しました。

実は昨年、私は nobelium というプロジェクトを見つけて、成功裏に構築したのですが、サイトのレイアウトスタイルを調整したいと思っていました。しかし、その時はやり方がわからず、時間もかけなかったので、最近集中して学びながら試行錯誤しました。

デプロイプロセス#

nobelium の構築方法は README に詳しく説明されていますので、ここでは簡単に説明します。まず必要なのは GitHub アカウント、Notion アカウント、Vercel アカウント（GitHub で直接ログインできます）です。craigary/nobelium リポジトリをフォークします。

次に、craigary が提供するNotion テンプレート（データベース）を自分の Notion アカウントに複製し、そのデータベースを自分の Notion で共有します。

共有後は自分のページ ID を記録する必要があります。各データベースは異なるため、craigary のこの画像が非常にわかりやすいです。

次に Vercel にログインし、新しいプロジェクトを作成し、GitHub から先ほどフォークしたリポジトリをインポートします。操作は直感的に行えますので、ここではスクリーンショットは省略します。次に Next.js フレームワークを選択します。そして、環境変数を設定します。名前は NOTION_PAGE_ID、内容は自分のページの Page ID に設定し、Vercel に自動デプロイさせます。

デプロイが成功したら、Vercel が提供する URL にアクセスすれば、コンテンツが表示されるはずです。この時、あのテンプレートデータベースを確認してみると、各属性の意味が明確になるはずです。

• title: 記事のタイトル；
• date: 記事の公開日時。空白の場合は記事作成日時がデフォルト；
• slug: 記事 URL の末尾の文字、つまり .com/xxx の xxx 部分。英語を使用し、空白は - で代用することをお勧めします。中国語や空白、句読点を使用すると、UrlEncode されて長い文字列になってしまいます；
• summary: 記事の概要。ホームページのタイトルの下に表示されます；
• tags: 記事のタグ。記事を分類できます；
• status: 記事の状態。Published 状態の記事のみがブログに公開されます；
• type: Post はホームページに直接表示され、Page は URL に直接アクセスした場合のみ表示され、ホームページの記事リストには表示されません。

私は個人的に Notion のグループ機能を使ってこのデータベースをステータスに基づいてグループ化しました。これにより、公開済みと未公開のコンテンツをより便利に管理できます。

その後、以前書いたいくつかのものを見つけて、Notion テンプレートに貼り付け、ブログに戻ってページをリフレッシュすれば、記事が表示されます。

自分でいじり始める#

blog.config#

自分がフォークしたリポジトリをローカルにクローンすれば、いじり始めることができます。

README の説明に従って、blog.config.js ファイルを編集してブログの最初のカスタマイズを行います。カスタマイズ可能な内容はファイル内に詳細なコメントがありますので、著者の「do not change」と書かれた部分は変更しないでください。ここでは、注意が必要だと思う 2 つの点を紹介します。

• まず、email には自分が何を記入したかを覚えておく必要があります。これはアバターに関係していますので、後で詳しく説明します；
• 次に、comment は個人的に Gitalk ではなく Cusdis を選択しました。後で詳しく説明します。

アバター：Gravatar#

デフォルトでは、nobelium のアバターはこのようになっています：

非常に見覚えがあります。これは Gravatar のデフォルトアバターです。Gravatar 公式サイトにアカウントを登録する必要があります（WordPress アカウントでも可）。ここでは、先ほどemailに記入したメールアドレスを使用して登録し、指示に従ってアバターをアップロードします。成功したらしばらく待つと、ブログに自分のアバターが表示されるはずです。

原理としては、nobelium が自動的に Gravatar が生成したアバターの URL を使用してアバターを取得します。https://gravatar.com/avatar/ の後に登録したメールの md5 値を加えるだけで、アバターを直接取得できます。layout.js の Ln45 で確認できます。

コメント：Cusdis#

以前 Gridea で使用していたコメントシステムは Gitalk で、リポジトリにバインドすると、issue を通じてコメント機能を実現でき、Markdown をサポートし、GitHub アカウントがあればコメントできます。しかし、体験としては少し重く、国内のインターネット環境では頻繁に読み込まれないことがあり、GitHub の issue 機能の誤用だと考える人もいます。しかし、私にとって最も辛い部分は、カスタムスタイルが非常に難しいことです。

そのため、nobelium で Cusdis を見つけたとき、試してみたところ、非常に驚きました。公式の説明によると、Cusdis は Disqus の軽量オープンソースの代替品で、サイズはわずか 5kb で、設定が成功すれば基本的にウェブページと同期して読み込まれ、アカウントを登録する必要もなくコメントできます。

Cusdis は自分でデプロイすることも、公式が提供するサーバーを使用することもできます。公式サイトでアカウントを登録し、ウェブサイトを追加するだけで、data-app-idを記憶し、blog.config.jsの対応する位置に記入します。公式が提供するサーバーを使用する場合は、以下のように記入できます：

cusdisConfig: {
  appId: '自分のdata-app-idに置き換える', // data-app-id
  host: 'https://cusdis.com', // data-host、自己ホスト版を使用する場合は変更
  scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // 自己ホスト版を使用する場合は変更
}

完了したら、すべての変更を GitHub にプッシュし、Vercel のデプロイが完了するのを待ち、成果を確認できます！

Tailwind CSS#

以上が最基本のカスタマイズですが、私のようにいじるのが好きな人には満足できません。私は CSS をいじるのが好きです。

nobelium を立ち上げた初日に、実はスタイルをいじり始めていましたが、ドキュメントをよく見なかったため、リポジトリ内の明らかなglobal.css とnotion.css の 2 つのファイルを直接変更しました。中の内容が理解できないまま、検査ツールを使って自分が使いたいスタイルを CSS で強引に書き込み、!important を無理やり追加して強制的に適用しました。しかし、翌日、nobelium のドキュメントをよく見てみると、nobelium は Tailwind CSS / JIT フレームワークを使用していると紹介されており、カスタマイズが容易であることがわかりました。そのため、この見覚えのある名前を調べてみると、私は多くのことを見逃していたことに気づきました。以前のカスタマイズは基本的に野路子で、優雅とは言えませんでした。

私の簡単な理解を述べると、nobelium の 2 つの CSS ファイルは実際に 2 つの部分を担当しています。global.cssは全体のフレームワークを担当し、ナビゲーションバー、ホームページ、フッター、記事の著者などの部分を含みます。notion.cssは主に記事の本文部分を担当します。nobelium は Notion 内のコンテンツに展示のフレームワークを提供しており、本文以外の他のコンテンツは nobelium が生成し、Notion から本文を取得して指定されたスタイルでレンダリングし、最終的に完全なブログを表示します。

Tailwind CSS に戻ると、私の理解によれば、Tailwind CSS は HTML ファイル内でスタイルを迅速に指定するためのフレームワークを提供します。HTML 要素内で特定のクラスを指定するだけで、自動的に対応する CSS プロパティが生成され、HTML ファイルを離れずに迅速にスタイルをカスタマイズできます。したがって、2 つの CSS ファイル内の内容も理解できるようになりました。

例えば、notion.css ファイル内で私は以下のようにカスタマイズしました：

.notion-h1, .notion-h2, .notion-h3 {
  @apply mb-2;
  @apply text-left;
}

CSS 内で Tailwind を使用しているため、セレクタのルールは CSS と同じで、@apply の後の内容が Tailwind CSS の「構文」です。 mb-2 は margin-bottom: 0.5rem; /* 8px */ を表し、text-left は text-align: left; を表します。

ただし、すべてのスタイルがこの 2 つの CSS 内で指定されているわけではありません。前述のように、Tailwind CSS の最も重要な機能は HTML ファイル内で迅速にスタイルを指定することですので、生成された HTML ファイルのいくつかの js ファイル内でも Tailwind CSS の痕跡を見つけることができます。

もう一つの例として、BlogPost.js を以下のように修正しました：

const BlogPost = ({ post }) => {
  return (
    <Link href={`${BLOG.path}/${post.slug}`}>
      <a>
        <article key={post.id} className="mb-6 md:mb-8">
          <header className="flex flex-col justify-between md:flex-row md:items-baseline">
            <h2 className="text-lg md:text-xl font-bold mb-2 cursor-pointer text-black dark:text-gray-200">
              {post.title}
            </h2>
            <time className="flex-shrink-0 text-gray-600 dark:text-gray-500">
              {formatDate(post?.date?.start_date || post.createdTime, BLOG.lang)}
            </time>
          </header>
          <main>
            <p className="hidden md:block leading-7 text-gray-700 dark:text-gray-400">
              {post.summary}
            </p>
          </main>
        </article>
      </a>
    </Link>
  )
}

このファイルは実際にホームページの表示効果を担当しています。私は概要の文字を少し暗くして、記事タイトルの文字をより目立たせたいと思ったので、最後の<p>要素のclassNameを text-gray-700 と dark:text-gray-400 に変更しました。ドキュメントを調べると、 text-color-### は指定された色のフォントカラーを表し、gray-700 は Tailwind CSS のデフォルトのカラーパレットの一種であり、dark: プレフィックスはシステムのダークモードで適用されることを示します。したがって、ダークモードでは、ここでの文字色は gray-400 の色を使用し、元のものよりも暗くなります。これにより、私の効果を実現できます。

このようにして、詳細な対応関係は Tailwind CSS の公式ドキュメント で見つけることができます。ドキュメントには便利な検索機能があり、純粋なアマチュアの私でもいじる体験は良好でした。また、オンラインには中国語翻訳版のドキュメントも参考にできます。

その後、いくつかの要素をさらに修正することができます。例えば、フッターに CC BY-NC-SA のアイコンを追加し、ブログの著作権ページにリンクしました。元の Vercel のバッジは削除し、About ページに移動しました。

ダークモード下の Notion の色#

デフォルトの状態では、私の背景色が全て黒色に設定されているため、デフォルトのカラーパレットは Notion の色（フォントカラー、ハイライトカラー、背景色などを含む）が非常に目立たなくなります。そのため、私は手動で Notion 公式のダークモードでのさまざまな色を抽出し、notion.css に書き込みました。

ここでの色は、0 の彩度のさまざまな暗い背景で使用できるはずです（Notion 公式のダーク背景色は #191919 です。必要な場合は、notion.css ファイルの任意の位置に以下の内容を追加してください：

@media (prefers-color-scheme:dark) {
  :root {
    --fg-color-0: #6b728080;
    --notion-red: #DF5452;
    --notion-pink: #D15796;
    --notion-blue: #5E87C9;
    --notion-purple: #9D68D3;
    --notion-teal: #529E72;
    --notion-yellow: #CA9849;
    --notion-orange: #C77D48;
    --notion-brown: #BA856F;
    --notion-gray: #9B9B9B;
    --notion-red_background: #522E2A;
    --notion-pink_background: #4E2C3C;
    --notion-blue_background: #143A4E;
    --notion-purple_background: #3C2D49;
    --notion-teal_background: #243D30;
    --notion-yellow_background: #564328;
    --notion-orange_background: #5C3B23;
    --notion-brown_background: #4A3228;
    --notion-gray_background: #2F2F2F;
    --notion-red_background_co: #362422;
    --notion-pink_background_co: #302228;
    --notion-blue_background_co: #1D282E;
    --notion-purple_background_co: #2B2431;
    --notion-teal_background_co: #222B26;
    --notion-yellow_background_co: #392E1E;
    --notion-orange_background_co: #38281E;
    --notion-brown_background_co: #2F2723;
    --notion-gray_background_co: #191919;
  }
}

OG 画像#

以上の部分をいじった後、1 日休憩し、今日はまた心がそわそわしてプロジェクトファイルを見ていると、blog.config.js ファイルの中にogImageGenerateURL があることに気づきました。これも nobelium の機能の一つで、Open Graph を自動的にサポートしていますが、いじった後にいくつかの問題が発生しました。

元のファイルでは、craigary が自分でデプロイしたドメインが記入されており、Container.js ファイルの Ln39 で引用されています：

<meta
  property="og:image"
  content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
    meta.title
  )}.png？theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200`}
/>

つまり、OG 画像はドメインを指し、そこには UrlEncode された記事タイトルといくつかの他の内容が含まれていることがわかります。これは Gravatar と同様に、URL を通じて OG 画像を直接提供できると推測されます。

そのため、GitHub で元のリポジトリを見つけ、Vercel のプロジェクトであるOpen Graph Image as a Serviceを見つけました。簡単に言うと、URL を通じてテキストを含む画像を迅速に生成できるため、各 OG 画像を手動で作成する必要がなくなります。ウェブページにアクセスして制作することも、特定の URL を使用して特定の画像を返すこともできます。通常のサブスクリプションノードの API に似ています。

しかし、craigary が提供する URL には nobelium のロゴが表示されず、テキストのみが表示されます。指定されたロゴの URL が無効になっていると推測されます。

Vercel 公式のリンクにアクセスすると、ロゴを表示してカスタマイズできますが、中国語フォントはサポートされていません：

そこで、またいじるチャンスがやってきました！

公式リポジトリの issue を調べると、#108で韓国語の表示問題が提起されており、やはりフォントが不足しているためでした。このスレッドにはhoosan の返信があり、同様の日本語フォントの解決方法が詳しく説明されています。中国語にも適用できるようです。そこで、私は自分でデプロイすることに決め、修正すれば問題が解決できるはずです。

まず、vercel/og-image プロジェクトのオリジナルを自分でデプロイする必要があります。同様に、公式リポジトリをフォークし、README の指示に従ってvercel.json ファイルの内容を修正します。私はアーキテクチャとリージョンの 2 行を削除し、メモリを少し下げ、リライトはそのままにしました。最終的にファイルは以下のようになります：

{
  "functions": {
  "api/**": {
    "memory": 1024
  }
},
"rewrites": [
    { "source": "/(.+)", "destination": "/api" }
  ]
}

これで Vercel サイトに行ってデプロイを開始できます。手順は以前と同じで、GitHub からインポートし、フレームワークを「その他」に選択し、Vercel に自動デプロイさせます。デプロイが成功したら、ウェブページを開いて確認し、さらに修正を開始できます。

まず、フォントファイルを追加します。

Google Fonts サイトではさまざまな Noto フォントが提供されており、フォントが不足して表示されない四角は「tofu（豆腐）」と呼ばれています。このフォントが Noto と呼ばれる理由は、tofu 問題を解決するためです。このフォントを使用するのは適切だと感じました。プロジェクト内の他のフォントファイルはすべて woff2 形式であるため、Google Fonts サイト自体は woff2 形式のダウンロードをサポートしていないため、いくつかの検索を行い、google-webfonts-helperというサイトを見つけ、woff2 形式のフォントファイルを直接ダウンロードできることがわかりました。

私は Noto Sans SC medium フォントを選択し、中国語文字セットと 500 の字重を選択しました。ページの下部にスクロールすると、すべてのフォントファイルを直接ダウンロードできます。ダウンロードが成功したら解凍し、woff2 形式のファイルを保管します。

便利のために、フォントファイルの名前を noto-sans-sc-medium.woff2 に変更し、そのファイルを自分のプロジェクトのapi/_fonts フォルダに追加しました。

次に、api/_lib フォルダ内のtemplate.ts ファイルを開き、先ほどのフォントファイルを読み込む新しい const を宣言します：

const noto = readFileSync(`${__dirname}/../_fonts/noto-sans-sc-medium.woff2`).toString('base64');

同じファイルを下にスクロールし、次の CSS コードを追加します：

@font-face {
  font-family: 'Noto Sans SC';
  font-style:normal;
  font-weight: medium;
  src: url(data:font/woff2;charset=utf-8;base64,${noto}) format('woff2');
}

次に、下にスクロールし、heading クラスの CSS に先ほどのフォントを追加します：

以上の修正を保存し、GitHub にプッシュすれば、Vercel が再び自動的にデプロイを開始します。デプロイが完了したら、ウェブページを開いて、外観に変化がないことを確認し、中文を入力してみてください。

大成功です。画像もあり、中国語をサポートする自動生成 OG 画像サイトが完成しました。その後、いくつかの小さな調整を行い、暗い背景を使用し、nobelium のアイコンを追加し、フォントサイズを少し大きくしました。大体こんな感じです：

しかし、フロントエンドでの操作だけでは私たちの目標ではありません。記事タイトルに基づいて自動的に OG 画像を生成するリンクを作成します。右側の画像をクリックしてアドレスをコピーすると、次のような URL が得られます。

https://og-image-l3on.vercel.app/**Hello**%20World%20%E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200

ここで、**Hello**%20World%20%E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95 の部分は、私たちのタイトルが UrlEncode されたテキストであり、.png は選択されたファイルタイプで、theme=dark md=1 fontSize=125pxなどの内容は他のカスタマイズ設定です。したがって、私たちがやるべきことは、以前言及したblog.config.js と Container.js ファイル内で、自分のドメイン名と設定を使用するように変更することです。

まず、blog.config.js ファイル内の ogImageGenerateURL を自分がデプロイした og-image のドメイン（Vercel が自動的に割り当てたもの）に変更し、次に Container.js ファイル内で、<meta> タグの下にある property がog:imageの内容を見つけ、.png?theme=を含む後の内容を選択し、先ほどの URL の対応する内容に置き換えます。Twitter Card の設定も同様に変更できます。私の設定は以下の通りです：

<meta
  property="og:image"
  content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
    meta.title
  )}.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200`}
/>

<meta
  name="twitter:image"
  content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
    meta.title
  )}.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200`}
/>

ここでの内容は、まず先ほどのblog.config.js 内の ogImageGenerateURL の内容を取得し、スラッシュを加え、次に UrlEncode された記事タイトルを加え、最後に特定のスタイルを表す文字列を加えて、動的に OG 画像を生成する URL を作成します。

修正を保存し、GitHub にプッシュして、Vercel のデプロイが完了するのを待ち、ブログを開いて、検査ツールを使用して OG 画像リンクを確認できます。Telegram や Twitter でテストしてみると、期待通りの結果が得られました！

利点#

nobelium のウェブサイトを開くと、最初に感じるのは速さです。以前 GitHub Page に構築した静的ブログに比べて、非常に速く、ほとんど読み込みが見えず、リンクをクリックするとすぐにコンテンツが表示されます。

比較として、元の Gridea 静的ブログの Lighthouse スコアも示します：

次に、Notion を CMS として使用することは、以前の Gridea で Markdown ファイルを編集するよりも便利です。以前はブログ記事を書くとき、他の場所で書いてから Gridea に移動することができましたが、最後の公開ステップはコンピュータで操作する必要がありました。また、ブログに画像がある場合は、画像の問題を解決する必要があり、画像ホスティングを使用するか、画像ファイルを 1 つずつ Gridea にインポートする必要がありました。さらに、私の Gridea はネットワークの問題のため、クライアントでのプッシュが長期間成功しないことがあり、毎回クライアントで同期をクリックし、ログアウトして、output フォルダ内の静的ページファイルが正常に更新されたかを確認し、最後に Git で手動でプッシュする必要がありました。Notion で編集を完了し、タグを直接 Published に変更するだけで公開できるのは、非常に便利です。

しかし、nobelium のソリューションも完璧ではなく、いくつかの点で Gridea の Markdown ファイルが懐かしいです。

まず、柔軟性がある程度制限されています。Markdown ファイルは HTML と直接互換性があるため、時には個別のカスタム要素（例えば、バッジや中央揃えのテキストなど）を直接 HTML で書くことができますが、nobelium ではブログの内容は実際には Notion ページの内容であり、Notion 内のすべてのブロックタイプ（例えば、新しく導入されたシンプルな表や折りたたみタイトルなど）はサポートされていません。文字を中央揃えにすることもできません。簡単な画像とテキストのブログには十分ですが、ブログページをより制御したい場合、nobelium の Notion を使用する方法は、直接 Markdown を使用するよりも柔軟性が劣るかもしれません。

さらに、nobelium は Notion からコンテンツを取得する必要があるため、一般的には公開された Notion データベースを選択します。もし本当に Notion をブログのコンテンツ管理システムとして使用する場合（公開と草稿の内容をタグで区別する）、公開されたデータベースは、準備ができていないコンテンツをインターネット上に公開する可能性があります。私は個人的にこの点に関しては全く気にしていません。なぜなら、私は Notion で直接執筆することはほとんどないからです。nobelium は、NOTION_ACCESS_TOKENを使用してコンテンツを取得する方法も提供しています。これにより、nobelium の Notion データベースを共有せずに済みます。これは、トークンを持って Notion のコンテンツにアクセスするようなもので、トークンの有効期限は 180 日です。私のような金魚脳には、この方法は選ばないでしょう。著者の craigary のロードマップによれば、nobelium は将来的に Notion 公式の API からコンテンツを取得することをサポートする予定で、最近 Notion API も正式にベータ段階を終了しました。craigary の更新を楽しみにしています！

最後に、私の元の Gridea サイトは長い間磨き続けてきたため、多くの詳細が私の好みに合致しています。これは nobelium への「埋没コスト」の一部かもしれません。私は元の Wonder Space の約 2 年間の修正、追加したスタイル、Telegram の即時プレビューテンプレート、OG 属性、そして以前のユーザーのコメントを手放すことができません。

ドメイン#

上記のことをいじってから 2 日が経過しましたが、その時私は全く止まる気配がありませんでした。ある日、ネットでロ二デのブログを見て、彼の元の GitHub Page に自分のドメインが追加されているのを見て、私はずっとドメインを持ちたいと思っていたことを思い出しました。その日は実際には深夜の 2、3 時でしたが、私は思い立ってドメイン購入に関する情報を検索し始めました。

以前、ドメインを購入する際は GoDaddy などのサイトで購入することが多く、外貨決済手段が必要で、その時は諦めてしまいました。しかし、その日検索してみると、国内のさまざまなクラウドサービスで直接ドメインを購入できることがわかりました。そこで、私はアリババクラウドの万網で検索してみました。調べてみると、私は以前、ドメインは年間少なくとも数食分の支出が必要だと思っていましたが、L3ON のプレフィックスを見つけたところ、l3on.siteというクールなドメインが年間わずか 6 元であることがわかりました…… 私はどうしてもっと早く行動しなかったのかと後悔しながら、1 年分を注文しました。

万網での購入は、Alipay アカウントがあればログインでき、Alipay にバインドされた電話番号で本人確認を行うこともできます。私はこのプライバシーと引き換えに得られる便利さを受け入れ（私のブログの内容はかなり明るいと思いますが）、身分情報をアップロードし、30 分もかからずに本人確認を完了しました。その時はすでに深夜 4 時を過ぎており、システムは本人確認が 24〜48 時間かかる可能性があると通知しました。私は寝ることにしました。

結果、翌朝目覚めると、受信箱にメールが届いていました。その日の朝 6:50 に本人確認が通過したという通知を受け取りました。機械が認識したことを願っています。さもなければ、アリババの従業員は出勤時間が早すぎます。

Vercel のドメインバインディングは非常に簡単で、プロジェクトの設定に入り、自分のドメインを入力し、ドメインの DNS 設定に CNAME レコードを追加するだけです。私はいじる性格から、ドメインの DNS を Cloudflare に変更し、CNAME を追加したところ、5 分もかからずにblog.l3on.siteドメインが有効になりました。その時、私は画面を見ながら、ブラウザのアドレスバーにこの一連の文字が広大なインターネットの世界で私を代表する角落を示しているのを見て、何度もページをリフレッシュし、少しずつ嬉しくなりました。

元の GitHub Page でもカスタムドメインを設定できます。Vercel と同じくらい簡単で、リポジトリのルートディレクトリに新しいCNAMEファイルを作成し、自分のドメインを記入するだけです。私はws.l3on.siteを選択しました。または、Gridea のリモート設定で自分のドメインを直接入力し、変更をリモートにプッシュすることもできます。その後、Cloudflare に CNAME レコードを追加し、元のgithub.ioドメインを指すようにします。これで、私はインターネット上に 2 つのほぼ同じ角落を持つことになりました。

まとめ#

では、この 2 つのブログのうち、どちらかを残してどちらかを放棄すべきでしょうか。私は今のところ、どちらも放棄する必要はないと感じています。Gridea はより完全なブログサイトのようで、カスタマイズの自由度が高いですが、それに伴い管理も相対的に複雑になります。一方、nobelium は強力で迅速で、相対的に先進的な技術を体験させてくれ、数晩新しいことを学ぶ喜びをもたらしてくれました。したがって、私は自分に二者択一を強いる必要はないと考えています。私にとってブログは仕事でも負担でもなく、むしろ私のおもちゃです。子供が 2 つのおもちゃを拒否しないように、私も 2 つとも持ちたいのです。

しかし、私はこれらのことに集中しすぎて内容を忘れたくありません。技術には理由のない魅力があり、常に新しいことを試したくなりますが、本当に厄介な問題に直面すると、深く体系的に学ぶことを怠ることが多いです。これが私が長い間三脚猫のようなスキルを持っている理由かもしれません。このブログを整理しているとき、私の最初のブログ記事を再び見返し、私の初心は自分が学んだことや考えたことを記録できる場所を持ちたいというものであることを思い出しました。以前の 2 つの感想ブログは、私が想像していたブログの姿に近く、自己や見えない読者と共有したいことを伝えるものでした。

したがって、数日前にブログをいじり終え、疲れ果て、嬉しさの中に少し罪悪感が混じっていました。私はまた物事に没頭しすぎて、重要なことをせずにただいじっているのではないかと心配していました。多くのことを成し遂げたという達成感がある一方で、もし私が何も記録しなければ、たとえその時に理解していたことでも、徐々に忘れてしまうでしょう。そして、これらのことに多くの時間を費やしたことが無意味に思えてしまいます。だからこそ、私は今日、思い立って打ち始めたことを非常に幸運に思っています。午前中から深夜まで、一気に 1 万字以上を書き上げ、自分自身に驚いています。今後しばらくは、趣味から離れ、生活の中の現実的な問題にもっとエネルギーを移す必要があるかもしれません。この長文も、心を落ち着ける前の最後の狂乱のようなものです。

最後に、もしここまで読んでくださった方がいれば、ありがとうございます。この記事があなたに少しでも情報を提供したり、助けになったりしたなら、私の光栄です。あなたが私のどの角落でこの記事を見つけたとしても、コメントや交流を歓迎しますし、別の角落にも遊びに来てください。

• Wonder Space (Gridea / GitHub Page)
• Wonder Space (nobelium / Notion / Vercel)