BETA

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

投稿日:2019-10-13
最終更新:2019-10-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として使用されているので画像を変更

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

hiko1129の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう