gatsby-starter-blogで作成したブログをカスタマイズする

前回 gatsby-starter-blog で構築したブログを少々カスタマイズします。

Table of Contents

Biographyを修正する

アイコンや自己紹介テキストが初期値のままだと困るので差し替えます。
アイコン画像はディレクトリ構成上以下のように profile-pic.jpg として配置されているので、このファイルを差し替えるだけでokです。

$(PROJECT_ROOT)/
  content/
    assets/
      profile-pic.jpg   ← これ
    blog/

自己紹介テキストやSNSプロフィールURLの設定は gatsby-config.js にサイトのメタデータとして設定します。初期値だとGatsbyデベロッパのKyleさんのBiographyが登録されているのでよしなに書き換えます。

  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.app/`,
    social: {
      twitter: `kylemathews`,
    },
  },

よりBiography表示部分のパーツを自分好みにカスタマイズしたい場合は、React Componentを修正しましょう。bio.jsの中身はかなりシンプルなので、HTMLとCSSの心得があればReact自体に馴染みがなくても何とかなるかと思います。

$(PROJECT_ROOT)/
  src/
    components/
      bio.js    ← これ

表示領域の幅を調整する

初期値だとページ全体のmax-widthが42rem (672px相当) と技術ブログを書くには幅が少々キツめです。将来的にサイドバーを設置すると考えても、768pxくらい取っておきたいところです。srcディレクトリ配下のstyle.cssを修正します。

--maxWidth-wrapper に幅を指定します。いくつか既に変数としてパターンがあるので、3xlの48remに変更します。

  --maxWidth-2xl: 42rem;
  --maxWidth-3xl: 48rem;
  --maxWidth-4xl: 56rem;
  --maxWidth-full: "100%";
  --maxWidth-wrapper: var(--maxWidth-3xl);

他にもフォントやline-heightなどお好みで変更可能です。
React界隈だとstyled-componentやCSS Module などを導入してパーツ単位でcss定義することが多いですが、gatsby-starter-blog のテンプレはstyle.cssしかないので分かりやすいですね。

SEO関連

Biographyさえ変えれば最低限公開するための準備は整ったと言えますが、公開するときはSEOやら何やら気になるでしょう。metaタグは src/components/seo.js で設定します。react-helmet が利用されてますが、初期値の記述内容を見れば何となくイメージはできるかと思います。

実際は gatsby-config.js の siteMetadata に設定されている title と description が渡っていくので、標準のまま行くのであれば修正するのは gatsby-config.js のみとなります。 siteUrlも公開ドメインに書き換えておきましょう。

  siteMetadata: {
    title: `Gatsby Starter Blog`,  // ★これ
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,  // ★これ
    siteUrl: `https://gatsby-starter-blog-demo.netlify.app/`,  // ★これ
    social: {
      twitter: `kylemathews`,
    },
  },

公開するときは Google Search Console で検索エンジンに認知してもらうことになるので、ついでに sitemap.xml を生成できるようにしておきます。Gatsbyで作成したページ全てを sitemap.xml に書き出してくれるプラグインがあるので導入します。

$ npm install --save gatsby-plugin-sitemap

gatsby-config.js にプラグイン設定を追記します。

module.exports = {
  siteMetadata: { /* ... */ },
  plugins: [
    `gatsby-plugin-sitemap`,  // ★これ
  ]
}

productionビルドするとルートディレクトリ直下に生成されます。

$ npm run build

code syntax highlight を設定する

技術ブログを書くとなると必須ですね。設定しましょう。 gatsby-starter-blog ではデフォルトで prism.js をMarkdown記法に対応した gatsby-remark-prismjs が入っているので、有効化するだけとなります。詳細はドキュメントを参照していただくとして、gatsby-config.js に以下のように設定してみてください。とりあえずのコードハイライトはされるようになります。

{
  resolve: `gatsby-remark-prismjs`,
  options: {
    classPrefix: "language-",
    inlineCodeMarker: null,
    aliases: {},
    showLineNumbers: false,
    noInlineHighlight: false
  }
},

おつかれさまでした

gatsby-starter-blog の初期値からサイトをカスタマイズしてみました。ここまではあまり React.js に馴染みがなくても問題ない内容だったはずです。今後カスタマイズしたくなる内容として、サイドバーの設置や記事のタグ付けなどが候補として上がってくるかと思いますが、ここから先は React.js と GraphQL を避けて通れなくなってきます。

Gatsby は公式ドキュメントが非常に分かりやすいので、GraphQL 未経験でも全然問題ないと思います。 (React.js 触ったことないとさすがにキツイかも…）

それでは、素敵な Gatsbyライフを！