けんぢのnotion-blog

鋭意編集中。。。
🗒ブログ 🏠ホーム

astro-notion-blogを始める方法

この記事ではastroを使ってnotionでblogを始めるにあたって最初にやると良いことを説明します。
エンジニアの方であればこのastro-notin-blogを考えた”おとよさん”の説明で理解できるかと思いますが、
私のような非エンジニアには珍紛漢紛(ちんぷんかんぷん)でしたので、そんな方でもわかるように
噛み砕いて、おとよさんの説明に言葉の意味などを追記する形で説明します。

始め方

astro-notion-blogのGitHubリポジトリに日本語のマニュアルがあります。
※リポジトリ(英:repository)とは
ファイルなり、プログラムなり、設定情報なり、何らかの「保管場所」をカッコ付けて言った表現らしい
つまりマニュアルが置いてあるページって感じ

まず最初にデプロイまで進めましょう。15分もかからないでしょう。それからここへ戻ってきてください。
※デプロイ(英:deploy)とは
作ったプログラムをしかるべき場所に置いたり、あれやこれやの設定をしたりして、使える状態にすることらしい
処理開始!とか、更新!みたいなもん
私はデプロイまでに30分はかかりました(笑泣

↓リポジトリへはこちらからどうぞ

最初は英語表記になっている場合がありますが“English/日本語” の日本語を選択すると
マニュアルが日本語版に切り替わります。
そしてクイックスタート以下、必要なものの準備、その後1〜11番までを実行します。

必要なもの、・Notion、• Cloudflare Pages ←これはネット上に公開するための処理をしてくれるもの
そしてastroとはなんなのか、、、Notionで書いたものをWebページの形にしてくれるソフトとでも言いましょうか
つまりNotionで書いてastroでブログの形に変換してCloudflarePagesで公開する。って感じ

1 スターとはいわゆる「いいね・高評価」みたいなもの ぜひスターを押してあげて

2 おとよさんが作成したブログテンプレートを自分のNotionにコピーする。ブログテンプレートを開き右上にある
「複製」を押すと自動的に自分のNotionに複製される。

3 複製したページ(データベース)のアイコン、タイトル、説明を自分用に書き換えたりしましょう

4 複製したページ(データベース)の URL https://notion.so/your-account/<ここ>?v=xxxx を DATABASE_ID としてメモします。
ページ右上の共有を開き「リンクをコピー」してどこかしらに貼り付け、必要な部分だけを切り取ってみたいなことでもいい。

例)https://notion.so/(あなたのアカウント)/123456789abcdefghijklmnopqrstuvwxyz?v=xxxx
※上記青色の部分 アカウント名+スラッシュからハテナの前までの部分

5 Notion developersってやつの Create an integration ってやつからインテグレーションってのを新規作成し、シークレット内の "Internal Integration Token(内部インテグレーショントークン)" を表示しメモする。これを NOTION_API_SECRET というものでこの後使用します

6 複製したページを再度開き Share a database with your integration の手順でインテグレーションにデータベースを共有する。
先ほど複製してできた自分のNotionページの右上3点リーダー(3つ点があるやつ)を開き「コネクト」で「コネクトを追加」「コネクトを探す」に先ほどNotion developersってやつで作成した Create an integration のインテグレーション名を入力すると出てくるので、それを選び追加する。

7 GitHubに自分のアカウントを新規作成しておきましょう。最初に説明したおとよさんのGitHubマニュアルのリポジトリを自分のアカウントヘフォークします。フォークとは自分のページに複製するみたいなことです。
※フォークボタンは1.で紹介した画面上部右側のスターボタンの左にあります

8 Cloudflare Pages を開きサインインします。登録して自分のアカウントを作成するってことです。
※ページ右上にある言語設定を日本語に変更しときましょう。最初英語になってると思います。

9 Pagesでプロジェクトを作成から "Connect to Git(GitHubに接続)" を選んで作成し、先ほど作成した自分のGitHubを選びフォークした <your-account>/astro-notion-blog リポジトリを選んで "Begin setup" をクリックします。

10 「ビルドの設定」の「フレームワーク プリセット」で astro を選択します
「環境変数(アドバンスド)」 を開き NODE_VERSIONNOTION_API_SECRETDATABASE_ID の 3 つを入力し設定します。3つどれから入力してもいいです。並びは関係ないです。
変数を追加するを押す。
NOTION_API_SECRETDATABASE_ID は先ほどメモしたやつ。
NODE_VERSION は v16.13.0 かそれ以上を指定します。
現時点ではv16.13.0でいいです。
詳しくは How to deploy a site with Git をご覧ください

11 "Save and Deploy" をクリックし、デプロイが完了すると Notion Blog が見えるようになります。サイトにアクセスで開けますよ

astro-notion-blog では新しい記事や変更を公開したいとき毎回デプロイが必要になります。いわゆる更新ですね

Cloudflare Pages のダッシュボードから手動でデプロイしましょ。

Notionデータベース

この章ではNotionデータベースのそれぞれの列について説明します。

列名 説明
Page ブログの記事
Tags 記事のカテゴリーを表すタグ
Date 公開日時。公開日時を過ぎた後にデプロイする必要があります。
Excerpt 一覧ページに表示される記事の概要
FeaturedImage 一覧ページに表示されるアイキャッチ画像。OG画像にも使われます。
Published チェックすると公開可として扱われます。
Rank 整数を設定すると数字の大きいものから順におすすめ記事に表示されます。
Slug URL末尾のパス。この値は他の記事と重複してはいけません。
⚠️
データベースの列名を変更しないでください。プログラムから使用されるためです。列の順序は変更しても構いません。

詳しい情報

GitHubリポジトリのwikiでその他の詳しい情報にアクセスすることができます。