今回は自分がGatsbyJSのStarter Blogを使用してブログを作る際に変更した箇所を記載します。
下記強調表示部分を適宜変更。
1
2
3
4
5
6
7
8
9
| siteMetadata: {
title: `Gatsby Starter Blog`,
author: `Kyle Mathews`,
description: `A starter blog demonstrating what Gatsby can do.`,
siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
social: {
twitter: `kylemathews`,
},
}
|
gatsby-config.jsのgatsby-plugin-manifestプラグインのオプションの変更
下記強調表示部分を適宜変更。
1
2
3
4
5
6
7
8
9
10
11
12
| {
resolve: `gatsby-plugin-manifest`,
options: {
name: `Gatsby Starter Blog`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `content/assets/profile-pic.png`,
},
}
|
src/components/bio.jsの変更
下記のコードを適宜変更。
1
2
3
4
5
6
7
8
| <p>
Written by <strong>{author}</strong> who lives and works in San
Francisco building useful things.
{` `}
<a href={`https://twitter.com/${social.twitter}`}>
You should follow him on Twitter
</a>
</p>
|
content/assets/profile-pic.jpgの変更
content/assets/profile-pic.jpgの変更でbioのプロフィール画像を変更。
src/styles/global.cssの作成と追記
コードの一部を強調表示するために下記のCSSを追記。
1
2
3
4
5
6
7
8
9
| .gatsby-highlight-code-line {
background-color: #feb;
display: block;
margin-right: -1em;
margin-left: -1em;
padding-right: 1em;
padding-left: 0.75em;
border-left: 0.25em solid #f99;
}
|
1
| import "./src/styles/global.css"
|
src/styles/global.cssを読み込むためにgatsby-browser.jsに上記の1行を追記。
seo.jsのSEO.defaultPropsのlangを変更
下記強調表示部分のlangをenからjaに変更。
1
2
3
4
5
| SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
|
日付の修正
日付の表記を変更。YYYY/MM/DDにしておいた。
1
2
3
4
5
| frontmatter {
date(formatString: "MMMM DD, YYYY")
title
description
}
|
pages/index.jsのSEO titleの変更
下記を変更。投稿一覧にしておいた。
1
| <SEO title="All posts" />
|
gatsby-icon.pngを使用していた箇所の変更
iconとして使用されているので画像を変更