去年あたりから、どうにも運営している個人ブログと、それなりにアクセスのあるLifehacking.jpの管理作業を苦痛に感じることが多くなっていました。

note のように手軽に執筆できるサイトがあるのに、個人ブログときたら毎週のようにプラグインの更新がありますし、サーバーのバックアックがとれているかと気を使いますし、なにより10年分のゴミがたまってデータベースも肥大化して手がつけられない状態でした。

そうしたわけもあって、かねてから興味をもっていた「静的サイトジェネレーター」の仕組みを使い、そこにブログを移設してみました。

静的サイトジェネレーターとは

静的サイトジェネレーターは古くから存在するもので、そもそも最初のブログエンジンとして注目されたMovable Typeも、Perlで書かれた静的ジェネレーターだったといえます。私自身、かつてはPerlで XML ファイルからホームページを自動的に作成する仕組みを作った記憶もあります。

最近注目されている静的サイトジェネレーターには、Hugo、Next.js、Gatsby、Hexoなどさまざまあります。それらが注目されている理由として、以下を挙げられます：

1. 小規模なサイトだと、WordPressのようにデータベースからコンテンツを取得してphpでレンダリングするという仕組みは無駄に処理コストが高く、セキュリティの心配が絶えないから

2. WordPressだと記事を執筆するCMSとレンダリングをしているのが同じサーバーになりますが、これを分離するほうが自然な場合が多くなってきたから

3. 過去と比べて静的なサイトでもJavaScriptなどを使ってできること増えてきた、また画像などはCDNを通して届けることで高速化するのが一般的になったから

これまでこうした視点はウェブ技術に詳しいエンジニアにとって身近なものでしたが、ブログという仕組みのうえでものを書くブロガーにとっても、サーバーの保守管理というオーバーヘッドを取り除き、WordPressよりも高速に記事を執筆し、表示させることができるというのは大きな利点です。

静的サイトジェネレーターがかなり成熟してきて、過去には少し無理して実装しなければいけなかったことも、いまではかなり簡単になってきました。だからこそいま、WordPressが大きすぎる負債になるまえに移行してみようと考えたのです。

本連載の前提と目標

これからいくつかのブログ投稿で紹介したいのは、Goという言語で書かれた Hugo という静的サイトジェネレーターを使って記事数にして300から2500程度のブログを静的サイトに変換するプロセスの手順についてです。

静的サイトジェネレーターを使っているエンジニアのブロガーは多いものの、2020年現在、ふだん技術的なこととは関係のない旅や本の話題について書いている一般的なブログでこうした取り組みをしたケースは少ないと思いますので、一つの実例として挙げておきたいと思います。

そうした個人的な背景もあり、この連載ではいくつかの前提があります。

1. Hugo についての基本から説明しますが、Hugo のすべてを解説するわけではありません。わたし個人のブログを移行する上で最低限のことしかしていません。

2. html, css, xml, Python などについての基本的知識が前提となります。WordPressと違ってボタンを押して簡単にインストールというわけでにはいかないからです。とはいえ、私ていどのやることですので、そこまで難しくありませんし、移行したほうが簡単にできることが数多くあります

3. macOS上で、ターミナルを利用して作業します

目標としては、すでに存在するWordPressブログの資産を Hugo に移し替えるのが前半の到達点、既存のHTMLテンプレートを使用して自分のブログのテーマを作成するのが後半の到達点となります。

この連載がWordPressから移行するあなたの参考になれば幸いです。