n350071のブログ

主にRubyなフリーランスエンジニア

GatsbyJSでブログを作成する方法

2019-08-28 n350071作業体系化ノート

概要

GatsbyJSというReactとGraphQLを利用したWebサイト構築ツールでこのブログを作成しました。

構成として以下が必要になります

  • GatsbyJS（ReactとGraphQLを利用したOSSのブログフレームワーク）
  • Netlify（デプロイ環境、一定アクセス数まで0円）
  • GitHub
  • Google Domain（カスタムドメインを購入）

以下、作業内容を記載していきます。 maxime valcarce mAj8xn5zXsk unsplash

1. GatsbyJSを立ち上げる

GatsbyJSのチュートリアルを軽く読む

チュートリアルを軽く読みましょう。
GatsbyJSのREADMEも少し見ておくとよいかもしれません。

GatsbyJSのスターターキットを利用する

Startersから、好きなテンプレートを選びましょう。
今回はgatsby-starter-hero-blogを選びました。

READEMEに書いてあるとおりにローカルでdevelopモードで動作確認を行う

READMEに書いてあるとおり、以下のようにコマンドを打つと、
http://localhost:8000 で動くことを確認できます。

$ npm install -g gatsby-cli
$ gatsby new my-blazing-fast-site
$ cd my-blazing-fast-site/
$ gatsby develop

2. Netlifyにデプロイする

デプロイ手順は簡単です。

1. ローカルのターミナルで gatsby build コマンドでビルドします。

私のスターターキットではブログ内検索の外部サービスであるalgoliaが動かないと、External servicesというエラーになるため、algoliaをストップする必要がありました。（あとで復旧させました）

2. これをコミットして、GitHubにpushします。

3. 最後に、Netlifyにデプロイします。

アカウントの連携を行い、その流れでデプロイ対象のリポジトリを選択するだけでした。

3. カスタムドメインを設定する

ドメインの取得

まず、Google Domain で購入します。
値段は¥1400+税程度でした。
お名前.comと違って画面が見やすく、自分の欲しいドメインを入れると、取得可能な複数のドメイン名をリストしてくれるので選びやすかったです。

ドメインの設定

次に、Netlifyの設定画面にあるDomain Setting>Domain managementに進み、取得したドメイン名を入力します。
Googleで買ってから数分以内でしたが、購入したドメイン確認が取れて無事に設定することができました。

DNS設定

最後に、DNSの設定を行い、ドメイン名がこのサイトのIPアドレスを向くように設定します。 まず、Name Serversの項目を探します。
このサイトであれば、このURLでたどり着けます。

https://app.netlify.com/teams/n350071/dns/n350071.com#nameservers

そこに書いてある以下のような文字列を確認します。

dns1.p06.nsone.net
dns2.p06.nsone.net
dns3.p06.nsone.net
dns4.p06.nsone.net

これを、Google Domainのxxxxに指定すれば、設定は終わりです。

4. SSL化する

Netlifyの先程のドメイン設定のページの最下部に行くと、SSLの設定項目があります。
指示に従うとできるようになっています。

私はドメインを変えたばかりでしたので、１時間ほどSSL化できませんでした。
(できないときは、しばらく待ってみるとよさそうです。)

5. 機能カスタマイズ

ここから先は、私のスターターキットでの設定になります。

外部サービスの設定(External services)

Googleanalyticsid

これは「Tracking ID」のことで、Google Analyticsの利用登録後に確認できます。

algolia

algoliaにアクセスして指示に従うとできます。
.envに設定するキーが多いですが特に迷わずにできました。

Markdown

Syntax Hilightについては最初から実装済みでした。
ただし、直後にrubyとかmd, shellなどと書かないとハイライトがうまく効きません。

また、こんな風にタイトルをつけるには、gatsby-remark-prismjs-titleを参考にしてください。

hello.md 
hello!

記事の自動生成

記事の書き方自体はこちらで確認できます。 ただし、毎回これを１から作るのは大変なので、 npm run new-post -- title で作成できるようにしました。
詳細は🔨こちら(作成中)に書きました。

その他

  • Home画面

    • タイトルは src/components/Hero/Hero.js を変更
    • 背景画像 src/images/png/hero-background.png を変更

  • 記事全体

    • content/parts/author.md の修正
    • content/parts/footnote.md の修正
    • その他 content/meta/config.js の修正

    • siteImage: “preview.jpg”

      • <meta property="og:image" content={image} /> で使われて、記事がシェアされたときの画像になるので、しっかり変えておきましょう。

  • About, Privacy Policy, Terms and Conditions

    • pages以下は消していって大丈夫ですが、唯一success以下を消すとbuildできませでした。(ハマった)

    • pages以下は、このヘッダを消さないようにしましょう。

      • ---
title: Success
---
  • Contactは消しました。

  • favicon

    • src/images/app-icons/ 以下のpng画像を取り替えて、次のスクリプトを実行します。
    • sh scripts/generate-app-icons.sh

  • CSS調整

    • src/components/Header/Header.jsにベタ書きされているので、必要に応じて修正します。

お疲れさまでした。設定としては以上です。

その他

フリーの画像素材としてUnsplashを使っています。
特にこだわりがないので、他に良いところがあれば教えてもらえると嬉しいです。