Gatsby のプラグインを利用することで、ブログに必要な数々の設定を簡単におこなうことができた。

PWA 対応

• Add manifest and favicon

gatsby-plugin-manifest が利用可能。starter で自動インストール済み。

マニフェストの内容とアイコン類は、下記のサイトを使って自動生成することができる。それを gatsby-config.js にコピペすれば良い。

• 手順: https://takumon.com/2018/10/08/
• 生成: https://app-manifest.firebaseapp.com/

OGP 対応

starter に付属のコンポーネント <SEO /> を利用すると、多くの項目について、自動で OGP を設定してくれるため、こちらから追加で何かをする必要はほとんどなかった。

テーマ変更

• Add typography theme of github

starter は typography.js で文字のスタイリングを行っている。typographyjs のテーマに GitHub 版の typography-theme-github があったので、これを適用した。

目次の追加

• getting-table-of-contents

query にtableOfContentsを追加すると、目次情報の HTML を取得することができる；

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      tableOfContents
`;

あとはこれをマークアップしつつ表示すれば OK；

<section className={styles.toc}>
  <h1 className={styles.tocHeader}>目次</h1>
  <div className={styles.tocBody} dangerouslySetInnerHTML={{ __html: post.tableOfContents }} />
</section>

syntax-highlighter

• Add syntax highligher

gatsby-remark-prismjs のオプションで指定可能。

• Add gatsby-remark-code-titles

gatsby-remark-code-titles を追加すると、さらにファイル名表記も付与可能に。

Google Analytics

• gatsby-plugin-google-analytics

プラグイン自体は、すでに starter に入っています。gatsby-config.jsを書き換えるだけで OK です；

{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    trackingId: 'YOUR TRACKING ID',
  },
},

RSS Feed

starter でデフォルト有効です。/rss.xml で配信されます。

Sitemap

• gatsby-plugin-sitemap

sitemap プラグインをインストールし、サイト情報とオプションを設定すれば OK です；

siteMetadata: {
  siteUrl: `https://suzukalight.com`,
},
plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      sitemapSize: 5000,
    },
  },
]