Gatsbyのテンプレートをダウンロードする

高橋 T \ 2019/06/15

プログラミング

こんにちは。 Amazing engineでフロントエンド・サーバーサイドを担当する高橋と申します。当ブログの開発担当者です。

前回はGatsbyの環境構築を行いました。今回の内容は前回のGatsby環境構築が必須になります。まだのGatsby環境をお持ちでない方は、そちらから先に御覧ください。

今回はGatsby公式が公開しているテンプレートをダウンロードし、簡易的なブログを構築したいと思います。

Gatsbyのテンプレート

gatsby library

Gatsby公式はテンプレートを公開しています。テンプレートは数多く有り、非常に簡素なものから高機能のものまで幅広く存在します。

一からサイトを構築するのはなかなか手間です。こちらのテンプレートから好みのものを選び、サイト構築のたたき台にすることをおすすめします。

今回はこちらのテンプレートの一つであるgatsby-starter-blogテンプレートを使い、簡単にブログサイトを構築します。

その過程でGitというバージョン管理ソフトも使いますので、そちらも含めて説明いたします。

Git

git logo

Gitはバージョン管理ソフトです。主にソースコードの管理に使われており、バージョン管理ソフトのデファクトスタンダードと言える存在です。

このGitでソースコードを公開・管理するサービスとして、GitHubというサイトが有り、GatsbyやGatsbyのプラグインもここで公開されています。

Gitの環境構築

まずは Git公式サイトでGitをダウンロードします。

git

右下のパソコンのDownload *.**,* for Macを押すと、ダウンロードが始まります。

git2

これでGitの.dmgファイルがダウンロードされました。

(WindowsやLinuxの場合は違う拡張子の可能性があります)

git3

ファイルを開くと、インストーラーが起動します。各ページで任意の選択をしてインストールしてください。

※権限の関係で警告が出ることがありますので、環境設定やsudoコマンドなどで権限を付与してください。

git4
git5
git6
git7
git8
git9

これでGitがインストールできました。

git10

コマンドインタプリタを開いて、git --versionを入力してください。

git11

git version *.**.*という表示があればインストール完了です。

gatsby-starter-blogのダウンロード

gatsby-starter-blogの操作はコマンドインタプリタで行います。

任意のディレクトリでgit clone https://github.com/gatsbyjs/gatsby-starter-blog.gitを実行します。

ダウンロードが完了するとgatsby-starter-blogというフォルダができます。

続いてcd gatsby-starter-blogを入力します。これは現在の参照ディレクトリを変えるコマンドです。

npm installを入力し、package.jsonに記述されたライブラリ群をインストールします。これでGatsbyやプラグインが入力されました。

gatsby developを入力すると、Gatsbyが静的サイトを生成します。

gatsby starter blog1

http://localhost:8000/へアクセスしてください。gatsby-starter-blogテンプレートが表示されるはずです。

これでgatsbyのテンプレートがローカル環境に構築できました。

記事作成

せっかくなので記事を作成してみます。

gatsby-starter-blogでは、content内のblogディレクトリに記事が置かれています。形式はマークダウンという形式で、HTMLよりも記述性や可読性が高い軽量マークアップ言語です。

Gatsbyはこれらのマークダウンファイルを読み取り、gatsby-transformer-remarkというプラグインでHTMLに変換しています。

では、まずはblogディレクトリに移動します。cd content/blogとコマンドインタプリタに入力してください。これでblogディレクトリに移動しました。

続いてmkdir sampleと入力します。これはblog内にsampleという名前のフォルダを作るコマンドです。

続いてcd sampletouch index.mdと入力します。touch index.mdはindex.mdというファイルを生成するコマンドです。

これでファイルの準備はできました。では、いよいよ記事を入力します。

open index.mdと入力することで、Markdownファイルを開きます。何らかのソフト(Xcodeなど)が起動したら、以下をコピー・ペーストしてください。

---
title: Hello Gatsby
date: "2015-05-01T22:12:03.284Z"
---

Hello Gatsby!

続いてGatsbyを起動します。cd ../../../と入力し、gatsby-starter-blogディレクトリに移動します。

gatsby developと入力してください。Gatsbyが立ち上がりました。

hello gatsby

Gatsbyが処理を完了したら、 http://localhost:8000/へアクセスしてください。"Hello Gatsby"という記事が表示されたのが確認できたでしょうか。

お疲れ様でした。

これでGatsbyの簡易的なブログができました。