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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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が静的サイトを生成します。

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 sample、touch index.mdと入力します。touch index.mdはindex.mdというファイルを生成するコマンドです。

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

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

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

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

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

お疲れ様でした。

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