Gatsby で静的サイトを作ってみた - インストール編 -
2018-10-15WordPress、はてなブログ、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 とは、あらかじめスタイルが整えられた、サイトのテンプレートのようなものです。
今回は
<strong>gatsby-starter-personal-blog</strong>
という 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