Gatsby

IPFS化するためにPath Prefixを付けるようにした。 (前回はこれが分からずに無理矢理Pathを変えていた。)

gatsby-config.jsに以下を追加。

  pathPrefix: `/ipns/blog.sighash.info`

ビルド時に以下のように指定。

npx gatsby build --prefix-paths

--prefix-pathsを付けずにビルドすればsurge.sh用になるが、 今後はsurge.shを使うのはやめてIPFS一本にしたい。

最終動作確認はipnsのPathを用意して、pythonのワンライナーHTTPサーバーを実行する。

mkdir ipns
cd ipns
ln -s ../public blog.sighash.info
cd ..
python -m http.server 8000

http://localhost:8000/ipns/blog.sighash.info/ で本番に近い環境で試せる。

前回のPostではserveというパッケージを使っていたが、ドットが含まれるPathだと拡張子として判断されるのかうまくいかなかったためpython3のやつにした。

CaddyはCaddy2に変わってからいろいろとルールが変わってややこしいし、TLSとかを使わないならこれで十分かと思う。

あと、タイトルとfaviconがおかしかったのを直した。

--- a/src/templates/blogTemplate.js
+++ b/src/templates/blogTemplate.js
@@ -1,6 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
+import SEO from "../components/seo"
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
 }) {
@@ -8,6 +9,7 @@ export default function Template({
   const { frontmatter, html } = markdownRemark
   return (
     <Layout>
+      <SEO title={frontmatter.title} />
       <div className="blog-post-container">
         <div className="blog-post">
           <h1>{frontmatter.title}</h1>

こんな感じで。

markdownのテンプレートそのままだとトップページとの整合が取れていなかったことが原因だった。

あとは現状トップページのインデックスを手作業で作成しているのでGraphQLをうまく駆使して自動化したい。