Technology

Gatsby のサイトカスタマイズ

PWA対応・OGP対応・テーマ変更・目次表示・syntaxHighlight・GA設定・RSS・Sitemap

2019/6/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,    },  },
]
suzukalight

Written by suzukalight.