nitaking.dev

blog.nitaking.devを作りました🎉

Notionブログを作りました 🎉

僕はこれまでアウトプットは Qiita をメインにしていました。

技術的な発信は Qiita、それ以外のアウトプットは Medium に、って感じでしたが、Medium はどちらかというとQiitaの英語版記事を書き出すポジションで使いわけてました。

個人のライフハックを今後Noteあたりに書こうかなと思ってたのですが、近頃Notionブログが流行っていたので手を伸ばしてみました。

Notionブログとして検索すると初めにヒットするのが ZEIT製 Notion Blog でした。

この ZEIT は非エンジニアでもセットアップが容易にできるくらい、ステキなツールとなっています。

（でも、僕は詰まりまくりました。🤔）

既にいくつも解説記事があるので要点だけまとめると、

• GUIベースで設定していく
• Notion へのデータアクセスに NOTION_TOKEN と BLOG_INDEX_ID を使用する
• GitHub にリポジトリを自動生成してくれる
• Notion 上では、決められたプロパティ名を使って公開フラグやURL（Slug）を設定して書くだけ。

という感じです。よしなにやってくれる感じがめちゃ良いです。

僕が主に詰まったのはここ。

Notion へのデータアクセスに NOTION_TOKEN と BLOG_INDEX_ID を使用する

ハマった点

おそらく初回にデータ環境変数登録をミスってしまったのが悲しみの始まりなのですが、ZEIT上で NOTION_TOKEN と BLOG_INDEX_ID を間違えてしまうと、GUI上からは変更できません。

now CLIを使用しなければシークレットデータは削除不可能です。

既に同じ名前のプロジェクトは存在していますと怒られ・・・

BLOG_INDEX_IDが読み取れないといわれ・・・（ローカル起動では参照できたよ！！！！！！なんかポカしてそう！！！！）

（エラーが起きてもリポジトリは作成されてしまい・・・）

・・・

リポジトリを消し直したり、シークレットを削除したりしてもエラーから逃れられなくなってしまったので、考えることを放棄しました。🤔

ZEIT（Vercel）環境動かない！！もうしらない！！ってむしゃくしゃしてたので、使い慣れてるNetlifyで試すことにしました。

GatsbyではNotionデータにアクセスするプラグインがあるようで、解説記事もいくつかあるようです。

（現職ではGatsbyを使ってたりするので安心感がある・・・！）

この記事で語られている手順は

1. Gatsby CLIで好きなスターターキットからGenerateする
2. gatsby-source-notion-database のプラグインを追加する
3. Notionから取得できるデータに合わせてGraphqlのクエリを整えてあげる
4. クエリデータに合わせたComponentを用意する
5. あとは gaysby develop するだけ！

Gatsbyのスターターキットを使って作成することも可能で、ZEITの固定テンプレートに比べてデザインの選択肢があるのもよし。 （カスタマイズしたらいいだけなんですけど、めんどくさがりなので・・・。）

また、このプラグインで使うのはNotionのDatabase URLです。 （↓こういうの）

https://www.notion.so/1aa283fcd5ae4a73ba0f73c062de745e?v=8f1bcd444edb4360aa2b090a2934bd62

これはdatabase の shareから公開したときのURLです。

ZEITではTOKENを求められるのでローカル環境のセットアップも気を使うのですが、こちらはただの公開URLなのでセキュリティを気にしなくていいですね。

Gatsby のクエリをちゃんと使ったことがなかったので最初はなれませんでしたが、ブログ記事のカテゴリーなどをクエリでフィルターすることでうまく分類分けすることができそうです。コンテンツが増えたらよさげです。

クエリとComponentが食い違うとエラーがでて何がなんだかわからないですが、 http://localhost:8000/___graphql でクエリの動作確認が簡単にできます。

サンプルComponentも生成してくれる太っ腹ぶり

ローカルでの検証が済んだらつぎはNetlifyです。

ブログに使えそうなドメインを持ってなかったので、取りました。

Google Domainを使って nitaking.dev を購入します。

お名前.comでドメイン買ってたりしましたが、Google DomainめっちゃUI楽。（ってかドメイン界隈のUIの悪さはなんなんだ？）

無事購入できたらまずNetlifyへ。

Overview > Domain setttings > Add Domain alias

から使用したいドメインを入力します。

DNSプロバイダにCNAMEを設定して、と言われるのでGoogle Domainに戻ります。

DNS > カスタム リソース レコード > 追加

で 名前 と データ をセットして追加します。

名前がサブドメイン、データはNetlify上でのURLです。

すると、数時間くらいでDNSの反映が行われて、設定したURLでNetlifyにホスティングされたサイトにアクセスができるようになります。 （僕は10〜20分で反映されました。昔は数時間かかったけどめちゃ早い。Googleのネームサーバーのおかげ？）

そんなこんなで Gatsby で Notion Blog セットアップできました🎉🎉

GitHubにソース公開しているので、気になる方はこちらから。