ダッシュで奪取

ゲーム、読書、人生

【Gatsby.js】ブログを立ち上げてみる

夏休みの宿題的な感じで、以前挫折した Gatsby.js リベンジしてみます。

環境

なぜ Gatsby

以前はブログを WordPress で作ってみたりもしましたが、やっぱりセキュリティの問題もありますし個人サイトは静的サイトが良いと思いますよ!自分は幸い乗っ取られこそなかったですが、いろいろな国から大量のアクセスあったりしてめちゃくちゃこわかった思い出があります。

その時の名残で、今もレンタルサーバーに DB 持てるプランのお金を払い続けていますが、うまくいけば一番安いプランに乗り換えられそうです。

※ 過去の二次創作も載せるつもりなので、無料のナウいホスティングサービスは使えない感じです。

立ち上げまで

いちから作るのはとても面倒なので、こちらの雛形を使わせていただきます。

www.gatsbyjs.com

# インストール
$ yarn global add gatsby-cli

# プロジェクトの作成
$ gatsby new gatsby-blog-test https://github.com/gatsbyjs/gatsby-starter-blog
$ cd gatsby-blog-test
$ git branch -M main
$ gatsby develop

こんにちは 世界!!!!!!

サイト情報などの変更

サイトタイトルと投稿者情報

gatsby-config.js

module.exports = {
  siteMetadata: {
-   title: `Gatsby Starter Blog`,
+   title: `アルミ缶の上にあるミカン`,
    author: {
-     name: `Kyle Mathews`,
-     summary: `who lives and works in San Francisco building useful things.`,
+     name: `kyoruni`,
+     summary: `ほげ`,
    },
    ...
アイコンの変更

src/components/bio.js

  ...
  return (
    <div className="bio">
      <StaticImage
        className="bio-avatar"
        layout="fixed"
        formats={["auto", "webp", "avif"]}
-       src="../images/profile-pic.png"
+       src="../images/site/kyoruni.jpg"
        width={50}
        height={50}
        quality={95}
        alt="Profile picture"
      />
  ...

src/images/sitekyoruni.jpg という画像を配置して、それをアイコンにしました。

最初は画像を static に置いておこうと思ったのですが、 gatsby-plugin-imageStaticImage コンポーネントでは使えない?みたいです。

参考:Gatsby Image plugin | Gatsby

The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. The values need to be statically-analyzed at build time, which means you can’t pass them as props from outside the component, or use the results of function calls, for example. You can either use static values, or variables within the component’s local scope.

画像はビルド時に読み込まれて処理される → static の中はビルドされない → 読み込めない(たぶん)

img タグをそのまま書いてもよかったのですが、StaticImage コンポーネントは画像をなんかいい感じに最適化してくれるようなので、これは使うようにしたいです。

ファビコンの変更

src/images/sitefavicon.png という画像を配置しています。

name とか short_name とかめちゃくちゃ気になりますが、あとで確認します……。

gatsby-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
-       icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+       icon: `src/images/site/favicon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

できました!ヤッター

おわりに

今、 いにしえの同人サイト 個人サイトを Gatsby で作っています。あの頃の気持ちが蘇ってきて、めちゃくちゃ楽しいです。

にほんブログ村 IT技術ブログ IT技術メモへ