Gatsby で静的サイトを作ってみた - インストール編 -

WordPress、はてなブログ、Qiita などで色々書いてきましたが、色んなものを触ってみようということで、Gatsby で静的サイト (このブログ) を作ってみました。
まずは Gatsby プロジェクトを作成して表示できるところまでやってみます。

1. gatsby-cli インストール

$ npm install gatsby-cli --global

2. python 2.7 の実行環境準備

Gatsby プロジェクトを作成して npm install するときに python 2.7 が必要になるので、実行環境を整えます。
pyenv を使います。

$ pyenv install 2.7.14
Installing Python-2.7.14...

ERROR: The Python zlib extension was not compiled. Missing the zlib?

Please consult to the Wiki page to fix the problem.
https://github.com/yyuu/pyenv/wiki/Common-build-problems

BUILD FAILED

ビルドに失敗したようです。コンソールに出力されているページを参考に、下記コマンドでインストールします。

$ CFLAGS="-I$(xcrun --show-sdk-path)/usr/include" pyenv install -v 2.7.14
...
...
...
Installed Python-2.7.14 to /Users/hoge/.pyenv/versions/2.7.14

無事にインストールできました。
pyenv を使うとディレクトリ単位で Python のバージョンを切り替えられます。
ローカル環境では基本的に 3 系を使うので、Gatsby プロジェクト用にディレクトリを作り、そこだけ 2.7.14 にします。

$ mkdir gatsby_project
$ cd gatsby_project
$ pyenv versions
  system
  2.7.14
* 3.6.4 (set by /Users/hoge/.pyenv/version)
$ pyenv local 2.7.14
$ python -V
Python 2.7.14

3. Gatsby プロジェクトを作成

ブログとして使うため、ブログ用の starter を使います。
starter とは、あらかじめスタイルが整えられた、サイトのテンプレートのようなものです。
今回は gatsby-starter-personal-blog という starter を使います。

$ gatsby new michimani.net https://github.com/greglobinski/gatsby-starter-personal-blog.git
info Creating new site from git: https://github.com/greglobinski/gatsby-starter-personal-blog.git
...
...
...

ローカル環境で実行してみます。

$ cd michimani.net
$ gatsby develop
success delete html and css files from previous builds — 0.018 s
success open and validate gatsby-config — 0.018 s
success copy gatsby files — 0.029 s
success onPreBootstrap — 2.056 s
success source and transform nodes — 0.589 s
success building schema — 0.678 s
success createLayouts — 0.012 s
success createPages — 0.107 s
success createPagesStatefully — 0.028 s
success onPreExtractQueries — 0.005 s
success update schema — 0.151 s
success extract queries from components — 0.195 s
success run graphql queries — 4.106 s
success write out page data — 0.023 s
success write out redirect data — 0.001 s
Generating image thumbnails [==============================] 391/391 11.8 secs 100%

info bootstrap finished - 21.465 s

success onPostBootstrap — 0.002 s
 DONE  Compiled successfully in 12914ms                                                                         21:40:02


You can now view gatsby-starter-personal-blog in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ブラウザで http://localhost:8000/ にアクセスして確認します。

このあとは

とりあえずローカル環境でページが表示できるようになりました。 このあとは、starter の設定ファイルの変更や、実際に記事を追加していきますが、それは次回に。

comments powered by Disqus