How to start a simplest-blog quickly with Gatsby

How to start a simplest-blog quickly with Gatsby
web
gatsby
公開

2020年12月26日

1 概要

graph LR
  id1[Markdown] --- id2
  subgraph ide1[Build and Deploy]
    id2[GitHub] --- id3[Netlify]
  end
  id3 -->|Release| id4[Blog]

Markdown ファイルを GitHub の専用リポジトリに git push すれば Blog が出来るの図．

2 方針

  • Markdown を中心に据える
  • Typora や Joplin との互換性を最優先とする
  • 数式や図表を扱う
  • コード断片を扱う
  • 退屈・面倒なことはしない

3 Starter Library | Gatsby

あらゆる手を抜くため gatsby-starter-lumen を選定．

(実質必須な)後からやるべき退屈な作業に概ね対応している．

4 不足機能の実装

4.1 数式の表示

Jan 5, 2021 - デフォルトで入っているのでスキップ．

数式を書き殴るのに KaTeX が必要．

煩わしいこと(エスケープなど)を考える必要性は一切ない．

Visit demo

5 ダイアグラムの表示

Mermaid が必要．

Visit demo

5.1 コードブロックの表示

Linuxコマンドなど比較的短めなコード断片の表示を行うのに必要．

表示する以外の機能は Typora や Joplin との互換性を維持できないので要注意．

テーマ 毎にレイアウトを弄る必要がある．

特に行番号はデフォルトで表示がずれているので要修正．

デフォルトテーマは実質 OKAIDIA 一択．

テーマを追加する場合は prism-themes から持ってくる．

Visit demo

5.2 GitHub Gist の埋め込み

コードブロック関連はこちらが本命．

Visit demo

5.3 カテゴリやタグのリスト表示 [optional]

デフォルトでは機能として存在するだけなので何かしら手を加える必要がある．

下記が参考になる．

5.4 目次の表示 [optional]

特定のプラグインが Markdown 内の特別な記述ブロックを読み込み，目次を生成するというパターンがある．

便利ではあるが 互換性の観点から異物注入は回避したい．

Typora は見出しタグから自動生成しているようなのでこれに従う．

極めてシンプルな実装例が参考になる．

Visit demo

5.5 環境変数について

特定のサービスとの連携を考慮．

包含したくないもの(IDやKEY)を退避する術．

5.6 サイト内検索 [optional]

任意の投稿をカテゴリとタグだけでは絞りきれないことを考慮．

一番シンプルな奴 だ．

タイトルと概要から検索する程度なら公式のままで良い．

Algolia への登録が必要．

6 サポート機能の有効化

gatsby-starter-lumen の良いところ．

6.1 Google Analytics

gatsby-config.js から辿ると config.js で設定することを確認できる．

Google Analytics への登録が必要．

6.2 Disqus Comments [optional]

gatsby-config.js から辿ると config.js で設定することを確認できる．

DISQUS への登録が必要．

7 ホスティングサービス

7.1 Gatsby Cloud

  1. アカウントを登録
  2. GitHub リポジトリを指定
  3. 必要なら環境変数の設定 [Site Settings] タブの [General] -> [Environment variables]

以降は次のタイミングで Build & Deploy, Release の流れになる．

  • 自動: git push 毎
  • 手動: Trigger build ボタン

最初に本家のサービスということで試した．

Google Search Console に

sitemap.xml を送信後に任意の URL 検査を行ったところ，すべての URL に noindex が付与される状態が確認できた．

robots.txt を配置しても状況は変わらず．

同じ状況に陥っているケースを発見するも役に立たない．

x-robots-tag: none” on Gatsby site hosted by Gatsby Cloud with Contentful

後述の Netlify で同作業を行うと何ら問題がなかった．

フリープランへの呪縛ということで諦めた．

7.2 Netlify

  1. アカウントを登録
  2. GitHub リポジトリを指定
  3. 必要なら環境変数の設定 [Site settings] タブの [Build & deploy] -> [Environment]

以降は次のタイミングで Build & Deploy, Release の流れになる．

  • 自動: git push 毎
  • 手動: Trigger deploy ボタン

8 SEO

8.1 検索エンジンへ sitemap.xml を送信

sitemap.xml は gatsby-starter-lumen が自動生成．

8.1.1 Google

8.1.2 Bing

8.2 robots.txt

gatsby-plugin-robots-txt

9 トラブルシューティング

  • 別の環境で git clone し gatsby develop したらエラー node_modules がないのが原因なので npm install でインストール．

  • 投稿を弄ったり削除した直後に GraphQL エラー云々 Markdown 内の特殊ブロック(特にソーシャル画像関連)を弄ると高確率で生じる． ファイルを削除しても元の位置に戻しても状況は変化しない． 可能ならエラーが発生する前の状態に戻し特殊ブロックの変更は慎重に行う． 最終手段としては gatsby clean で .cache と public フォルダを削除する． 内部のハッシュ値との不整合がエラー発生の要因と思われる．

トップに戻る