How to start a simplest-blog quickly with Gatsby
How to start a simplest-blog quickly with Gatsby
概要
Markdown ファイルを GitHub の専用リポジトリに git push すれば Blog が出来るの図。
方針
Starter Library | Gatsby
あらゆる手を抜くため gatsby-starter-lumen を選定。
(実質必須な)後からやるべき退屈な作業に概ね対応している。
不足機能の実装
数式の表示
Jan 5, 2021 - デフォルトで入っているのでスキップ。
数式を書き殴るのに KaTeX が必要。
煩わしいこと(エスケープなど)を考える必要性は一切ない。
ダイアグラムの表示
Mermaid が必要。
コードブロックの表示
Linuxコマンドなど比較的短めなコード断片の表示を行うのに必要。
表示する以外の機能は Typora や Joplin との互換性を維持できないので要注意。
テーマ 毎にレイアウトを弄る必要がある。
特に行番号はデフォルトで表示がずれているので要修正。
デフォルトテーマは実質 OKAIDIA 一択。
テーマを追加する場合は prism-themes から持ってくる。
GitHub Gist の埋め込み
コードブロック関連はこちらが本命。
カテゴリやタグのリスト表示 [optional]
デフォルトでは機能として存在するだけなので何かしら手を加える必要がある。
下記が参考になる。
目次の表示 [optional]
特定のプラグインが Markdown 内の特別な記述ブロックを読み込み、目次を生成するというパターンがある。
便利ではあるが 互換性の観点から異物注入は回避したい。
Typora は見出しタグから自動生成しているようなのでこれに従う。
極めてシンプルな実装例が参考になる。
環境変数について
特定のサービスとの連携を考慮。
包含したくないもの(IDやKEY)を退避する術。
サイト内検索 [optional]
任意の投稿をカテゴリとタグだけでは絞りきれないことを考慮。
一番シンプルな奴 だ。
タイトルと概要から検索する程度なら公式のままで良い。
Algolia への登録が必要。
サポート機能の有効化
gatsby-starter-lumen の良いところ。
Google Analytics
gatsby-config.js から辿ると config.js で設定することを確認できる。
Google Analytics への登録が必要。
Disqus Comments [optional]
gatsby-config.js から辿ると config.js で設定することを確認できる。
DISQUS への登録が必要。
ホスティングサービス
Gatsby Cloud
- アカウントを登録
- GitHub リポジトリを指定
- 必要なら環境変数の設定
[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
- アカウントを登録
- GitHub リポジトリを指定
- 必要なら環境変数の設定
[Site settings] タブの [Build & deploy] -> [Environment]
以降は次のタイミングで Build & Deploy, Release の流れになる。
- 自動:
git push毎 - 手動: Trigger deploy ボタン
SEO
検索エンジンへ sitemap.xml を送信
sitemap.xml は gatsby-starter-lumen が自動生成。
- Google Analytics へ登録
- Google Search Console へ登録
上記で連携
Bing
- Webmaster Tools - Bing へ登録
- Google Search Console からインポート
robots.txt
canonical links
トラブルシューティング
-
別の環境で
git cloneしgatsby developしたらエラー
node_modules がないのが原因なのでnpm installでインストール。 -
投稿を弄ったり削除した直後に GraphQL エラー云々
Markdown 内の特殊ブロック(特にソーシャル画像関連)を弄ると高確率で生じる。
ファイルを削除しても元の位置に戻しても状況は変化しない。
可能ならエラーが発生する前の状態に戻し特殊ブロックの変更は慎重に行う。
最終手段としてはgatsby cleanで .cache と public フォルダを削除する。
内部のハッシュ値との不整合がエラー発生の要因と思われる。