Gatsbyで個人ブログを開設する

使用したことある

高品質のドキュメントが残せる

ブログと言う感じではない

カスタムデザインは難しそう

reactのフレームワーク

参考

Starter用のブログを作成する

code: (bash)

npm install -g gatsby-cli

code: (bash)

# gatsby new ${ブログ名} ${使用するTemplateのURL}

code: (bash)

cd blog

gatsby develop -H 0.0.0.0

gatsby starter blog Templateが読み込まれていることが確認できる。

https://imgur.com/hzI3mxb.jpg

buildコマンドで静的ファイルを作成する。

code: (bash)

gatsby build

serveコマンドでproduction環境のWebサーバをローカルに立てることができる。

code: (bash)

gatsby serve

ここまでを通して、gatsbyのstarter blog Templateを使ってローカル環境でブログを立てることができた。

他のTemplateを使用してBlogを作成する

TemplateとなるブログのDL

code: (bash)

cd blog

gatsby develop

https://imgur.com/RgF4cDu.jpg

ソースコード修正

自分の好みのカスタマイズにするため、コードを修正する。

Frontend知識が皆無なので、手当たり次第コードを修正していく。

(React.jsの知識・概念が理解できていれば修正箇所は容易にわかると思う)

ちなみに、リポジトリ直下は以下のファイルで構成されている

code: bash

$ tree -L 1

.

├── CODE_OF_CONDUCT.md

├── LICENSE

├── PULL_REQUEST_TEMPLATE.md

├── README-zh-Hans.md

├── README-zh-Hant.md

├── README.md

├── data

├── gatsby

├── gatsby-browser.js

├── gatsby-config.js

├── gatsby-node.js

├── netlify.toml

├── node_modules

├── package.json

├── public

├── src

├── static

├── stylelint.config.js

└── yarn.lock

configの修正

どこから手をつけていいか分からないので、

imgurに変更

ナビゲーションバーを変更

Descriptionを任意の内容に変更

https://imgur.com/0hIHsXM.jpg

少しだけ変わったが、まだtemplateのままの箇所が多いので、別の箇所のコードを修正する。

conponentsの修正

code: (console)

ymmmtym@macbook-pro ~/blog $ tree -L 1

.

├── Card

├── Content

├── ExternalLink

├── Footer

├── GithubCorner

├── Header

├── Image

├── JueJin

├── Layout

├── Navbar

├── Pagination

├── SEO

├── ShareBox

├── Sidebar

├── TableOfContent

├── Tag

└── Transition

17 directories, 0 files

この中のファイルを修正すれば、Blogのデザインを変更することができる。

code: (console)

ymmmtym@macbook-pro ~/blog $ tree -L 2 Card/

Card/

├── index.js

└── index.scss

0 directories, 2 files

この時点で、トップページのデザインは個人ブログとして運用するのには遜色ないレベルになった。

https://imgur.com/1iUZtX8.jpg

ここまでで、修正したファイルは以下のようになった。

code: (console)

ymmmtym@macbook-pro ~/blog $ git status

On branch develop/first-my-site-desion

Changes not staged for commit:

(use "git add <file>..." to update what will be committed)

(use "git restore <file>..." to discard changes in working directory)

modified: data/template/config.json

modified: src/components/Card/index.js

modified: src/components/Header/index.js

modified: src/components/Navbar/index.js

modified: src/components/Sidebar/Friend/index.js

modified: src/components/Sidebar/Information/index.js

modified: src/components/Sidebar/LatestPost/index.js

modified: src/components/Sidebar/index.js

pages/templatesの修正

404やブログ投稿記事のHeader/Footerなどの設定を修正する。

code: (console)

ymmmtym@macbook-pro ~/blog $ git status

On branch develop/first-my-site-desion

Changes not staged for commit:

(use "git add/rm <file>..." to update what will be committed)

(use "git restore <file>..." to discard changes in working directory)

modified: data/template/config.json

modified: src/components/Card/index.js

modified: src/components/Header/index.js

modified: src/components/Navbar/index.js

modified: src/components/Sidebar/Friend/index.js

modified: src/components/Sidebar/Information/index.js

modified: src/components/Sidebar/LatestPost/index.js

modified: src/components/Sidebar/index.js

modified: src/pages/404.js

modified: src/pages/tags.js

modified: src/templates/blog-post.js

modified: src/templates/tag.js

新規記事の投稿

独自ドメインの取得

お名前.comより取得したサブドメインを使用する

GithubにPush

secretな情報を伏せて、githubにソースコードをpushする。

環境変数を読み込ませるように変更。

yarn add dotenv

Netlifyでdeploy

エラーが出たので、nodeのversionを上げた。

環境変数が取得できなくてハマる。以下を見て解消した。

Custom Domainの設定

以下が参考になった

その他

更新時のgit branch modelも書いておきたい