【第2回】GatsbyJS+Netlifyでブログを始める方法
今回は前回作ったブログのカスタマイズをしていきます。
テーマのカスタマイズ
今回も前回同様gatsby-starter-blogというテーマを例に説明していきます。行うカスタマイズは大きく分けて下のような感じです。
・ブログ名の修正
・Twitterアカウントの設定
・コピーライト(©)の表示
ブログ情報の修正
gatsby-config.js
を開いて任意の部分を変えてください。ブログのURLは公開後で大丈夫です。
module.exports = {
siteMetadata: {
title: 'ブログの名前',
author: '名前',
description: 'ブログの説明',
siteUrl: 'ブログのURL',
social: {
twitter: `Twitterアカウント`,
},
},
・・・
`gatsby-plugin-feed`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `ブログの名前`,
short_name: `名前`,
start_url: `ブログのURL`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `content/assets/gatsby-icon.png`,
},
},
};
プロフィールの修正
src/components/Bio.js
を開いてプロフィールを修正してください。注意点としては、エラーがでるのでTwitterへのリンクは消さないようにしてください。
import React from "react"
function Bio() {
return (
<StaticQuery
query={bioQuery}
render={data => {
const { author, social } = data.site.siteMetadata
return (
・・・
<p>
<strong>{author}</strong>プロフィール
{` `}
<a href={`https://twitter.com/${social.twitter}`}>
Twitter
</a>
</p>
</div>
・・・
export default Bio
次にプロフィールの横に表示される画像の変更です。content/assets
の中にあるprofile-pic
の画像を任意の画像に置き換えてください。サイズは400pxぐらいの正方形です。
コピーライトの修正
最後にコピーライトの修正です。自分のブログ名に変えてください。
import React from "react"
import { Link } from "gatsby"
import { rhythm, scale } from "../utils/typography"
class Layout extends React.Component {
・・・
<header>{header}</header>
<main>{children}</main>
<footer>
© {new Date().getFullYear()}, ブログ名
</footer>
</div>
)
}
}
export default Layout
次にGatsbyJSで作ったブログにCSSを反映させる方法を紹介します。方法はいくつかありますが、最も簡単な方法を紹介するので、先程のカスタマイズが難しかったという人はぜひチャレンジしてみてください。
GatsbyJS製ブログにCSSを反映させる方法【簡単】
先程書いたとおり最も簡単な方法を紹介します。本当はインライン化をしたほうがSEO・表示速度的に良いのですが難易度が高くなってしまうので、やってみたい人は公式ブログを参考にしてみてください。
まずはファイル・フォルダーが下のようになっていることを確認します。
├── package.json
├── src
│ └── pages
│ └── index.js
確認ができたらつぎに下のようにsrc/styles/global.css
を作ります。
├── package.json
├── src
│ └── pages
│ └── index.js
│ └── styles
│ └── global.css
最後にCSSを反映させるためにgatsby-browser.js
で読み込みます。gatsby-browser.js
は一番上の階層にあるので確認してみてください。
├── package.json
├── src
│ └── pages
│ └── index.js
│ └── styles
│ └── global.css
├── gatsby-browser.js
確認ができたらgatsby-browser.js
を開いて下のコードを追加します。注意点として、require
よりも上に書いてください。
import "./src/styles/global.css"
gatsby-browser.js
がない場合はテキストエディタなどで新しく作り、一番上の階層に置きます。
これで設定は完了です。あとはglobal.css
にCSSを書くだけで反映されます。
CSSの書き方やデザインに関してはメインブログで書いているので良かったら見ていってください。
次回はカスタマイズしたブログをGithubにアップロードする方法を紹介します。