ブログ開設手順

Gatsbyってなにって状態から30分程度でブログを開設できました。 下記にそのときの手順をメモしておきます。

0. 前提条件

Git、Node、npmは事前にインストールしておいてください。

1. ブログのスターターキットを起動

Gatsbyはブログをすぐ始められるようにスターターキット(スキャフォールド)を用意しています。 まずはそれを使ってローカルでブログを起動してみます。

1-1. Gatsbyインストール

npm install -g gatsby

1-2. プロジェクト生成

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

1-3. ローカルで起動

cd blog
npm run dev

http://localhost:8000にアクセスするとブログが表示されます。

ブログ初期イメージ

2. ブログの記事などを自分仕様にカスタマイズ

現状だと、ブロガーがKyle Mathews氏(Gatsbyの作者)になっていたり、仮の記事が3つある状態なので、 自分仕様にカスタマイズします。 ここでは僕の例を示します。

2-1. ブラウザタブのタイトル修正

gatsby-config.jssiteMetadataを下記のように修正します。 なおsiteUrlはGitHub Pagesでの公開を想定したものです。

gatsby-config.js
module.exports = {
  siteMetadata: {
    title: 'Takumon Blog',
    author: 'Takuto Inoue',
    description: '日々の作業をつづっていきます。',
    siteUrl: 'https://takumon.github.io/blog/',
  },
  ・・・
};

2-2. 画面タイトル修正

src/layouts/index.jsを修正します。 Gatsby Starter Blogとなっている部分が2カ所あるので、自分のブログ名に修正します。 僕はTakumon Blogにしました。

2-3. プロフィール修正

src/components/Bio.jsのアバター(imgタグ)と自己紹介文(pタグ)を修正します。

src/components/Bio.js
<img
  src="https://s.gravatar.com/avatar/37d27f624f8c9c8db6fe6b6581b256f1?s=80"
  alt={`Takuto Inoue`}
  style={{
    marginRight: rhythm(1 / 2),
    marginBottom: 0,
    width: rhythm(2),
    height: rhythm(2),
    borderRadius: rhythm(1),
  }}
/>
<p>
  Written by <strong>Takuto Inoue</strong> who lives and works in Tokyo building useful things.
</p>

2-4. 余計な記事を削除

記事はsrc/page配下にフォルダ分けされて存在します。 1つ目以外の記事は不要なのでフォルダごと削除します。 あと1つ目の記事て使っている画像も削除します。

src/
├── pages
│   ├── hello-world
│   │   ├── index.md
│   │   └── salty_egg.jpg ・・・削除対象
│   ├── hi-folks          ・・・削除対象
│   │   └── index.md
│   └── my-second-post    ・・・削除対象
│       └── index.md

2-5. 記事を編集

1つめの記事src/pages/hello-world/index.mdを編集します。 マークダウンファイル上部にメタ情報としてタイトルと作成日時を、その下に本文を記載しましょう。

src/pages/hello-world/index.md
---
title: Hello World
date: "2018-09-10T12:00:00.000Z"
---

Gatsbyでブログ始めました!

2-6. ローカルで起動

この状態でnpm run devしてhttp://localhost:8000を見てみると下記のようになっています。

記事一覧 ブログ修正後イメージ_記事一覧

記事詳細 ブログ修正後イメージ_記事詳細

ここまでで一通り自分のブログをローカルで作ることができました。

3. GitHub Pagesにブログを公開

Gatsbyを使うとnpmスクリプト一発でGitHub Pageに公開ができます。 ここではGitHubでのリポジトリ作成などの事前準備も含めて手順を示します。

3-1. GitHubにリポジトリ作成

GitHubにリポジトリを作り、手順2で作成した資産をプッシュしてください。

3-2. GitHub Pagesの設定

GitHubのリポジトリ > settings > GitHub Pages > Source でgh-pages branchを選択します。

3-3. メタ情報の修正

手順2によりローカルでブログを起動できるようになりましたが、GitHub Pagesに公開するには、まだ少し修正が必要です。

gatsby-config.jsのpathPrefixの修正

ブログのコンテキストURLは、現状だとスターターキットの値なので修正します。 これを指定するとブログのURLがhttps://[オーナー名].github.io/[pathPrefixの値]/のようになります。 僕の場合はhttps://takumon.github.io/blogのようになります。

gatsby-config.js
module.exports = {
  ・・・
  pathPrefix: '/blog',
  ・・・
}
package.json、pacakge-lock.json、README.mdのメタ情報修正

上記3ファイルにおいて、プロジェクト名や、管理者、ブログのURLなどが、すべてスターターキットの状態になっているので 自分仕様に修正します。

3-4. 資産をgh-pagesブランチにプッシュ

git push origin masterでマスターに最新資産をプッシュします。

npm run deployを実行します。実態はgatsby build && gh-pages -d publicというコマンドです。これを実行するとgatbyコマンドによりビルド資産をgh-pagesブランチにプッシュしてくれます。

3-5. 公開できたことを確認

GitHub Pagesの公開URLをブラウザでたたき、自分のブログが公開されていることを確認します。

以上でブログの公開手順は終了です。

参考記事