DEVELOPMENT
目次
最近では、hugoやhexoを始めとする、markdownで記事を記述でき、簡単にブログサイトを作成できる静的サイトジェネレーターは色々ありますが、
このような静的サイトジェネレーターでは、js等でガッツリカスタマイズしたいとき、
hugo等にwebpack環境を構築する必要があります。
▶ 参考
現状、静的サイトジェネレーターのhugoでこのブログを作成していますが、色々とカスタマイズしたくなってきたので、webpack環境を構築する必要があるなーっと思っていたところ、
それを最初から提供してくれるReact製のGatsby.jsで、ブログ環境の構築方法をご紹介したいと思います。
Gatsby.jsって?
React.jsをベースにした静的サイトジェネレーターです。 これまで、自分でwebpack環境を構築し、必要な設定ファイルや、必要なパッケージを入れていましたが、この辺の手間を一挙に省くことが出来ます。
コマンド叩けば、ジェネレートし静的なファイルを出力してくれますね。
簡単なサイトだったらこれを使えば、数十分でローンチ可能かと思います(個人差あり)。
そもそも静的サイトジェネレーターってなに?
ブラウザが解釈できるファイルは、HTML, CSS, JS, 画像ですが、これを、サーバーサイドでビルドすることにより、これらブラウザの解釈可能なファイルを生成してくれるものです。
あとは生成されたファイルをストレージに上げればwebが公開できるというものです。
従来はwebへアクセスすると、サーバーサイドへリクエストが渡り、リクエストに応じて、サーバーサイドプログラムが実行されレスポンスが返る
というものです。
サーバーレス
静的サイトジェネレーターで生成されたファイルはブラウザですべて解釈可能なため、ファイルの実行はブラウザ(クライアント)により行われるため、 効率がよく、高速にレスポンスを返すことができるというものです。
これはよく言う、サーバーレスという仕組みですが、セキュリティリスクやサーバー管理コストが抑えられますね。
前提条件
- node環境
- React経験 あり
手順
インストール
$ 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等もできないわけではない)。 みなさんも試してみてください。
株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから