All Articles

静的サイトジェネレータでブログ制作のススメ

この度、自身のブログをWordpressから静的サイトジェネレータとホスティングサービスを用いた構成のものにリニューアルしました。 静的サイトジェネレータには「Gatsby」、ホスティングサービスには「Netlify」を使用しました。かなり使い勝手がよく、今時のフロントエンド技術を盛り込んだ 最高の構成だったので、それらに関して紹介します。

なぜWordPressからブログを移行したのか

WordPressに飽きたからです。そのせいで記事執筆が滞っていました(言い訳です)

そもそもエンジニアがWordPressでブログを運用するメリットもあまりないのかもしれません。 WordPressでブログを運用しようとすると、どうしてもサーバが必要になり(レンタルサーバやAWSなど)、毎月コストが発生します。また、個人で記事やポートフォリオを組むだけなのに、 WordPressのコアシステムを抱えることになり、さらにそこからプラグインを導入したりします。(プラグインにバグが混在したりもします)。 ただ記事や制作物を上げたいだけならば、無料のブログサービスやQiitaなどの記事投稿サービスなど色々アウトプットの仕組みはあるのでそれを利用すれば物足ります。

そんななか、なぜ静的サイトジェネレータでブログを作成しようと思ったのかというと、その圧倒的なページ遷移の速さや、カスタマイズの自由度モダンなアーキテクチャにあります(新しいもの好き!)

フロントエンドとバックエンドの分離、マイクロサービスアーキテクチャが浸透している今、サーバサイドエンジニアとして、静的サイトジェネレータでブログを新調することはとても魅力的な選択肢に思えました。

しかも、ホスティングサービスの選択やドメイン次第でブログ運用を無料でできます。私は、独自ドメインを使用しているので、コストはドメイン取得代のみです。

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

その名のとおり、静的なサイトをジェネレートしてくれるツール。つまるところ、静的なサイトを作成しようとするならば、HTML/CSS/JavaScriptをただ記述して、それを公開すればいいわけだけれども、 コンテンツ作成・公開のフローや運用をやりやすくしたのが静的サイトジェネレータです。

現在、かなり多くの静的サイトジェネレータが存在しますが、

  1. 一連の関連ファイルをGitHubで管理
  2. ローカルでファイルの更新(記事作成・デザイン作成・機能追加など)
  3. 変更をリモートリポジトリに反映
  4. CIで自動ビルド、ホスティングサービスへの自動デプロイ
  5. 公開サイトに変更が反映される

という流れが、CMSを導入しなければ一般的な流れだと思います。

多くの静的サイトジェネレータではMarkdownからHTMLへの変換機能が提供され、Markdownで記事を執筆することが可能でしょうし、なんといっても静的なサイトなので、セキュリティリスクがかなり軽減され、ページ遷移もとても早くて ストレスフリーです。

静的サイトジェネレータの一覧はこちらです: StaticGen

Jekyll(Ruby)やNext(JavaScript/React)、Hugo(Go)、Gatsby(JavaScript/React)、Hexo(JavaScript)、Nuxt(JavaScript/Vue)などが人気なようです。 その中でもこの頃はGatsbyの勢いが凄いようです。

なぜGatsbyなのか

静的サイトジェネレータの選定にはかなり迷いました。

最終的に、Go製のHugoとReact製のGatsbyの二択にまでは絞ったのですが、ここでかなり困窮しました。 結局、Gatsbyを選択したわけですが、この二つの特徴を主観と嗜好を交えてざっくりと述べます。 Hugoは調べただけで使用していないので、Gatsbyの情報が多めです。

Hugo

  • Go製というだけあり、ビルドが圧倒的にはやい
  • JavaScript製だとプラグインとして提供されるような機能が、完全にプロジェクトに組み込みで提供されている

Gatsby

  • 今時のフロントエンド技術をぎゅっと詰め込んだ構成
  • 多くの機能がプラグインとして提供され、yarn,npmといったJavaScriptの強力なエコシステムを利用可能
  • ファイルを保存すれば、自動的にローカルで変更が反映されるので、執筆途中の記事の変更、デザイン変更をリアルタイムに確認可能
  • ページ遷移の速さに最適化されており、本当に爆速

ブログを制作しながら最新のフロントエンド技術を学びたい、自由にカスタマイズしたいという人はGatsbyがかなり良い選択肢になると思います。 Gatsbyでは新しいフロントエンド技術をかなり使用されています。私は、「gatsby-starter-lumen」というテンプレートを使用しているのですが、そこで使用されている技術も含めるとかなりの数になります。

毎年話題に上がるDeveloper Roadmapの2019年度版Front-end項目をベースに、どれだけの技術がgatsby・gatsby-sterter-lumenに含まれているのか確認してみましょう。

Developer Roadmap

  • HTML
  • CSS
  • JavaScript
  • Package Managers
  • CSS Pre-processors ---Sass(gatsby-starter-lumen)
  • CSS Frameworks
  • CSS Architecture ---Bem(gatsby-starter-lumen)
  • Build Tools

    • Task Runners
    • Module Bundlers ---Webpack(gatsby)
    • Linters and Formatters
  • Framework ---React.js(gatsby)
  • CSS in JS ---CSS Modules(gatsby)
  • Testing your Apps ---Jest(gatsby-starter-lumen)
  • Progressive Web Apps ---(gatsby)
  • Type Checkers
  • Server Side Rendering ---React.js(gatsby)
  • Static Site Generators ---gatsby(gatsby)
  • Desktop Applicaions
  • Mobile Applications
  • Web Assembly

全体の半分以上の技術が含まれていることがわかりますね。

上記に加えてgatsbyでは、サーバサイドでも注目されている技術としてGraphQLがコア技術として使用されています。

gatsbyでブログを構築すれば、少なくともこれだけの技術を実践で学ぶ下地が整っています。カスタマイズもしやすく、自身で新しく機能を実装してプラグインとして公開することもできます。

私は、フロントエンド技術に対する興味と、カスタマイズ製が決め手となり、Gatsbyを選びました。

逆に、ReactやGraphQLといったフロントエンド技術に興味がなく、普通に記事を執筆したいだけの人や少しでもビルド時間を早くしたい人はHugoがいいかもしれません。

ただ、Goが好きだからという理由でHugoを選ぶのは少し注意が必要かもしれません。なぜかというと、プラグインが中心のJavaScriptを使ったジェネレータとは違い、Hugo自体は十分な機能をすでに内包している状態であり、 Goでカスタマイズするのは難しそうだからです。(Goでのハッカー魂がある人はむしろメリットかも?)かといって普通に記事を執筆するだけではGoの知識はそこまで要求されないようです。

ブログの大枠構築から記事執筆、公開まで

私は、フロントエンドに関しては最低限のHTML/CSS,Bootstrap(CSS Framework)とJavaScriptの知識しかないのですが、とりあえずブログを公開するまでは特に苦労することなくできました。

  1. まずは、公式チュートリアルを最初から最後までやりました。

  2. その後、Gatsby Startersから、ひとつスタートテンプレート選択し、NetlifyとGitHubの連携を行います。

  3. 自身のリポジトリをローカルにクローンし、自由にカスタマイズ、記事執筆してリモートリポジトリに変更を反映させます。(CIによる自動ビルド・デプロイが完了すれば公開サイトに変更が反映されます)

  4. カスタムURLを使用する場合やNetlifyCMSを使用する場合は、別途Netlifyの管理画面で設定する必要があります。

まとめ

運用を開始して数日経ちますが、使用感・パフォーマンスともにとても満足しています。

静的サイトジェネレータでのブログ作成(特にGatsby)は、新しいフロントエンド技術に興味がある人ページ遷移を早くしたい人色々カスタマイズしたい人にはおすすめできます!