Cover image

Gatsby のサイトカスタマイズ

2019/06/30

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

PWA 対応

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

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

OGP 対応

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

テーマ変更

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

目次の追加

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

templates/BlogPost/index.js
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

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

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

Google Analytics

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

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

RSS Feed

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

Sitemap

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

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

Writings

blogsnippetcourse
Home©︎ suzukalight