Gatsby js でブログを作成するのは簡単だった

目次

Gatsby


最近では、hugoやhexoを始めとする、markdownで記事を記述でき、簡単にブログサイトを作成できる静的サイトジェネレーターは色々ありますが、

このような静的サイトジェネレーターでは、js等でガッツリカスタマイズしたいとき、

hugo等にwebpack環境を構築する必要があります。

参考

現状、静的サイトジェネレーターのhugoでこのブログを作成していますが、色々とカスタマイズしたくなってきたので、webpack環境を構築する必要があるなーっと思っていたところ、

それを最初から提供してくれるReact製のGatsby.jsで、ブログ環境の構築方法をご紹介したいと思います。




Gatsby.jsって?

React.jsをベースにした静的サイトジェネレーターです。 これまで、自分でwebpack環境を構築し、必要な設定ファイルや、必要なパッケージを入れていましたが、この辺の手間を一挙に省くことが出来ます。

コマンド叩けば、ジェネレートし静的なファイルを出力してくれますね。

簡単なサイトだったらこれを使えば、数十分でローンチ可能かと思います(個人差あり)。


そもそも静的サイトジェネレーターってなに?

ブラウザが解釈できるファイルは、HTML, CSS, JS, 画像ですが、これを、サーバーサイドでビルドすることにより、これらブラウザの解釈可能なファイルを生成してくれるものです。

あとは生成されたファイルをストレージに上げればwebが公開できるというものです。

従来はwebへアクセスすると、サーバーサイドへリクエストが渡り、リクエストに応じて、サーバーサイドプログラムが実行されレスポンスが返る

というものです。


サーバーレス

静的サイトジェネレーターで生成されたファイルはブラウザですべて解釈可能なため、ファイルの実行はブラウザ(クライアント)により行われるため、 効率がよく、高速にレスポンスを返すことができるというものです。

これはよく言う、サーバーレスという仕組みですが、セキュリティリスクやサーバー管理コストが抑えられますね。


前提条件


手順

参考 - Gatsby Tutorial


インストール

$ npm i -g gatsby-cli


サイト作成

$ gatsby new gatsby-site


移動

$ cd gatsby-site


実行

$ gatsby develop

コマンド知らないって言われたらPATHを確認して、sourceで読んでください

production用ビルド

$ gatsby build


productionの確認

$gatsby serve

以上で完成!

あとはpublic以下をストレージにUPすれば公開できますね


構造

基本的には、Reactをやってことがある方なら、簡単だと思います。

src/

以下に、Reactのjsファイルがあります。 最初に表示されているこのページは、

src/pages/index.js

ですね

必要に応じてここをReactにて実装していきます。


ブログにする場合

hugo やhexoのように、記事をMarkdownで記述していく場合、もともとGatsbyにスターターが用意されてるので、これ使用すると簡単です


サイト作成

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog


リソースについて

テキストや画像、ファイルやAPIなど、すべてのリソース(データ)をGraphQL API を経由して行うことになっている。

http://localhost/__graphql

にアクセスすると、確認できます。

src/pages/以下のファイルを確認するとわかると思います。


記事ファイルの設定

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
  ],
}


記事作成

.mdの記事ファイルは、

content/blog/${記事パス}/index.md

に作成します。

その際のURLは、

/${記事パス}/

となります。とってもシンプルです。

その他、ブログに必要なRSSだったり、メタタグ等の設定もこのスターターですでにやってくれていますんで、src以下のファイルを覗いてみてください。


まとめ

次にサイトを立ち上げるときはGatsbyを使ってみたいと思っています。 環境構築なしですぐにできるし、ブログ用スターターは非常に便利ですね。

hugoやhexo等、予め決まったテーマに縛られることなく、好きにデザインをいじったりすることもできますね(hugo等もできないわけではない)。 みなさんも試してみてください。

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus