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

published: 2020/9/7 update: 2021/6/28

Table of Contents

TL;DR

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

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

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

illumination-k/blog

Before

lighthouse-wordpress-top

After 2020/09/30

要件

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

ブログ機能

  • 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使うとプラグイン関係で結局ブラックボックスになりそう

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

実際の作業へのリンク

記事に間違い等ありましたら、お気軽に以下までご連絡ください

E-mail: illumination.k.27|gmail.com ("|" replaced to "@")

Twitter: @illuminationK

当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse

Other Articles

Site Map

Table of Contents

    TL;DR

    要件

      ブログ機能

      スタイル

      Google関係

      その他の希望

    Framework

    実際の作業へのリンク


当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse
Privacy Policy

Copyright © illumination-k 2020-2021.