KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

gatsby-starter-blogを使ってブログを作ってみた

 Gatsbyではブログも作れるので作ってみた。ただ、普通のブログのようなコメントが外部の機能を使わないといけない。静的サイトというのはあまり書き換えることがないことが前提。マニュアルをいっぱい読むのも飽きてきたので、作りながら考えることにした。

作ったのがこれ、まだちゃんと設定ができていない。

kyukyunyorituryo.github.io

 

gatsby-starter

 このgatsby-starter-blogというのはマークダウンファイルを読み込んでブログの形に出力するようだ。

www.gatsbyjs.com

bel-itigo.com

 例えばハローワールドのマークダウンは「gatsby-starter-blog\content\blog\hello-world」位置にある。2個目のファイルは「gatsby-starter-blog\content\blog\my-second-post」と別のフォルダーに分かれている。フォルダー名がslugになりサイトのアドレスになるので日本語はやめておいたほうがよさそう。

 出力されるページはこのようだ。

gatsbystarterblogsource.gatsbyjs.io

 

 英語用のスターターなので日本語のサイトとすると少し変なところがあるので修正したい。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,

 

使ってみた問題点、アイテムが10を超えると処理が止まる。なのでissueを投げてみた。

github.com

 取得するのがタイトルと表紙だけなので、著者名も取得できるように書き換えればなとは思う。コード見てみると、ライブラリ自体がタイトルと表紙しか取得してないのでライブラリ自体を書き換えないといけなさそう。

tech.qookie.jp

qiita.com

puppeterを使っているので時間がかかる。アマゾンアフィリエイトを先に処理させるようにしないと干渉する。

yayo1.com

設定を入れるだけでサイトマップを自動で作ってくれる。44

www.gatsbyjs.com

SEO対策をどうするかだが、OGPの設定が文字だけになっている。

bel-itigo.com

簡単に作った割には、サイトパフォーマンスが高い。

knowledge.sakura.ad.jp

99nyorituryo.hatenablog.com

 

99nyorituryo.hatenablog.com