いままでブログははてなブログを利用していたのだが、勉強がてら自前で実装することにチャレンジした。 そんなに難しいことはしていないのだがやったことをまとめる。

技術選定

今回使った技術と用途は以下のとおりである。

• Next.js
  • ブログ全体を実装するフレームワーク
• Vercel
  • ブログをホストするサービス
• esa.io
  • ブログ記事の執筆を行うサービス
• Canvas
  • OGP画像の生成
• next-mdx-remote
  • MarkdownからHTMLの変換

しくみ

• 筆者はesa.ioでブログ記事を執筆する
• Vercel上でビルドされるNext.jsがAPI経由でesa.ioにMarkdown記事を取りにくる
• next-mdx-remoteがMarkdownをシリアライズしHTMLに変換
• Canvasを使って記事タイトルなどからOGP画像を生成
• Vercelが生成されたHTMLやOGP画像をホストして公開

工夫したこと

esaで記事をShip It!すると同時にデプロイ

esaには記事の更新に合わせてWebhookを送信する機能がある。これを利用してVercelのmasterブランチ再デプロイをキックして記事を公開できるようにした。

色の数を少なく

シンプルな見た目にすることで記事の内容により集中できると考えた。モノクロ + 蛍光イエローな色遣いが特徴のみんなの銀行などを参考にして、極力モノクロ + αな色遣いにした。

デスクトップ表示で幅を狭めに

デスクトップ表示にしたときに幅いっぱいに記事が広がると圧迫感と感じるうえに目の動きが大きくなってしまい記事が読みづらいと考えた。記事や画像を画面中央に寄せて画面の最大幅を狭めにすることで記事の見通しをよくした。

まとめ

普段はサーバサイドエンジニアをしているのでフロントエンドにはあまり馴染みがない。どちらかというと苦手意識のあるフロントエンドであったが、APIを通じた記事取得やMarkdownからHTMLの変換など普段は味わうことのできない領域をじっくり触ることができて楽しかった。これからも少しずつブラッシュアップしていきたい。