A W E S O M E . の導入方法

この記事では、このブログのテーマである A W E S O M E . の導入方法を解説します。

A W E S O M E . は Notion + Next.js で作られたブログテーマです。 Notion で記事を書くと、ブログに反映される仕組みになっています。リポジトリは以下です。

Notion でデータベースを準備する

まずは Notion でデータベースを準備します。上記のリポジトリの README にも書いていますが、データベースのプロパティは以下のように設定します。

データベースはテンプレートが準備されているので、このテンプレートを複製して自分用に書き換えるのが楽です。

このデータベースの ID をコピーしておきます。

データベースの ID はページのURLに含まれています。

https://www.notion.so/*****************?v=xxxxxxxxxxxxxxxxxxxxxxxxxxxx

上記の URL の ***************** の部分が ID です。

インテグレーションを準備する

Notion のページ内の情報を読み取るためにインテグレーションを取得します。

インテグレーションの取得方法は下記のYouTubeがわかりやすいです。

git clone する

以下のリポジトリを git clone します。

$ git clone https://github.com/steelydylan/Awesome.git

Git を入れていない場合は、以下の記事が参考になります。

Awsome のフォルダに移動しておきます。パスはそれぞれ自分の PC のパスに置き換えてください。

$ cd Awesome/

依存パッケージをインストール

yarn で依存パッケージをインストールします。

Node.js と yarn を入れていない場合は、入れておく必要があります。

Node.js のインストールは以下のページが参考になります。ただし注意点がありますので、次の見出しの内容も確認しておいてください。

yarn のインストールは、Node.js を入れた後に以下を実行すればオッケーです。

npm install -g yarn

Node.js のバージョン管理でハマった

ここで自分はハマりポイントがありました。

yarn install をすると、Node.js のバージョンが違うと怒られました。

本家のリポジトリは Node.js のバージョン管理ソフトの nodeenv を使っており、package.jsonで指定されているのは、14系でした。

"engines": {
    "node": "14.x"
  },

自分が入れている Node.js は公式サイト経由で入れており、バージョンは以下でした。

$ node -v
v16.15.1

ということで、自分も Node.js のバージョン管理ソフトを入れようと思いましたが、自分は Windows なので、nodeenv は使えないそうです。

Windowsだと、nvm-windows というのがよさそうでしたが、一度自分の PC の Node.js を削除する必要があるということで、ビビッてやめました（他の Node.js を使っているアプリが動かなくなるかもとビビった。）

ということで、 package.json の以下の部分を削除して、無理やりやってみることにしました（本当はこんなやり方が良くないのはなんとなくわかる。）

"engines": {
    "node": "14.x"
  },

ついでに、nodeenv を使うと生成される .node-version も削除しておきました。

yarn install をすると、、、動きました。結果オーライで進めることにしました。

Notion をブログに使う準備をする

blog.config.ts に以下のような部分があるので、notion にしておきます。

use: "notion", // mdx or notion

このブログは元々 mdx という JSX を マークダウンに埋め込めるファイルを記事として使用するブログテーマでしたが、それを Notion に対応しています。上記の部分で mdx と Notion を切り替えることができます。

続いて、.env.local に Notion のデータベースのIDとトークン（インテグレーション）を入力します。

NOTION_DATABASE_ID= 
NOTION_TOKEN=

これでローカルでブログを起動する準備ができました。

yarn dev を実行すると、ローカルでブログが立ち上がるはずです。

Notion DB のカテゴリ名と blog.config.ts のカテゴリ名は合わせておく

上記まででブログのトップページは表示されたと思いますが、記事をクリックすると 404 ページが表示されるかもしれません。

404 ページが表示された場合は、Notion DB のカテゴリ名と blog.config.ts のカテゴリ名があっていない場合があります。

README にも書いてあるように、 blog.config.ts はブログの設定を行うファイルで、カテゴリの設定を行う所もあります。このカテゴリ設定と、Notion のデータベースのカテゴリ設定があっていないと記事は表示されません。このブログの場合は以下のようになっています。

Notion のデータベースのカテゴリ名👇

blog.config.ts のカテゴリ設定👇

categories: [
    {
      id: "about",
      title: "About",
      imagePath: "/images/me.png",
      description: "About Me",
    },
    {
      id: "tech",
      title: "Tech",
      imagePath: "/images/sinwave.gif",
      description: "Articles about Tech",
    },
    {
      id: "study",
      title: "Study",
      imagePath: "/images/english.jpg",
      description: "Articles about study",
    },
    {
      id: "journal",
      title: "Journal",
      imagePath: "/images/journal.jpg",
      description: "My Journal",
    },
  ],

タグの設定は別途必要

タグは別途、Notion のデータベースにタグ用のプロパティを追加して、いくつかコードを変更しなければ表示されません。タグを Notion のデータベースに設定してブログに反映する方法は別の記事で書こうと思います。

GitHub に push する

ローカルで動いたコードを GitHubにプッシュします。以下の記事が参考になります。

Vercel にデプロイする

Vercel にデプロイすれば、ブログ開設完了です。以下の YouTube が参考になります。動画内でもありますが、Vercel の環境変数に Notion のデータベースの ID と、トークン（インテグレーション）を設定しておいて下さい。

終わりに

無事 A W S O M E . を使ったブログが開設できました。このブログでは、引き続き A W S O M E . の改造方法を記事にしようと思います。