Gatsbyのインストールからスターターの導入まで
December 10, 2019
はじめに
Gatsbyでブログを作成しつつ手順や気付いた点などをまとめていきます。 想定読者はjavascriptやReactの概要等は把握している、規約より設定派の方です。 ある程度まとまったら、まとめ記事を作成予定です。Node.js(anyenv使用)のインストール等もそのうちまとめます。
Gatsbyのインストール
# gatybyのインストール
$ npm install -g gatsby-cli
# 調べる時の基本のhelp。
$ gatsby -h
Usage: gatsby <command> [options]
コマンド:
gatsby develop Start development server. Watches files,
rebuilds, and hot reloads if something
changes
gatsby build Build a Gatsby project.
gatsby serve Serve previously built Gatsby site.
gatsby info Get environment information for debugging and
issue reporting
gatsby clean Wipe the local gatsby environment including
built assets and cache
gatsby repl Get a node repl with context of Gatsby
environment, see
(https://www.gatsbyjs.org/docs/gatsby-repl/)
gatsby new [rootPath] [starter] Create new Gatsby project.
gatsby plugin Useful commands relating to Gatsby plugins
gatsby telemetry Enable or disable Gatsby anonymous analytics
collection.
オプション:
--verbose Turn on verbose output [真偽] [デフォルト: false]
--no-color, --no-colors Turn off the color in output
[真偽] [デフォルト: false]
--json Turn on the JSON logger [真偽] [デフォルト: false]
-h, --help ヘルプを表示 [真偽]
-v, --version Show the version of the Gatsby CLI and the Gatsby
package in the current project [真偽]
ブログスターターの導入
Gatsbyには導入用にスターターというものが数多く用意されています。 公式が集めたスターターリストがあり、標準ではgithubでのスター数でソートされているので、こちらから選ぶのが便利でしょう。 今回は人気もあり、多くの技術記事などで採用されている、gatsby-starter-blogを採用します。スターターの公式ページにある解説と依存関係は情報収集の基盤の一つとなります。
# gatsby new [rootPath] [starter]
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd blog
$ gatsby develop #ポート番号は-pオプションで指定可能。
ブラウザでローカルホストを開けばスターターの初期設定通りのページを見る事が出来ます。
主要参考URL
https://www.gatsbyjs.org/tutorial/
https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog
https://github.com/gatsbyjs/gatsby-starter-blog
https://qiita.com/abouch/items/ab7694e64f011ee2b265
https://takumon.com/2018/09/10/