Next.jsでブログを作ってみた

TL;DR

WordPressが激重だしこんなに機能はいらないな、と思ったので、1からブログでも作るか、と思いました。 後、VScodeで記事を書きたいので、markdownとかそのへんをpushして終わりにしたい。コピペしたくない。 WordpressはPHPがわからなくてカスタマイズが進まない。ブラックボックスが多すぎる。

Wordpressのトップ画面はこんな感じなので、これよりはよくしたい。あとWordpressはAMPにフルでは対応できていない(数式とか)なので、そのへんも頑張りたい。

現状のブログコードはこちら

illumination-k/blog

Before

lighthouse-wordpress-top

After 2020/09/30

lighthouse-next-blog

要件

ということで、要件としては、以下のものがほしいです。とはいえ全部できてから公開だと永遠に終わりそうにないので、順次作成していきます。

ブログ機能

  • Verticalでホスティング
  • カスタムドメイン
  • markdownとmdxで記事を書いてGithubにpushすれば自動で更新される。
  • Toc機能
  • Qiitaみたいなサイドバー
  • category別に別れた記事一覧
  • 記事の検索機能
  • tag機能
  • gitと連動したhistory機能
  • 連載機能(連載タグがついた記事が順番にページネーションできる、みたいな。長い記事を書きがちなので)

スタイル

  • material-ui
  • Prism.jsでのcode syntax
  • amp-mathmlでの数式
  • Github markdown css

Google関係

  • SEO
  • Google Analytics
  • AMP対応
  • PWA対応
  • Google Adsense

その他の希望

  • ある程度の理解を伴った上で作成できる

Framework

個人的によく触っているのがReactなので、Reactのフレームワークから選びたいです。よく話に出てくるのは

  • Gatsby
  • Next.js

かなあ、と思います。ブログ作るだけならGatsbyが有力だと思うんですが、以下の理由からnext.jsを選びました。

  • AMP対応が楽そう
  • 今後に活かせそう
  • 構成がシンプルで好き
  • Gatsby使うとプラグイン関係で結局ブラックボックスになりそう

ということで、ブログ作っていきます。ついでなので、悪戦苦闘している分を記事にして残しておきたいと思っています。

実際の作業へのリンク

この記事に関するIssueをGithubで作成する

Read Next