このサイトを作るまでの記録。(時系列順)
実際に作業を行なったメモに追記、編集して投稿してるので投稿日と作業日は一致しない。スターターを
gatsby newしたのは 2022 年の 3 月上旬。gatsbyのバージョンは 4.9
環境構築はパス。
VSCode
を使って作業する。
Gatsby Extension Pack と GatsbyHub っての入れとく。(GatsbyHub はいらないかもしれない)
スターター入れる
gatsby-starter-blog。
$ gatsby new [YOUR_BLOG_NAME] https://github.com/gatsbyjs/gatsby-starter-blog
プロフィール画像の変更
src/images/profile-pic.png を自分の画像に変更する。
ファイル名はなんでも良いが、僕は profile-pic.jpg にした。(png のプロフィール画像持ってなかったから jpg)
ファイル名を変えた場合は src/components/bio.js の 33 行目を変更する必要がある。
<StaticImage
className="bio-avatar"
layout="fixed"
formats={["auto", "webp", "avif"]}
src="../images/profile-pic.jpg" // <- ここ
width={50}
height={50}
quality={95}
alt="Profile picture"
/>
siteMetadata の編集
gatsby-config.js の social の欄に github と unityroom を追加しておいた。
siteUrl は後ほど設定する。有効な(存在する?)URL じゃないと gatsby develop とかした時に怒られるので今はデフォルトのままに。
// gatsby-config.js
module.exports = {
siteMetadata: {
title: `2357の日記`,
author: {
name: `ryota2357`,
summary: `高校3年`,
},
description: `開発での学び、発見を残すところ`,
siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
social: {
twitter: `95s7k84695a`,
github: `ryota2357`,
unityroom: `ryota2357`,
},
},
plugins: [
...
],
}
追加したのを反映するため src/components/bio.js を編集していく。
GraphQL クエリに github、unityroom を追加。
あと、リンクを設置。
// src/components/bio.js
...
const Bio = () => {
const data = useStaticQuery(graphql`
query BioQuery {
site {
siteMetadata {
author {
name
summary
}
social {
twitter
github <- 追加
unityroom <- 追加
}
}
}
}
`)
...
return (
...
Written by <strong>{author.name}</strong> {author?.summary || null}
// you should follow .. とか書いてあったけど削除
// あとで色々デザイン変えるだろうし雑にTwitterのところと同じ感じで追加。
// ↓
{` `}
<br />
<a href={`https://twitter.com/${social?.twitter || ``}`}>Twitter</a>
<br />
<a href={`https://github.com/${social?.github || ``}`}>GitHub</a>
<br />
<a href={`https://unityroom.com/users/${social?.unityroom || ``}`}>UnityRoom</a>
// ↑まで
</p>
)}
</div>
)
}
export default Bio
gatsby-node.js では siteMetadata オブジェクトを明示的に定義してある。
siteMetadata オブジェクトにプロパティを追加したので、これらも明示的に定義しておく。なお、必須ではない模様。
// gatsby-node.js
...
exports.createSchemaCustomization = ({ actions }) => {
...
type Social {
twitter: String
}
...
日付を YYYY/MM/DD に
index.js の fromtmatter 内 date(formatString: )を編集。
...
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
nodes {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "YYYY/MM/DD") ←ここ
title
description
}
}
}
}
`
Seo コンポーネント
components/seo.js のところ、lang が en になってるので ja にする。
...
Seo.defaultProps = {
lang: `ja`,
meta: [],
description: ``,
}
...
plugin 調べ
gatsby-config.js
入ってるプラグインが何をやってるかを調べてコメントしとく。
/*
- gatsby-plugin-image (https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)
画像のレスポンシブ化。複数の画像サイズを自動生成してくれる
gatsby-source-filesystem (https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/)
ローカルファイルをGatsbyで使えるノードに変換してくれる。
- gatsby-transformer-remark (https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/)
マークダウンパーサー。
- gatsby-remark-images (https://www.gatsbyjs.com/plugins/gatsby-remark-images/)
Markdown内での画像をいい感じに処理してくれる。レスポンシブ化とか
- gatsby-remark-responsive-iframe (https://www.gatsbyjs.com/plugins/gatsby-remark-responsive-iframe/)
iframeのサイズ調整してくれる
- gatsby-remark-prismjs (https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/)
PrismJSってのでコードのシンタックスハイライトするやつ
- gatsby-remark-copy-linked-files (https://www.gatsbyjs.com/plugins/gatsby-remark-copy-linked-files/)
Markdown内のローカルファイルをpublicに移動して、生成されたHTMLはそのpublicのファイルを指すようにしてくれる
- gatsby-transformer-sharp (https://www.gatsbyjs.com/plugins/gatsby-transformer-sharp/)
ImageSharpでサポートされてる画像にサイズ調整、レスポンシブ対応とかしてくれる。
あと、その画像のノードを作ってGraphQLで使えるようにも
- gatsby-plugin-sharp (https://www.gatsbyjs.com/plugins/gatsby-plugin-sharp/)
画像処理の低レイヤのプラグイン
- gatsby-plugin-feed (https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/)
RSS feed を作ってくれる
- gatsby-plugin-manifest
参考: https://takumon.com/2018/10/08/
- gatsby-plugin-react-helmet (https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/)
Reactコンポーネントでドキュメントヘッダを編集できるようにしてくれるやつ
src/components/seo.jsとかで使ってる。
*/