Gatsbyで超カンタンにブログが作れる。たったの１５分で爆速の無料ブログが完成するやり方を書いた。

Gatsbyのパワーを未経験の方はぜひお試しください。やってみたら、たぶんこれからのブログやウェブサイトに求められるスピードの概念が変わる。

この解説で完成するブログはこちら

https://jabba14.gitlab.io/blog_test/

なぜGatsby？

1. 爆速でめっちゃ速い
2. 永年無料でホスト料金を気にしなくていい
3. サーバーが落ちない

このブログもGatsbyにしていてGoogle PageSpeed Insightsの結果がこれ。特になにもしなくても基本は爆速です。

なんで速くできるのかの仕組みについては公式サイトのドキュメントを読むといろいろと工夫があって、マジ感動する。ITエンジニアの方はぜひ一読されたし。

ホストしてるデータは静的だから落ちない。

さらに無料！もしAWSに多額の費用を払ってブログを運営していたら、ぜひこの機会にお試しください。

Gatsbyのデメリット

• ブログ記事更新したらビルド時間が要る
• ターミナル使うのが非エンジニアの方には難しいかも
• コメントなど動的コンテンツには工夫がいる

つまり静的サイトのメリットとデメリットは表裏一体ということですな。

前準備

必要なモノ

• Node.js npm
• GitLab アカウント

Node.jsはできたらnvmでバージョン管理できた方がいい。Gatsbyのスターターキットによってnodeのバージョン指定があって、必ずしも最新版が動くとは限らないのでその度にnodeバージョンを変える必要がある。

好きなスターターキット

ここからお好きなスターターキットを選ぶ。いろいろカッコいいのがあって、見てるだけでも楽しい。

https://www.gatsbyjs.org/starters/

できたらGatsbyバージョンはV2にした方がいい。

今回はこれにした。

gatsby-starter-delog

選んだらこのコマンドを入れる。

$ npm install -g gatsby-cli

これであなたのマシンにgatsby-cliが入る。すでに持っていたら不要。

$ gatsby new <あなたのブログの名前> https://github.com/W3Layouts/gatsby-starter-delog

このコマンドでGatsbyのインストールプログラムがしばらく走る。

ブログの起動

終わるとフォルダができるのでそこにいってブログを起動する。

$ cd <あなたのブログの名前>
$ gatsby develop

ブラウザでhttp://localhost:8000/ にアクセスするとこんな画面のブログが見える。

中の記事を変えたければ_data/blog/フォルダ内にマークダウンでいろいろ書けるのでお好きなように。

ここまでをGitにコミットしておく。

$ git add .
$ git commit -m "initial"

GitLabにデプロイ

デプロイ先はNetlifyが人気のようだけど、GitLabがオススメ。理由は以下の表。

どう見ても今のところはGitLabがオススメ。小さなブログだったらそこまでの差はないが、大きくなってくるとこの差が如実に出てくる。

例えばこのブログは３００ページほどだが、ビルドには１５分ぐらいかかってしまっている。超人気ブログってわけでもないけど、ある程度のアクセスがあると帯域利用もまーまーいく時がある。GitLabはもう「帯域利用がどこまでいっても課金しません」と言ってるのだから安心。

巨大な超人気ブログをAWSで運営しているとサーバー落とさないためにはかなりのコストをかけなくてはいけない。それが無料でここまでできるんだから、ちょっと引っ越しを検討してもいいのでは？

手順はまずGitLabでアカウントを作る。

できたら上のメニューバーからNew projectを作る。

なんかプロジェクトに名前を付ける。

Create Projectボタンを押す。

コンソールからプッシュする。

$ git remote add origin [email protected]:<あなたのアカウント>/<ブログの名前>.git
$ git push -u origin master

GitLabにコードが入って、プロジェクトの画面をリロードするとコードが見える。

GitLab Pagesのアクセス権を設定する

左のメニューから　Setting > General > Visibility, project features, permissions の　expand ボタンを押して表示させる。

その一番下のPagesをEveryoneにする。

Save changes ボタンを押して完了。

GitLabのプロジェクト画面の右端にあるSet Up CI/CD を押す。

Gatsby option を選択する

Gatsby を選択すると以下のような.gitlab-ci.ymlが自動でできあがる。

# This file is a template, and might need editing before it works on your project.
image: node:latest

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
  paths:
    - node_modules/

pages:
  script:
    - yarn install
    - ./node_modules/.bin/gatsby build --prefix-paths
  artifacts:
    paths:
      - public
  only:
    - master

コンソールにもどって以下のコマンドでnodeのバージョンを確認する。

$ node -v
v10.18.1

でてきたバージョンを.gitlab-ci.ymlに指定する。

image: node:10.18.1

commit changes ボタンを押して完了。

コンソールから変更を プルしておく。

$ git pull

Fast-forward
 .gitlab-ci.yml | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 .gitlab-ci.yml

プレフィックスの調整

ブログを独自ドメインで運営するなら以下は不要。

ここから先はブログをgitlab.ioドメインで運営する場合にだけ必要。なぜならブログのURLが https://<あなたのユーザー名>.gitlab.io/<ブログ名>  になってしまうためプレフィックスの設定が必要になる。

ローカルの gatsby-config.js に以下の記述を加える。

module.exports = {
  pathPrefix: `/<ブログ名>`,
}

また他のファイルにも

/assets/***.jpgとか直に指定している箇所がなんこかあったのでそれらに/<ブログ名>/assetsと書き換えた。

ここで気が付いたのだが、このスターターキットはあんまりよくない。本来ならプレフィックスの設定はgatsby-config.js　１発で全てが完了するようにするべき。

全部変更したら git でコミットしてプッシュすると自動でビルドが走る。

ちょっと待てばブログが公開される。

完成したブログ。

https://jabba14.gitlab.io/blog_test 

後は独自ドメインを付けたり、Cloudflareで無料CDNでもお好みで設定してください。

特にデプロイ先をGitLabにするとイメージの圧縮とかがないのでCloudflareはやった方がいいと思う。

まとめ

Gatsbyになんの義理もないんだけど、自分で使ってみてもう圧倒的に素晴らしいので、ぜひみなさんにおすすめしたい。この記事を書いたモチベーションはただそれだけ。

とにかくいいのでオススメです。

関連記事

• Gatsbyは今、最高にイケてるエンジニア向けブログ。爆速、無料、フルカスタマイズでもう普通のブログには戻れない
• Gatsbyブログを無料で帯域無制限のGitLab Pagesに移したらいいことしかなかった
• ブログは独自ドメインにしておけ。あとで後悔するぞ、私のように
• 英語圏のエンジニアの採用プロセスを知れば海外転職を攻略できる
• 海外生活では必須のハグ。イケてるハグをマスターする方法
• まともなコードが書けるエンジニアならどこでも海外移住できるという単純な理由