数式の表示#

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

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

• gatsby-remark-katex

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

Visit demo

コードブロックの表示#

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

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

• gatsby-remark-prismjs

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

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

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

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

Visit demo

GitHub Gist の埋め込み#

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

• gatsby-remark-embed-gist

Visit demo

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

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

下記が参考になる。

• タグを全部表示するコンポーネントを作成する
• カテゴリーを全部表示するコンポーネントを作成する

目次の表示 [optional]#

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

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

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

• gatsby製のblogにちゃんとしたtable of content（目次）を付ける

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

Visit demo

環境変数について#

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

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

• Environment Variables

サイト内検索 [optional]#

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

一番シンプルな奴 だ。

• Adding Search with Algolia

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

Algolia への登録が必要。

Google Analytics#

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

Google Analytics への登録が必要。

Disqus Comments [optional]#

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

DISQUS への登録が必要。

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 で同作業を行うと何ら問題がなかった。

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

Netlify#

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

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

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

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

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

robots.txt#

gatsby-plugin-robots-txt

canonical links#

gatsby-plugin-canonical-urls