Gatsbyでブログを作成

Gatsbyで作成した最初の投稿。Gatsbyでブログのセットアップした際のメモ。

GatsbyとNetlifyでホスティング

• Reactベースで色々いじりやすくて楽しそう。
• Netlify保存100GB、転送月100GBまで無料枠で基本ノーコスト

• ホスティング方法

  • https://qiita.com/k-penguin-sato/items/7554e5e7e90aa10ae225

• テンプレートが豊富

  • https://www.gatsbyjs.com/starters/?v=2

• 記事となる元mdファイルはTyporaで書く

  実装

• テンプレートはgatsby-starter-lumenを選択

  • https://www.gatsbyjs.com/starters/alxshelepenok/gatsby-starter-lumen/

• 基本はzennの本を参考に

  • https://zenn.dev/tomokiya/books/4b13342f6d878b93e06c/viewer/005742e31a7100fe350b

• Gatsby基本コマンド

  • 作成、ローカルで実行、キャッシュの削除的な

  • gatsby new <site-name> <starter-url>
    gatsby develop -o
    gatsby clean

• 細かい変更

  • lang属性をjaに変更
  • gatsby-config.jsの編集
  • faviconの設定
  • 記事下の表示の変更
  • Authorをアイコン付きで表示
  • コメント欄の非表示
  • https://blog.isonishi.com/posts/gatsby-gitlab-pages#configjs-%E3%82%92%E7%B7%A8%E9%9B%86

• Gatsby-starter-lumenのバグ？の修正

  • aタグに長い文章を差し込むとスマートフォン表示が崩れる
  • word-wrap: break-word;で回り込むようにすることで対応
  • src/base/_generic.scssを編集する

  • body {
    margin: 0 0 0 calc(100vw - 100%);
    font-family: $typographic-font-family;
    color: $typographic-base-font-color;
    line-height: $typographic-base-line-height;
    font-size: $typographic-base-font-size;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    }

  • http://memorandum-plus.com/2018/04/03/css-%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%AC%E3%83%99%E3%83%AB%E3%81%8B%E3%82%89%E6%96%87%E5%AD%97%E3%81%8C%E3%81%AF%E3%81%BF%E5%87%BA%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86/

• Wordpressからの記事の移行

  • WP Gatsby Markdown Exporter を使った
  • オプションは一切弄らんのが良い
  • https://dev.to/whyboris/migrating-wordpress-to-gatsby-in-3-steps-33oa
  • https://fuku-suku.com/archives/1123
  • 大きめの動画とかをgithubに上げるときにひとつのファイルあたり100MBを超えるとエラーをはくので動画とかは注意
  • Git LFSを使う
  • https://qiita.com/kanaya/items/ad52f25da32cb5aa19e6
  • VSCodeのedit/replace in Filesで一括編集ができるので、タグとかリンクとかまとめて修正できる

• リダイレクトの設定

  • staticフォルダの直下に_redirectsファイルをつくる

  • / /
    /pages/* /pages/:splat
    /static/* /static/:splat
    /page-data/* /page-data/:splat
    /* /posts/:splat 301

  • from to
  • 上から順に条件が適応されていく
  • *でマッチしたものが :splatになる
  • 301!とかすると強制リダイレクト !なしだとファイルがあればそれを表示
  • https://howno.page/entry/netlify-gatsby-redirects/
  • https://levelup.gitconnected.com/how-to-add-netlify-redirects-to-a-gatsby-site-ae678518cc91
  • ここでvalidなリダイレクト記法か確認できる　https://play.netlify.com/redirects

• ドメインの設定

  • 意外と簡単
  • SSLの証明書をNetlify側で読み込むのに多少時間がかかるので、待つ必要あり
  • https://kiotera-tech.com/netlify_custom_domain_setting

• Google Adsense

  • https://chocolat5.com/tips/add-google-adsense-gatsby/#gatsby-configjs%E3%81%ABid%E3%82%92%E6%8C%87%E5%AE%9A
  • うまく自動広告が挿入されないので、修正必要

今後

• カード表示、Twitter埋め込みに対応したいかも

  • シンプルメモがコンセプトだからいらんかもだけど。
• タグ、カテゴリー一覧

• Hugoでいう Hugo new post/test.md みたいなコマンドorツールがほしい

  • 作成日時とかは自動で入れてほしい