個人サイトにブログ機能つける

大方針としては二つあった。

Markdownファイルをリポジトリに直で埋めこむ
Notionで記事をホスティングして、個人サイトからアクセスする

1.だとNext.jsのblog-starterを使えば、さほど難しくないと思われるが、
記事を更新する場合にいちいちエディタで直編集しなければならない煩わしさがある。
Notionのヘビーユーザーなので、2.だと嬉しい。
→理想を追って、Notionから記事を取得する方向を模索する

蔀

Notion APIはpublic βが公開になっている。
数ヶ月前とかだっけ？
notion-blog等のフレームワークは非公式APIを使っている。
公式APIだとフォーマットがだいぶ違うので、だいぶ修正する必要がある。

返してるjson見たが、Markdownでそのまま取得することはできない。
ブロックの配列として返すので、受けるNext.js側で変換処理が必須。
自分でガリガリ書いて書けなくはないけども、出来はあまりよくないことが容易に予想できた。

蔀

（Notionのデータ取得は昨日一日がかりで格闘したので、なんか一個ぐらい記事が書けそうなので書きたい）

蔀

Twitterで格闘のログを吐き出していたら、@shogocatさんから公式APIを使ったサンプルリポジトリを紹介してもらった。
↓これが良さそう

蔀

Notionのnpmモジュール入れるために↓のinstallが必要

npm install @notionhq/client

蔀

[id].jsとindex.jsをTypeScript化したら、APIからの戻り値がAnyになっていてワーニングが出た。
小手先でなんとかしようと思ったが、たぶんちゃんと型づけしないとダメそう。これは劣後にしよう

蔀

今日は大きな山を超えた感じがする。
明日は個人的な好みに整えて、Vercelに上げる。ソースコードもpublicにしたい

蔀

APIは100ブロックが上限。
よっぽどの長文書かなければ超えないだろうけど、超えるときはページネーションが必要。
俺の過去のブログ記事だと、モノによっては一部超えちゃいそう

蔀

Dateのフォーマットで、海外からアクセスしたときを試したいと思った。
開発者メニューからできた

蔀

日本でアクセスしたときにYear/Month/Dayの順になって、他国ではなんとなくいい感じになればいいぐらいの気持ちだったので、toLocaleDateString()をオプションなしで使うことにした

蔀

ブログの記事ページに遷移すると、ヘッダ部分のArticlesの選択状態が取れるのが気になっていて、
CSSの問題だと思っていたけれど、:global(a.active)で指定していたので、articlesのページを開いていないことをちゃんと判定していた結果だった。
じゃあこれでいいか、という気持ち。

蔀

URLをタイトルベースにしたので、カブると後勝ちになる。
これはカブらないようにちゃんとタイトルつけてね、で。

蔀

長文タイトルでレイアウト崩れると思っていたが、テスト文をsomesomesome……にしていたので、これだと一語と見做されるみたいで、色々ダメだった。
スペースがあれば、適宜調整される。
日本語はスペースなしで調整。

蔀

元のリポジトリでタイトルに指定されていたCSSのセレクターが実は効いていなかったのを修正した。

.container h1 {
  font-size: 32px;
}

.name {
  font-size: 50px;
}

これだと.container h1の勝ちになるらしい。
下に.nameがあるからそっちが上書かれそうなもんだが、なぜだろう。ネイティブなHTMLタグがあるから？

.container h1 {
  font-size: 32px;
}

.container .name {
  font-size: 50px;
}

こっちなら下が勝つ。

蔀

実装的には完了。
明日は昔のブログ記事をサルベージしてきて、コンテンツを整えていく。
これはこれで時間かかるはず。

そしたらVercelに上げて、ソースコードもpublicにする。
Zennの記事書いたりなんやらは来週にまわすかも。

蔀

サルベージ中に、ブロック内改行が効いていないことに気づいた。
大掛かりな修正が必要かと思っていたが、

white-space: pre-wrap;

を指定するだけで上手いこといった

蔀

タイトルが長すぎるとエラーになった。全角48文字

「証券会社とはなんだったのか（「会社が何故消滅したか　山一證券役員たちの背信」を読んで考えたこと）」

[Error: ENAMETOOLONG: name too long, access '/Users/shetommy/Dev/shetommy-com/src/pages/articles/%E8%A8%BC%E5%88%B8%E4%BC%9A%E7%A4%BE%E3%81%A8%E3%81%AF%E3%81%AA%E3%82%93%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B%EF%BC%88%E3%80%8C%E4%BC%9A%E7%A4%BE%E3%81%8C%E4%BD%95%E6%95%85%E6%B6%88%E6%BB%85%E3%81%97%E3%81%9F%E3%81%8B%E3%80%80%E5%B1%B1%E4%B8%80%E8%AD%89%E5%88%B8%E5%BD%B9%E5%93%A1%E3%81%9F%E3%81%A1%E3%81%AE%E8%83%8C%E4%BF%A1%E3%80%8D%E3%82%92%E8%AA%AD%E3%82%93%E3%81%A7%E8%80%83%E3%81%88%E3%81%9F%E3%81%93%E3%81%A8%EF%BC%89.tsx'] {
  errno: -63,
  code: 'ENAMETOOLONG',
  syscall: 'access',
  path: '/Users/shetommy/Dev/shetommy-com/src/pages/articles/%E8%A8%BC%E5%88%B8%E4%BC%9A%E7%A4%BE%E3%81%A8%E3%81%AF%E3%81%AA%E3%82%93%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B%EF%BC%88%E3%80%8C%E4%BC%9A%E7%A4%BE%E3%81%8C%E4%BD%95%E6%95%85%E6%B6%88%E6%BB%85%E3%81%97%E3%81%9F%E3%81%8B%E3%80%80%E5%B1%B1%E4%B8%80%E8%AD%89%E5%88%B8%E5%BD%B9%E5%93%A1%E3%81%9F%E3%81%A1%E3%81%AE%E8%83%8C%E4%BF%A1%E3%80%8D%E3%82%92%E8%AA%AD%E3%82%93%E3%81%A7%E8%80%83%E3%81%88%E3%81%9F%E3%81%93%E3%81%A8%EF%BC%89.tsx'
}

蔀

うーんもっと長いタイトルでも大丈夫なときあるんだけどなあ……
「證券」がダメなのかとか、（）が全角だからとか、全角スペースが入ってるからとか、
色々原因を推測して対策してみたが、解決しなかった。
（）部分を削って、タイトルを短くする方向で対応する

蔀

よく見たら、urlは出力できていて、
どうやらOSのファイル名の長さ制限に引っかかっているっぽい

蔀

Vercelでデプロイもできた。

型をちゃんと定義してないため、何回かエラー起こしたので、無理矢理ビルド通した形。

蔀

まず、

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

というワーニングが出ていたので、package-lock.jsonをリネームした。
ただこれはよく見たらワーニングだったので、これのせいでビルドがコケていたわけではなかった。
扱い方がよくわからない……
今復活させた

蔀

Type error: Binding element 'text' implicitly has an 'any' type.

Any型があったので怒られた。
'tsconfig.json'に"noImplicitAny": false,を追加して、無視させた。

蔀

Type error: Property 'title' does not exist on type 'PropertyValue'.

page.properties.Name.title[0].plain_text に対して、怒られた。
また、

Type error: Object is possibly 'undefined'.

というエラーも出た。
ローカルでこれらが動くことは確認してるので、 // @ts-ignoreで回避した。

蔀

↑以上をやって、一度コケた。
.env.localにNotion APIのキーを入れていて、.gitignoreしていたので、キーを指定しなければならなかった。
→VercelのEnvironment Variablesから設定。

以上でデプロイ完了。

蔀

SSGを指定したページは、デプロイしたタイミングで静的サイト作成が走るので、
コンテンツの更新を反映するときはリデプロイが要るみたい。

蔀

完全完了。終える。

このスクラップは2021/07/09にクローズされました