gatsby

August 28, 2021

概要

gatsby.js で markdown から静的なファイルを生成、 Netlify で SSL で公開した。

セットアップ

sudo apt -y install npm mkdir -p ~/workspace/gatsby cd ~/workspace/gatsby npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starterblog cd gatsby-starter-blog ; npx gatsby develop # スターターセットを使った最後に「これを実行する」と表示されていた

以降、 npx gatsby develop の機能により

http://localhost:8000/ でローカルの内容が表示される
ローカルでのファイルの変更がすぐに http://localhost:8000/ に反映される

gatsby のオプション

オプション	効果
-H, —host	デフォルトは localhost で開くがホストを変えたい場合。例えば eth の IP アドレスを指定すれば別マシンからでもアクセスできる
-p, —port	ポート番号、デフォルト 8000

参考 gatsby cheat sheet

設定変更

gatsby-config.js で下記を変更する

siteMetadata
twitter のアカウント、サイト URL など
プロフィール画像の差し替え
./src/components/bio.js で画像へのパスが指定されている
./src/images/profile-pic.png を差し替える
mv ~/tin-machine.png src/images/profile-pic.png
フッターの変更
vi ./src/components/layout.js
[Built with]あたりを変更

コンテンツ追加

./gatsby-starter-blog/content/blog 配下にディレクトリを作成して配下に index.md を置いていく。サブディレクトリも簡単に作れる。下記は cheatsheet ディレクトリ配下に index.md を置いて、更にサブディレクトリとして vim を作り、配下に index.md を置いた場合。

.
├── cheatsheet
│   ├── index.md
│   └── vim
│       └── index.md
└── gatsby
    └── Gatsby.md

SSL 化

ここを参考にさせていただいた

Google Analytics 導入

gatsby-plugin-google-gtagを使った。

手順

npm install gatsby-plugin-google-gtag

gatsyby-config.js に設定を追加サンプル

私は Google Analytics 自体が初めてだったので、アナリティクスのページの最上部に「ストリーム設定に移動」というボタンが出ていた。この辺が参考になった。 Google アナリティクスのグローバルサイトタグを設定する 次のステップ: データストリームを設定してデータの収集を開始する <= 「ウェブ」 ウェブサイトの URL <= 「tech.chill-out.dev」 ストリーム名 <= tech

でストリームを作成した。「ウェブストリームの詳細」に「測定 ID」が表示されているのでコピー。

オプション	目的
optimize_id	A/B テストで使えるとの事
anonymize_ip	IP 匿名化を有効にするか
head	トラッキングスクリプトをヘッダに入れるか
respectDNT	「追跡しない」設定をしているユーザーを尊重する

ページ内のヘッダーにリンクを付ける

gatsby-remark-autolink-headersを使う。様々なオプションがある

heading に anchor アイコンを付与を参考にさせていただいてリンクを付与した。

gatsby-config.js の gatsby-transformer-remark の options.plugins 配列の中に下記を追加した。

          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              offsetY: `100`,
              icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
              className: `gatsby-autolink-headers`,
            },
          },

SVG でリンクのアイコンが追加されるの素敵。

画像を埋め込む

![画像の説明](./images/hoge.jpg)

プラグインとしては gatsby-remark-images, gatsby-plugin-sharp を用いる。

画像に属性を付けたい

gatsby-remark-image-attributesを使う。npm でインストール

npm install --save gatsby-remark-image-attributes

gatsby-config.js に下記構造になるように設定を追加

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-image-attributes`,
          options: {
            dataAttributes: true
          }
        }
      ]
    }
  }
];

画像を埋め込む際に

![happy](https://foomoji.com/happy.png '#tool-tip=Fancy image with tooltip;position=absolute;height=100px')

と書くと、下記のようになるらしい。

<img
  src="https://foomoji.com/happy.png"
  alt="happy"
  style="position: absolute; height: 100px;"
  data-tool-tip="Fancy image with tooltip"
  class="gatsby-img-attributes"
/>

なるほど、凄い。なので、

![hoge](https://foomoji.com/happy.png)

参考

GatsbyJS で作っているブログで gatsby-plugin-google-analytics から gatsby-plugin-google-gtag に移行した

新しい GTAG に対応した手順を公開してくれているので助かった…

analytics.js から gtag.js に移行する


analytics.js では、トラッカーを使用してデータを Google アナリティクスへ送信し、ヒットタイプを使用してデータの種類を指定します。
analytics.js とは異なり、gtag.js では、Google アナリティクスへのデータの送信にトラッカーを使用しません。
代わりに、config コマンドで設定した ID で識別される Google アナリティクス プロパティにデータを送信します。

以前はトラッキング ID を使っていたが使わなくなった。

GatsbyJS での画像の追加がわかる

Markdown での画像の追加方法が分かった。ページトップに画像を表示するのやりたい…

Floating markdown images in Gatsby

画像を左側に寄せる( float: left )したい。同じ悩みを持った人が stackoverflow にいた。