hiko1129's note

GatsbyJSのStarter Blogを使用してブログを作った際に変更した箇所についての備忘録

2019/08/13

今回は自分がGatsbyJSのStarter Blogを使用してブログを作る際に変更した箇所を記載します。

gatsby-config.jsのsiteMetadataの変更

下記強調表示部分を適宜変更。

  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プラグインのオプションの変更

下記強調表示部分を適宜変更。

{
  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の変更

下記のコードを適宜変更。

<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を追記。

.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;
}
import "./src/styles/global.css"

src/styles/global.cssを読み込むためにgatsby-browser.jsに上記の1行を追記。

seo.jsのSEO.defaultPropsのlangを変更

下記強調表示部分のlangをenからjaに変更。

SEO.defaultProps = {
  lang: `en`,  meta: [],
  description: ``,
}

日付の修正

日付の表記を変更。YYYY/MM/DDにしておいた。

frontmatter {
  date(formatString: "MMMM DD, YYYY")  title
  description
}

pages/index.jsのSEO titleの変更

下記を変更。投稿一覧にしておいた。

<SEO title="All posts" />

gatsby-icon.pngを使用していた箇所の変更

iconとして使用されているので画像を変更


hiko1129

hiko1129
Twitter GitHub Qiita Qrunch Blog