All Articles

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

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

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

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

静的サイトジェネレータを使用したコンテンツの作成から公開までは以下のような流れが一般的だと思います。

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

ビルド時に、APIやGraphQLを使用してデータを取得し、HTMLを生成します。生成したファイルをNetLifyなどのホスティングサービスに配置しておくことで、サーバーレスでサイトを運用します。 このような仕組みを「JAMstack」といいます。(詳細は下記のページを参照) JAMstackの公式ページ https://jamstack.org/

フロントエンドとサーバサイドが疎結合となり、サーバに依存しません。そのため、CDNを利用したスケールやレンダリング時間の短縮によるパフォーマンスの向上や、セキュリティの強化を図れます。 WordPressのような従来のCMSは、レンタルなどして用意したサーバにCMS関連フォルダやデータベースを配置し、リクエストの度に動的にページを生成します。 画面をプレビューしながら、誰でも手軽にコンテンツを作り込んでいけることが魅力ですが、サーバやプラグイン管理の煩雑さ、パフォーマンスチューニングなど、運用面で欠点が多く存在するのも事実でしょう。 静的サイトジェネレータでは、従来のCMSの欠点の多くを解消できる特徴を持っています。 現在、多くの静的サイトジェネレータが存在しますが、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に含まれているのか確認してみましょう。 黒字が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を選ぶのは少し注意が必要かもしれません。Hugo自体は十分な機能をすでに内包している状態なので、プラグインがnpmで管理されるGatsbyよりも Goでカスタマイズするのはハードルが高いと言えるでしょう。普通に記事を執筆するだけではGoの知識はそこまで要求されないようです。

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

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

  1. 公式チュートリアルを最初から最後までやる

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

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

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

まとめ

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

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

Published 8 Apr 2019

Software Engineer, I love tech! anime!Yu-ki Tanaka on Twitter