ジャバ・ザ・ハットリ

ベルリンのITスタートアップで働くソフトウェアエンジニア

15分で超カンタンに爆速の無料ブログができるGatsbyの作り方

2020-03-27Gatsby

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

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

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

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

image

なぜGatsby?

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

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

image

なんで速くできるのかの仕組みについては公式サイトのドキュメントを読むといろいろと工夫があって、マジ感動する。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/ にアクセスするとこんな画面のブログが見える。

image

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

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

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

GitLabにデプロイ

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

帯域利用料金 ビルド時間の無料枠   1回のビルド時間制限
Netlify  100GB/月まで無料  300分  15分  
GitLab  永年無料!  2000分  60分  

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

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

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

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

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

image

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

image

Create Projectボタンを押す。

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

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

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

image

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

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

image

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

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

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

image

Gatsby option を選択する

image

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 1発で全てが完了するようにするべき。

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

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

完成したブログ。

https://jabba14.gitlab.io/blog_test 

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

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

まとめ

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

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

関連記事


海外移住のQ&Aサイト シティーズ


海外移住向けのQ&Aサイトを運営しています。現在、海外にお住まいの方、これから海外移住や留学、転職をお考えの方はぜひご参加ください。 登録はもちろん無料です。

シティーズ https://www.cityz.jp/


cityz



  • © copyright jabba.cloud 2020