blog by izumiz easy-notion-blogからの移行
以前、easy-notion-blogを利用していたため、記事のコンテンツはそのままで、ブログプロジェクトをastro-notion-blogに移行しました。
年末年始にブログを更新することを目標としていたため、まだリンクが壊れている個所やデザインが崩れている個所などあるので、今後、地道に改善していく予定です。
自分で変更を加えたところ
- pnpm の導入
- prettier, tsconfig, VSCodeにて保存したときに自動でフォーマットされるように変更
- lefthook導入による、コミット前チェック
- ブログデザインの変更
- ブログタイトルから og:image の生成
pnpm の導入
pnpmは、ディスク容量の節約やインストールが速いなどの利点があります。
特に、いろいろな実験プロジェクトを作る場合、pnpmを使うことでディスク容量の削減とインストール速度の向上が期待できるはずです。
デプロイ先であるCloudFlare Pagesでも pnpm コマンドは正常に利用することができました。
prettier, tsconfig, VSCodeでのsaveOnFromatの設定
prettier - セミコロンを強制に変更。
tsconfig - path エイリアスを設定し、import の アドレスパスを変更
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@lib/*": ["src/lib/*"],
"@styles/*": ["src/styles/*"]
}以下のように、相対位置を気にせずに import することができます。
import BlogTagsLink from '@components/BlogTagsLink.astro';
import styles from '@styles/blog.module.css';以下のように、.astro と .ts の拡張子に対して、 prettierでフォーマットするように指定。
さらに、Cmd + Sなど、保存されたとき自動でフォーマッタが走るように設定。
この設定がかなり重要で、フォーマットを考えることなくプログラムを書くことができ、かなり快適に作業を進めることが可能。
{
"prettier.documentSelectors": ["**/*.astro"],
"[astro]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}lefthook の導入
lefthookは、Go言語製の高速に動作するGitフックマネージャーです。
かなり前はhusky, lint-stagedを利用していたのですが、最近 lefthook を偶然知り導入。
コミット前に、pnpm run lint と pnpm run format が並列で動くようになっています。（これ、並列にする意味あるのか？）
lintが失敗すると、コミットが中断されます。
pre-commit:
parallel: true
commands:
lint:
run: pnpm run lint
format:
run: pnpm run formatブログデザインの変更
- サイドのメニューを左から右へ
- コンテンツの最大幅の設定（改善の余地あり）
- フォントの変更
また、デフォルトでは .astroの<style></style> 内に記述されていますが、.cssファイルとして書いてimportしています。
ブログタイトルから og:image を生成
70_10さんのブログを参考に、実装しました。
今後
今年は、記事もブログサイトもコンスタントに更新できるようにしていきたい。
og:imageの改善、aboutページの作成、ダークテーマ対応などを予定しています。