Gatsbyではブログも作れるので作ってみた。ただ、普通のブログのようなコメントが外部の機能を使わないといけない。静的サイトというのはあまり書き換えることがないことが前提。マニュアルをいっぱい読むのも飽きてきたので、作りながら考えることにした。
作ったのがこれ、まだちゃんと設定ができていない。
gatsby-starter
このgatsby-starter-blogというのはマークダウンファイルを読み込んでブログの形に出力するようだ。
例えばハローワールドのマークダウンは「gatsby-starter-blog\content\blog\hello-world」位置にある。２個目のファイルは「gatsby-starter-blog\content\blog\my-second-post」と別のフォルダーに分かれている。フォルダー名がslugになりサイトのアドレスになるので日本語はやめておいたほうがよさそう。
出力されるページはこのようだ。
英語用のスターターなので日本語のサイトとすると少し変なところがあるので修正したい。hello-worldフォルダー内のindex.mdの最初にFront-matterというタイトル、日付、説明などを追加している。この日付で投稿の順番が整列される。
title: Hello World
date: "2015-05-01T22:12:03.284Z"
description: "Hello World"
日付の表示が英語風だったので日本語風に直した。
- トップページ：src/pages/index.js
- 個別ページ：src/templates/blog-post.js
date(formatString: "MMMM DD, YYYY")
May 01, 2015
date(formatString: "YYYY年MM月DD日")
2015年05月01日
あと ＜Bio /＞の位置を下げた
アマゾンアフィリエイトを貼る方法
説明通りにやると私の環境ではaccessKey、secretKeyをgithubで公開してしまいそうだったのでdotenvから読み込むように書き換えた。
require('dotenv').config();
accessKey: process.env.accessKey,
secretKey: process.env.secretKey,
使ってみた問題点、アイテムが１０を超えると処 理が止まる。なのでissueを投げてみた。
取得するのがタイトルと表紙だけなので、著者名も取得できるように書き換えればなとは思う。コード見てみると、ライブラリ自体がタイトルと表紙しか取得してないのでライブラリ自体を書き換えないといけなさそう。
puppeterを使っているので時間がかかる。アマゾンアフィリエイトを先に処理させるようにしないと干渉する。
設定を入れるだけでサイトマップを自動で作ってくれる。
SEO対策をどうするかだが、OGPの設定が文字だけになっている。
簡単に作った割には、サイトパフォ ーマンスが高い。