Learn Something New

技術ブログをGatsbyJSで作った

January 19, 2019

表題の通り、技術ブログをGatsbyJSで作りました。

GatsbyJSはReact.js製の静的サイトジェネレーターツールでGitHub Pagesを使い、簡単にWebサイトを公開することが可能です。

背景

これまでも様々なブログサービスやWikiなどに技術情報をまとめていたのですが、クオリティの高さや公開する場所の適切さなど余計なことを考えてしまい、アウトプットの障壁になっていたので、自前でブログをホスティングすることにしました。

使用している技術

  • GatsbyJS
  • Netlify

同じく静的サイトジェネレーターであるHugoとどちらを使うか悩みましたが、自分のスキルセットにあうGatsbyJSのほうが、管理がしやすいと考えて採用しました。

ホスティングはNetlifyを使用しており、GitHubにプッシュすると、Netlifyでビルドして、そのまま公開する仕組みとなっています。

カスタマイズしたところ

  • 日本語文章の表示調整
  • ソースコードのハイライト

GatsbyJSのブログスターターキットであるgatsby-starter-blogをベースとして、とりあえずブログとして公開するためにカスタマイズを行いました。

日本語文章の表示調整ですが、基本的にはGatsbyJS向けに公開されているテーマは英語圏で使われる前提のものがほとんどであり、日本語の文章を表示させると、不格好な感じになります。この問題はプログの文字表示をコントロールしているTypography.jsにGitHubテーマを適用することで解決できました。

ソースコードのハイライトに関しては、デフォルトで対応していなかったので、Prism.jsのGatsbyJSプラグインGitHubテーマを追加して、うまく表示させるようにしました。

運用で辛そうなところ

  • テーマとコンテンツを一緒に管理しているため、テーマの差し替えやテーマの変更の追従が困難

GatsbyJSでは以下のようにscaffoldで簡単にブログテンプレートを作成できます。一方で、ブログ記事とテーマを同じリポジトリ内で管理するため、テーマ側に変更が生じた場合にそれを取り込むのが困難となっています。

# gatsby new [ブログ名] [テーマURL]
$ gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

HugoではテーマをGitのサブモジュールとして別に管理しているため、テーマの変更の取り込みやテーマの差し替えが簡単にできます。GatsbyJSでもいずれこの問題を解決する手段が提供されると思います。

不具合が出ているところ

  • 画像表示

現時点では画像の表示ができていません。scaffoldを実行した時点では画像表示できていたので、カスタマイズしているうちに壊れてしまったものと思われます。ブログで画像表示できないのは致命的なので直したいです。

最後に

継続的にブログにアウトプットできるといいですね。プログラミングは好きで定期的にGitHubに何かしら上げていますが、文章を書くのは苦手でこれまではあまりやってこなかったので、少しずつ慣れていきたいです。


Kentaro Matsushita

Kentaro Matsushita
金沢で働くソフトウェアエンジニアです。最近はAWS、Node.js、Javaをよく触ってます。