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

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

DEVELOPMENT

web
node
Gatsby

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

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

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

参考

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

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

Gatsby.jsって?

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

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

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

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

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

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

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

というものです。

サーバーレス

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

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

前提条件

  • node環境
  • React経験 あり

手順

参考 - 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等もできないわけではない)。 みなさんも試してみてください。

🙏よかったらシェアお願いします🙏
うかい / 株式会社UKAI
うかい@エンジニア出身CEO株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

ホームページ作成、ECサイト掲載、商品ブランディング等、ご依頼やご相談は


CONACT
入力して下さい
WRITTEN BY
うかい / 株式会社UKAI
うかい@エンジニア出身CEO株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。2020年コロナウイルスの影響で、ゲストハウスとカフェを閉店。現在は、ECサイト新規リリース、運営と、黒毛和牛の牝牛ブランディングをしメディア立ち上げ。牝牛のお肉と、独自食品開発した食品をまもなく販売開始予定。詳細はこちらから

COPYRIGHT © 2021 UKAI CO., LTD. ALL RIGHTS RESERVED.