Gatsby でホームページを一新する

以前から、とても古臭いそして多くの人にはどうでもいいような内容のコンテンツを自分の覚書程度にホームページとして提示していました。

現在、ブログが中心でホームページの方は長い間放置していました。

今回、Gatsby を触れる機会があってまずは内容を極端に絞って、ホームページを一新しました。

こちらです。　→　https://kunokatura.xsrv.jp/

ローカルでプロジェクト作成

前の項目と同じようにプロジェクトを作成し、一つ一つのページを tailwind css で作成しビルドして、public だけを xserver にアップロードします。

しかし、最初は画像関係がきちんと読み込まれませんでした。

そもそもローカルにおいて、何だかわけのわからない挙動があり今でも理解ができていません。

ファイルは以下のような位置関係で生成されています。

src
├── images
│   ├── medmemo
│   │   └── amitiza.png
│   └── tsurugi.png
├── pages
│   ├── index.js
│   ├── mmemo
│   │   └── Amitiza.js
│   └── mmemoMenu.js
└── utils

gatsby-config.js は

module.exports = {
  /* Your site config here */
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
  ],
}

Amitiza.js で画像を貼り付けるには

<Image filename="medmemo/amitiza.png" alt="ibs5" />

になると思うのですが、それではエラーになります。

<Image filename="amitiza.png" alt="ibs5" />

にすると表示されます。

これが最初から引っかかりました。
そして、今のところ解決できていません。

でも閲覧は可能なので、そしてパスを無視してコードを書けるのは便利ではあるのでそのままにしています。

xserver にアップロードする

最初は、「kunokatura.xsrv.jp/public_html/my-gatsby-site」にビルドした public フォルダだけをアップロードしていました。

でもそうすると記事は表示されるものの画像は表示されません。

そこで、「kunokatura.xsrv.jp/public_html/」に public の中身をすべてアップロードしました。そうすれば、画像は読んでくれます。

「kunokatura.xsrv.jp/public_html/」の中は 84 個ものファイルやフォルダで乱雑に散らかっています。あまり美しくないのですが、まあ動くのでこれで良しとします。

更新する度にビルド・アップロードする必要がある

私の場合は、一新したホームページの容量は断捨離の結果 4 MB 程度になりました。

今後、新しいページを作成した場合は、ローカルでビルドして、作成された public の中身をすべて xserver にアップロードすることになります。

フォルダとしてアップロードできるわけではないので少し面倒ですが、重くはないので時間はかかりません。