個人サイトにブログ機能つける
蔀大方針としては二つあった。
- Markdownファイルをリポジトリに直で埋めこむ
- Notionで記事をホスティングして、個人サイトからアクセスする
1.だとNext.jsのblog-starterを使えば、さほど難しくないと思われるが、
記事を更新する場合にいちいちエディタで直編集しなければならない煩わしさがある。
Notionのヘビーユーザーなので、2.だと嬉しい。
→理想を追って、Notionから記事を取得する方向を模索する
蔀Notion APIはpublic βが公開になっている。
数ヶ月前とかだっけ？
notion-blog等のフレームワークは非公式APIを使っている。
公式APIだとフォーマットがだいぶ違うので、だいぶ修正する必要がある。
返してるjson見たが、Markdownでそのまま取得することはできない。
ブロックの配列として返すので、受けるNext.js側で変換処理が必須。
自分でガリガリ書いて書けなくはないけども、出来はあまりよくないことが容易に予想できた。
蔀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'
}
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を指定したページは、デプロイしたタイミングで静的サイト作成が走るので、
コンテンツの更新を反映するときはリデプロイが要るみたい。
蔀完全完了。終える。