Gatsbyでブログを開設する① 【インストール編】

こんにちは。yumenomatayumeです。

静的サイトジェネレーターのGatsbyJSを使用してブログを開設しましたので、
それまでの過程を3回に分けて書いていきたいと思います。

実際のソースコードはこちらになります。

• Gatsbyでブログを開設する① 【インストール編】 <- 本記事
• Gatsbyでブログを開設する② 【デザイン編】
• Gatsbyでブログを開設する③ 【デプロイ編】

目次

• GatsbyJS公式サイトの Get Started を進める

  • gatsbyのインストール
  • 使用するテンプレート選択
  • ソースコードのダウンロード
  • 開発用サーバ起動
  • ブログのbuild
• さいごに

GatsbyJS公式サイトの Get Started を進める

Get Startedを見ながら進めてみます。

gatsbyのインストール

npmでgatsbyをinstallします。

npm install -g gatsby-cli

これでgatsbyコマンドが使用できるようになりました。

使用するテンプレート選択

Get Startedでは、gatsby-starter-hello-worldと言うテンプレートが使用されています。
デフォルトのページは以下のようにHello world!のテキストだけ記載されたシンプルなものになっています。

※Demoサイトはこちらです。

ブログのような自分好みのテンプレートを使用したいので、
gatsby-starter-calpa-blogを使って、ブログを開設します。

※ちなみにStarter Libraryから好きなTemplateを探すことができます。

ソースコードのダウンロード

以下のコマンドを実行することで、blogディレクトリ（名前は任意）にソースコードがダウンロードされます。

gatsby new blog https://github.com/calpa/gatsby-starter-calpa-blog

ちなみに、リポジトリ直下は以下のファイルで構成されています。

ymmmtym@macbook-pro ~/blog $ tree -L 1
.
├── CODE_OF_CONDUCT.md
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README-zh-Hans.md
├── README-zh-Hant.md
├── README.md
├── data
├── gatsby
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── netlify.toml
├── node_modules
├── package.json
├── public
├── src
├── static
├── stylelint.config.js
└── yarn.lock

開発用サーバ起動

デフォルトの状態で開発用のserverを立ち上げて、 webブラウザでアクセスしてみます。

cd blog

gatsby develop

http://localhost:8000にアクセスすると以下の画面が表示されています。

ブログのbuild

buildコマンドで静的ファイルの作成ができます。

gatsby build

publicディレクトリに静的ファイルが作成されるので、
これをproduction環境のWebサーバにデプロイすればブログが公開できます。

また、serveコマンドでproduction環境としてbuildした内容をローカルで確認できます。

gatsby serve

この場合は、http://localhost:9000にアクセスしてWebサイトを確認できます。

さいごに

Gatsbyのgatsby-starter-calpa-blogテンプレートを使用して、 ローカル環境でブログを立てることができました。

次回は、デフォルトの状態から自分向けのサイトになるように デザインの部分を修正していきたいと思います。