Help us understand the problem. What is going on with this article?

Gatsby.js + Netlify + Githubを使ってJAM Stackなブログを作成・公開する

はじめに

Gatsby.jsという静的サイトジェネレータで技術ブログを作成し、Netlifyというホスティングサービスでホスティングする流れを説明します。
こんな感じのブログを作るための手順を説明していきます。
ちなみにAudits(Chromeのパフォーマンス測定機能)でスコアを測った結果こんな感じになりました。
スクリーンショット 2019-08-18 16.20.39.png

Gatsby.jsとは

静的サイトを高速に構築することができるReact製の静的サイトジェネレータ。
細かい内容に関しては公式ドキュメントや、以下の記事が参考になります。
参考サイト:Reactベース静的サイトジェネレータGatsbyの真の力をお見せします

今回はgatsby-starter-lumenと言うブログテンプレートを使用します。

スクリーンショット 2019-08-17 15.30.33.png

Netlifyとは

Githubと連携し、連携したソースをホスティングしてくれる静的Webホスティングサービス
基本無料
参考サイト:高機能ホスティングサービスNetlifyについて調べて使ってみた

手順

1.NetlifyにGatsbyのプロジェクトをデプロイ

1-1.gatsby-starter-lumenにアクセスし、下記の「Deploy to netlify」をクリックします。

スクリーンショット 2019-08-17 22.49.43.png

1-2.Githubとアカウント連携を行います。

NetlifyはGithubのリポジトリを連携し、そのリポジトリのソースをホスティングするため、Githubのアカウント連携を行う必要があります。
スクリーンショット 2019-08-17 22.52.31.png

1-3.リポジトリ名を決めます。

リポジトリ名を決めて、Save&Deployを押下すると、Githubにgatsby-starter-lumenのリポジトリが作成され、Netlifyでホスティングが開始されます。
注意点としてはリポジトリの公開設定がpublicに設定された状態で作成されるので、privateにしたい人はGithub上で設定を変更する必要があります。
image.png

1-4.動作確認

デプロイ後にNetlifyのログイン後の画面にURLが表示されていると思うので、実際にアクセスし表示確認を行う。
サイトを変更したい場合はSite settings -> Change site nameから変更可能
スクリーンショット 2019-08-17 23.02.22.png

2.ローカル環境構築

2-1.Githubからソースをclone

1-3の手順でGithubにリポジトリが作成されているので、Cloneしてください。

2-2.Git, Node, npm, gatsby-cliのインストール

下記のリンクを参考にGit, Node, npm, gatsby-cliを導入してください。

参考:[Set Up Your Development Environment](https://www.gatsbyjs.org/tutorial/part-zero/

2-3.ローカル環境の動作確認

Githubからクローンしたディレクトリに移動し、以下のコマンドを実行します。

cd ●●● # Gatsbyのプロジェクトディレクトリ
npm install
gatsby develop # 開発サーバを起動

localhost:8000にアクセスし、ブログが表示されるか確認

3.プロフィール変更や記事の投稿手順

3-1.サイドメニューの情報変更

サイドメニューのプロフィールを自分自身の情報に書き換えていきましょう。
スクリーンショット 2019-08-17 23.27.33.png
プロフィール情報はconfig.jsで管理しているため、各パラメータを書き換えていきます。
連絡先を示すアイコンを消す場合はconfig.jsとuse-site-metadata.jsから該当のパラメータを削除する必要があります。
以下のソースでは「telegram」「rss」「vkontakte」を削除しています。
修正後は「gatsby develop」コマンドを実行します。

config.js
# 修正イメージ
-----省略-----
  author: {
    name: 'test',
    photo: '/test.jpg',
    bio: 'Test',
    contacts: {
      email: 'test@gmail.com',
      twitter: 'test',
      github: 'test'
    }
  }
-----省略-----
use-site-metadata.js
-----省略-----
contacts {
  email
  twitter
  github
}
-----省略-----             

スクリーンショット 2019-08-17 23.40.28.png

このようにアイコンやプロフィール名が書き換わっていることが確認できます。

3-2 記事の投稿

以下のディレクトリにMarkdown形式のファイルを作成することで、記事を作成することができます。
試しに以下のmdファイルを作成してみます。
/content/posts/

2019-08-16---test.md
---
title: "タイトルテスト"
date: "2019-08-17T23:46:37.121Z"
template: "post"
draft: false
slug: "/posts/test/"
category: "JS"
tags:
  - "Tech"
  - "Gatsby.js"
  - "JS"
description: "test!"
---

### テスト
+ テスト
+ テストっと

こんな感じで記事が作成されます。
スクリーンショット 2019-08-17 23.50.49.png

3-3:Git pushし、Netlifyに反映
記事の作成やプロフィールの変更後にGit pushを行うと自動的にNetlifyの方にも反映されるようになっています。
Netlify便利ですね。

Zabit
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした