Wordpressサイトを Next.js + GitHub Actions + Netlify でリニューアルしました

投稿日時: 2023/03/12 22:45

最終更新日時: 2023/03/12 22:45

こんにちは。ざるご (@zalgo3) です。

レガシー CMS から静的サイトジェネレーターへ

当サイトはもともと Wordpress という CMS (Contents Management System) で構築されており、エックスサーバーにデプロイされていました。

Wordpress サイトは、ほとんどコーディングを必要とせず始められる上に、はてなブログや note などの既存のブログサービスを使うよりも細かい調整が効きやすい、という面で、良い点も多かったです。

しかし、UI では手の届かないような細かい調整をしようと思うと、結局コーディングが必要になるし、そのときに無駄に PHP に手を加えないといけないのには、一定のしんどさを感じていました。

また、プラグインなどでゴリゴリ機能を追加すればするほど、サイトの表示速度が低下していくのにも辛さを感じていました。

そこで、昨今は単にリクエストに応じて静的なコンテンツを配布するJamstackなる構成が流行っているというのを聞いていたのもあって、モダンなフレームワークを使ってすべて自前でブログのシステムを作ってしまうことにしました。

具体的なフレームワークとしては、Next.jsを使っています。Next.js は、React.js のサーバーサイドレンダリングとしては、デファクトスタンダードとなっているフレームワークです。

モダンなフロントエンドといえば React.js vs Vue.js というイメージでした。どちらを選ぶかは迷いどころでしたが、Stack Overflow Trendsでは React のほうが上位ということで、React.js を選択しました。

また、作ったアプリケーションの公開には、静的サイトを簡単にホスティングできるサービスであるNetlifyを使いました。

工夫した点など

細かい技術的な工夫などを話せばキリがないので、かいつまんで書きます。

すべての記事を Markdown で書けるように

Markdown は、以下のような書きやすく読みやすい記述方式で、文章構造を表すことのできる軽量マークアップ言語です。

## 見出し

すごく面白い文章

-   すごくためになる箇条書き 1
-   すごくためになる箇条書き 2

Markdown は、はてなブログなどの大手ブログサービスでもサポートされており、サクッと文章を書くのには本当に便利な記述形式です。

このブログでは、next-mdx-remoteというパッケージを使い、posts/[slug]/post.mdという名前の Markdown を記事ごとに配置するだけで、ブログ記事が生成されるという仕組みを採用しています。

こうすることで、新しい記事を公開したり編集したりするためだけに、いちいち TypeScript のソースコードを編集する必要はなくなります。

数式やソースコードの表示に対応

rehype-prismや、rehype-math, rehype-katexなどのパッケージを使うことで、先程の Markdown ファイルの中に

-   `print("Hello World.")`
-   $f(x) = 0$

などと書くと、

• print("Hello World.")
• $f(x) = 0$

などと、ソースコードや数式が表示されるようにしました。

GitHub Actions によるビルド →Netlify へのデプロイ

Netlify には、GitHub リポジトリと連携するだけで、Next.js のビルドをする仕組みがもともと提供されています。

基本的にはその機能を使えば十分なのですが、今回は、GitHub Actions でビルドをしてから、Netlify CLI をつかって Netlify にサイトをデプロイする仕組みを採用しています。

なぜなら、Netlify では、月間 300 分までのビルドは無料で行えるものの、それを超えると 500 分ごとに 7 ドルの料金が発生するためです。

GitHub Actions は、パブリックリポジトリに対しては、なんと無制限に無料でビルドを行うことができます。

どのみちソースコードは公開するつもりだったので、パブリックリポジトリであるデメリットは私には一切ありません。

これはぜひ活用させていただこうということで、ビルドは GitHub Actions、デプロイのみ Netlify を使うことにしました。

独自ドメイン化、Google Adsense や Google Analytics タグの配置など

もともとの Wordpress サイトでやっていたことなので、このあたりは当然と言えば当然なのですが、対応しています。

おわりに

フロントエンドは未学習だったのですが、博士課程を卒業し、データサイエンティストとして働き始めたのもあり、そこそこコーディングには慣れてきていたのも幸いして、なんとかある程度形にすることができたので、こうして記事を書いてお披露目をすることにしました。

まだ未完成な部分は多いものの、思い立ったらすぐ新しい機能をどんどん追加できるのは、自分でコーディングする大きな利点ですね。

静的サイトジェネレーターを使うことで、表示速度が爆速になり、SEO の面でも有利になる (はず) です。

せっかくシステムを作ったので、これを機にちょこちょこコンテンツも配置していきたいですね。あまり期待せず待っていてくださいｗ

ソースコードは https://github.com/zalgo3/zalgo-official.com で公開しています。興味のある方はどうぞ。

それではまた～