Gatsbyでブログを始めるまで

<head>

<link rel="canonical" href="https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog" />

</head>

# はじめに

> 本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog のクロスポスト記事になります。

この記事は[Gatsby](https://www.gatsbyjs.org/)というヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。

* [Gatsby始めるまで](https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog/)
* [GatsbyにShare機能、OGPタグをつける](https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-share/)
* [タグ機能、カテゴリ機能をつける（基礎編）](https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-add-tags)
* [タグ機能、カテゴリ機能をつける（応用編）](https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-add-tags-application)
* [GatsbyにTableOfContents（目次）をつける](https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-tableofcontent)
* [DarkModeをつける](https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-darkmode)

## 始める前に知っておくこと

この記事に行き着くということは既にCMSが何者かは理解している気もしますが一応。

## CMSとは

`Contents Management System`の略ですね。IT業界は略語が多くて何言ってるかわからないこと多いですよね。。。

ざっくり分類すると何かしらの記事をWebサイト上に残せるWebシステムのことになります。相変わらずシェア率の高いWordPressだったり、はてなブログだったり、wix.comとか様々なサービスがありますね。

## ヘッドレスCMSとは

今回で言うGatsbyはCMSの中でも`ヘッドレス`になります。ヘッドってなんだよ！って突っ込みはあるかと思いますが、PCでいう記憶容量のHDDとか記事を覚えておくDBの存在がなく、予め必要なデータをビルドするときに静的なHTMLとして作成しておいて表示スピードを上げたものが`ヘッドレスCMS`ということになります。

ちなみに`ヘッドレスCMS`は他にも色々あり、HugoだったりJEKYLLがあります。Gatsbyとの違いは

- Gatsbyのシェア率が高い
- GraphQLを使用している
- デザインのテンプレートが豊富

というのが利点としてあります。

## CMS（記事の保存先）は何を使うのか

Gatsbyで色々表示が早くなるはなるのですが、作る前に記事の保存先をどこで管理し、どこで記事を書くのかという前提を決めておく必要があります。

基本的には、「ソースコードで管理」でいいのですが、そのままだといちいちgitターミナルからでの作成・更新になってしまうので、PCを開かないと記事が書けなく結局「記事の更新がストップする」という事になりかねないので慎重に選びましょう。

自分が試したのは以下のサービスです。私のイチオシは**netlify cms**ですね！
- [netlify cms](https://www.netlifycms.org/)
- [micro cms](https://microcms.io/)
- [contentful cms](https://www.contentful.com/)
- [ghost cms](https://ghost.org/)

netlify cmsの利点
- Markdownで書けてPreviewを見ながら記事がかける
- ブログのCDNをnetlifyで行えばどこでも記事を編集できる
- スマホ対応は現時点ではされていないが[実装](https://github.com/netlify/netlify-cms/issues/441)が予定されている

## gatsby template を選ぼう

Gatsbyにはある程度完成されたWordPressでいうテーマみたいなものが存在します。ここで良いテーマを選べるとブログの作成工数がぐっと抑えられます！

[Gatsby Template](https://www.gatsbyjs.org/starters/?v=2)

### Template選び方の注意

例えば利用したいCMSがある場合、以下のように`CMS Netlify`にチェックを付けてお気に入りのTemplateを選びましょう。
<img alt="image.png (813.2 kB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/1ce5353f-a1cd-46e1-b851-6626275b8e85.png">

#### ほぼそのまま使えると思うTemplate 3選

- https://www.gatsbyjs.org/starters/thriveweb/yellowcake/
    - 旅行ブログとかグラフィカルな記事を書きたいならこれ
    - ちなみに別で運営している[旅行ブログ](https://yomomo.page)はこちらを使用しています。

<img alt="image.png (2.1 MB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/6935a1b5-da20-4149-ac6d-a1da48892110.png">

- https://www.gatsbyjs.org/starters/alxshelepenok/gatsby-starter-lumen/
    - 技術ブログとか文章多めな記事の場合はこちらがベーシックでおすすめ
    - この[ブログ](https://tech-blog.yoshikiohashi.dev/)もこのテンプレートを参考に作成しています。

<img alt="image.png (786.5 kB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/69bb9c9a-0211-436a-b60e-be5cf18da87f.png">

- https://www.gatsbyjs.org/starters/netlify-templates/gatsby-starter-netlify-cms/
    - 本家 netlifyのテンプレート。ベースとしては最適。

<img alt="image.png (2.1 MB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/dacc1317-db98-4eef-9c6a-7273ce21f1d9.png">

## git cloneしよう

ここまでベーステンプレートの選択をしてきたかと思いますが、良いと思ったテンプレートは見つかりましたか？ここが決まればあとは簡単です。以下のコマンドを打ちましょう。

### gatsby-cliをグローバルインストールする
```
npm install -g gatsby-cli
```

### 気に入ったテンプレートのURLをコマンドで打ちましょう
```
gatsby new [your-blog-name] https://github.com/netlify-templates/[your-select-template]
```

### ローカル環境で立ち上がるか確認

```
cd [your-blog-name]
gatsby develop
```

localhost:8000 にアクセスしてみましょう。表示されたらOK。表示されてない場合は何かが足りないので手順を振り返ってみましょう。

表示されたらGitHubなどにRepositoryをUploadしてコミットしておきましょう。

## netlify uploadしよう

ここまで来たらGUIでぽちぽちするだけです。

1. https://app.netlify.com/start にアクセス

<img alt="image.png (166.4 kB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/8de407ab-327e-4bc4-b57d-b0f11c26a66e.png">

2. UploadしたRepositoryを選択する

<img alt="image.png (213.2 kB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/94f2dd5f-9400-47f0-b46f-eb7cddb55fa1.png">

3. Build command を入力する

Build command はnetlify CI上で実行されるコマンドになります。Gatsbyのビルドコマンドは`gatsby build` になるので入力して[Deploy site]をクリックしてCIが成功したら完了です。

<img alt="image.png (163.4 kB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/117c8b75-be6d-4866-9487-d7f1e01f16cb.png">

# まとめ

いかがだったでしょうか？立ち上げまで順調にできましたか？
WordPressと比べると準備だったり覚えるのが大変だとは思いますが、これも理想のスピードのため。

ちなみにこのブログのスピードを[LightHouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)で測ってみると結構いい点数が取れました！みなさんも是非Gatsby導入して快適なブログを手にしてみてください。それでは次回の記事で。

<img  alt="image.png (138.8 kB)" src="https://img.esa.io/uploads/production/attachments/15569/2020/05/25/82539/e4210d81-acad-4d22-b37f-6fde32d7dbba.png">