Gatsbyでブログを作ってやったことのまとめ
2020/12/07
この記事は、「Jamstackその２ Advent Calendar 2020」7日目です。
はじめに
$ gatsby new takagi_blog https://github.com/gatsbyjs/gatsby-starter-blogこのコマンドを叩いて作り始めた、このブログでやったことをまとめる。
いろいろやったけど、また新しくブログを作った時にもやると思うことをピックアップしている。
タグページについてはそれだけで1記事になりそうなので、気が向いたら書くことにする。
やったこと
lang属性をjaに
src/components/seo.js
SEO.defaultProps = {
- lang: `en`,
+ lang: `ja`,
meta: [],
description: ``,
}参考: Gatsby で gatsby-theme-blog を使うときの tips | gotohayato.com
日付フォーマット変更
src/pages/index.js
frontmatter {
- date(formatString: "MMMM DD, YYYY")
+ date(formatString: "YYYY/MM/DD")
title
description
}src/templates/blog-post.js
frontmatter {
title
- date(formatString: "MMMM DD, YYYY")
+ date(formatString: "YYYY/MM/DD")
description
}参考: Gatsby で gatsby-theme-blog を使うときの tips | gotohayato.com
外部リンクは別タブで開くように
$ yarn add gatsby-remark-external-linksgatsby-config.js
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
+ {
+ resolve: "gatsby-remark-external-links",
+ options: {
+ rel: "noopener noreferrer"
+ }
+ },
`gatsby-remark-code-titles`,
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`,
],
},
},gatsby-remark-external-links | Gatsby
参考: Gatsby製ブログ内の外部リンクを別タブ対応する | ネコニキの開発雑記
RSSフィード
gatsby-plugin-feedは元から入っていたようなので、設定のみ
gatsby-config.js
- `gatsby-plugin-feed`,
+ {
+ resolve: `gatsby-plugin-feed`,
+ options: {
+ query: `
+ {
+ site {
+ siteMetadata {
+ title
+ description
+ siteUrl
+ site_url: siteUrl
+ }
+ }
+ }
+ `,
+ feeds: [
+ {
+ serialize: ({ query: { site, allMarkdownRemark } }) => {
+ return allMarkdownRemark.edges.map(edge => {
+ return Object.assign({}, edge.node.frontmatter, {
+ description: edge.node.excerpt,
+ date: edge.node.frontmatter.date,
+ url: site.siteMetadata.siteUrl + edge.node.fields.slug,
+ guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
+ custom_elements: [{ "content:encoded": edge.node.html }],
+ })
+ })
+ },
+ query: `
+ {
+ allMarkdownRemark(
+ sort: { order: DESC, fields: [frontmatter___date] },
+ ) {
+ edges {
+ node {
+ excerpt
+ html
+ fields { slug }
+ frontmatter {
+ title
+ date
+ }
+ }
+ }
+ }
+ }
+ `,
+ output: "/rss.xml",
+ title: "高木のブログ",
+ },
+ ],
+ },
+ },参考: How to generate RSS feed with Gatsby.js
サイトマップ
$ yarn add gatsby-plugin-sitemapgatsby-config.js
},
+ `gatsby-plugin-sitemap`,
// this (optional) plugin enables Progressive Web App + Offline functionalitygatsby-plugin-sitemap | Gatsby
参考: Gatsby.jsでサイトマップを作成する - Qiita
OGPタイトルにもブログ名が入るように
src/components/seo.js
{
property: `og:title`,
- content: title,
+ content: `${title} | ${site.siteMetadata.title}`,
},
...
{
name: `twitter:title`,
- content: title,
+ content: `${title} | ${site.siteMetadata.title}`,
},非ラテン文字対応
日本語が対応できていないバグ
src/pages/index.js
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
- excerpt
+ excerpt(truncate: true)
fields {
slug
}参考: Gatsbyのブログで日本語記事の抜粋（excerpt）を正しく表示させる方法 - Qiita
ツイートを埋め込めるように
$ yarn add gatsby-plugin-twittergatsby-config.js
`gatsby-plugin-sitemap`,
+ `gatsby-plugin-twitter`,
// this (optional) plugin enables Progressive Web App + Offline functionalitygatsby-plugin-twitter | Gatsby
参考: GatsbyJSブログの記事にTwitterの投稿を埋め込んだ | RPF NoBlog
その他
hostオプション
package.json
"scripts": {
"build": "gatsby build",
- "develop": "gatsby develop",
+ "develop": "gatsby develop -H 0.0.0.0",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
}