新しくブログを作ってみた
このブログの話。勉強したことや日常のつぶやきを書き溜める場所が欲しいなと思ったので、ブログを作ってみた。
作ったきっかけ
最近、職場でマネージャーになったことでコードを書く機会がめっきり減ってしまった。元々技術に長けていたわけではないのに、余計に手を動かさなくなるので少なからず不安になった。
また、今までの主戦場がサーバサイドであり、いわゆるモダンなフロントエンド技術に触れてこなかった(そして今の仕事でも触れていない)。ReactやVue.jsどころかES2015すらほとんど経験がない始末。これはまずい。
と、あれこれ不安になったので勉強がてらにモダンっぽいものを試しに使ってみることにした。
使っているもの
フレームワークはNext.jsで、ホスティングはVercelの無料プランで済ませている(年間のドメイン代を払うだけで良いのはとても経済的)。コードと記事原文はGitHubで管理しており、ActionsでVercelと連携しているので、Pull Requestのマージをトリガにしてビルドと本番環境反映まで行われる。
Next.jsのチュートリアルがMarkdownで書かれたブログアプリを作るものだったので、チュートリアルの完成版を育てる形で変更を加えていった。
最初はMicroCMSを使って記事管理をしようと思っていたのだけど、管理対象のサービスが増えてしまうのがどうも性に合わないのでGitHubに集約させることにした。
チュートリアルから変えたところ
主な追加実装を箇条書きにしてみる。
- Tailwind CSSの導入
- サイトデザインの調整
- 記事抜粋を記事一覧に表示する
- サイトマップの自動生成
- カテゴリの導入
- 記事中のサイト内リンクをLinkコンポーネントに変更
- 記事中の画像をImageコンポーネントで表示
- ZennのMarkdownパーサ & シンタックスハイライトを導入
- Google Analyticsの設置
まだまだ課題はあるものの、個人ブログとして最低限必要な機能は実装できたかなと思う。TypeScriptに書き直す大仕事は熱が冷める前にやっておきたいところ。
参考にしたサイト
Next.jsを使ってブログを作っている方はたくさんおり、コードをGitHubで公開している人も多いのでとても助けられた。
中でもrakuishiさんとmiyaokaさんのブログは度々参考にさせていただいた。
感想
自分で作るのは大変だけど楽しい！(小並感)
あと、Next.jsのSSGで実現されるページ遷移がサクサクで気持ちいい。今までWordPressでしかブログを作ったことがなかったけど、体感の表示速度は天と地くらいの差がある。
最後に、このブログでは収益性やPVは一切気にしないので、端的な内容でもいいので日々学んだことだったり思ったことをアウトプットしていくようにする。