15分で超カンタンに爆速の無料ブログができるGatsbyの作り方
Gatsbyで超カンタンにブログが作れる。たったの15分で爆速の無料ブログが完成するやり方を書いた。
Gatsbyのパワーを未経験の方はぜひお試しください。やってみたら、たぶんこれからのブログやウェブサイトに求められるスピードの概念が変わる。
この解説で完成するブログはこちら
https://jabba14.gitlab.io/blog_test/
なぜGatsby?
- 爆速でめっちゃ速い
- 永年無料でホスト料金を気にしなくていい
- サーバーが落ちない
このブログもGatsbyにしていてGoogle PageSpeed Insightsの結果がこれ。特になにもしなくても基本は爆速です。
なんで速くできるのかの仕組みについては公式サイトのドキュメントを読むといろいろと工夫があって、マジ感動する。ITエンジニアの方はぜひ一読されたし。
ホストしてるデータは静的だから落ちない。
さらに無料!もしAWSに多額の費用を払ってブログを運営していたら、ぜひこの機会にお試しください。
Gatsbyのデメリット
- ブログ記事更新したらビルド時間が要る
- ターミナル使うのが非エンジニアの方には難しいかも
- コメントなど動的コンテンツには工夫がいる
つまり静的サイトのメリットとデメリットは表裏一体ということですな。
前準備
必要なモノ
- Node.js npm
- GitLab アカウント
Node.jsはできたらnvmでバージョン管理できた方がいい。Gatsbyのスターターキットによってnodeのバージョン指定があって、必ずしも最新版が動くとは限らないのでその度にnodeバージョンを変える必要がある。
好きなスターターキット
ここからお好きなスターターキットを選ぶ。いろいろカッコいいのがあって、見てるだけでも楽しい。
https://www.gatsbyjs.org/starters/
できたらGatsbyバージョンはV2にした方がいい。
今回はこれにした。
選んだらこのコマンドを入れる。
$ 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がオススメ。理由は以下の表。
帯域利用料金 | ビルド時間の無料枠 | 1回のビルド時間制限 | |
---|---|---|---|
Netlify | 100GB/月まで無料 | 300分 | 15分 |
GitLab | 永年無料! | 2000分 | 60分 |
どう見ても今のところはGitLabがオススメ。小さなブログだったらそこまでの差はないが、大きくなってくるとこの差が如実に出てくる。
例えばこのブログは300ページほどだが、ビルドには15分ぐらいかかってしまっている。超人気ブログってわけでもないけど、ある程度のアクセスがあると帯域利用もまーまーいく時がある。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
1発で全てが完了するようにするべき。
全部変更したら git でコミットしてプッシュすると自動でビルドが走る。
ちょっと待てばブログが公開される。
完成したブログ。
https://jabba14.gitlab.io/blog_test
後は独自ドメインを付けたり、Cloudflareで無料CDNでもお好みで設定してください。
特にデプロイ先をGitLabにするとイメージの圧縮とかがないのでCloudflareはやった方がいいと思う。
まとめ
Gatsbyになんの義理もないんだけど、自分で使ってみてもう圧倒的に素晴らしいので、ぜひみなさんにおすすめしたい。この記事を書いたモチベーションはただそれだけ。
とにかくいいのでオススメです。
関連記事
海外移住のQ&Aサイト シティーズ
海外移住向けのQ&Aサイトを運営しています。現在、海外にお住まいの方、これから海外移住や留学、転職をお考えの方はぜひご参加ください。 登録はもちろん無料です。
シティーズ https://www.cityz.jp/
