ゆとって生きたい
WordPressからastrojsに移行してみた

WordPressからastrojsに移行してみた


# astrojs

astrojsに移行した理由

もともとは自分でブログを作るといえばWordPressを使う以外に選択肢を知らずに使っていました。 とはいえ、何年も前でおそらくはSSG(Static Site Generator)という概念が、広がる前だったので選択肢としては悪くはなかったのではないかと思っています。

しかし、WordPressの更新により操作感が大きく変わることがる、記事を書くのにログインする必要がある（markdown等で一度書くと転記が少し面倒）、独自のエコシステムにどっぷり使っている感じる、少額だがサーバコストがかかる等徐々にWordPressから離れたい気持ちが高まっていきました。 そのような中で2024年現在では旧来のWordpressのようにSSR(Server Side Rendering)するものだけでなく、SPA(Single Page Application)、上述のSSGといった様々な選択肢を容易に選択することが出来るようになりました。

その中でSSGはStatic Site Generatorという名称が示すように、アクセス時に都度レンダリングするのではなく事前に静的にページを生成して配信を行う仕組みとなっています。 SNSようなユーザー投稿型のものと比べ更新頻度が少なく更新のリアルタイム性が低くて良いブログには非常に相性がいい存在だと思ってます。 また、その中でもastrojsはbuild結果に可能な限りJavaScriptが使われないようになっており（明示的に使用しない限りはゼロJavaScript）、動作速度が非常に優れているという触れ込みから興味を持ち採用するに至りました。

また、自分がReactに心地よさを感じていたため構文に似ている部分があるというのも後押し担った部分でした。

詳細なastrojsの特徴については公式ページを参照してください。

移行方法

基本的には以下の手順で移行できます。 astrojsは広く使用されているmarkdown形式を扱う仕組みがデフォルトで備わっているため、かなり楽に移行できたかと思います。

具体的には以下のような手順で移行を行いました。

  1. wordpressの管理画面上から記事データ（markdown）, 画像を出力する
  2. 一部形式の互換性がある部分があったので調整する
  3. astrojsのプロジェクトを作成して2で作成したコンテンツを配置
  4. 好き勝手いじる

wordpress-export-to-markdownが動作しなかったので微調整

wordpress-export-to-markdownを使っていたところ、想定したような形式で出力されなかったため出力部分の関数をローカルで書き換えた上で実行しました。 （遠い記憶なので目的があやふやですが誰かのために…）

対応した内容としては function loadMarkdownFilePromiseの処理を変えることで対処しました。

async function loadMarkdownFilePromise(post) {
	let output = '---\n';

	Object.entries(post.frontmatter).forEach(([key, value]) => {
		let outputValue;
		if (Array.isArray(value)) {
			// 追加
            outputValue = JSON.stringify(value)

			// コメントアウト
			// if (value.length > 0) {
			// 	// array of one or more strings
			// 	outputValue = value.reduce((list, item) => `${list}\n  - "${item}"`, '');
			// }
		} else {
			// single string value
			const escapedValue = (value || '').replace(/"/g, '\\"');
			outputValue = `"${escapedValue}"`;
		}

		if (outputValue !== undefined) {
			output += `${key}: ${outputValue}\n`;
		}
	});

	output += `---\n\n${post.content}\n`;
	return output;
}

一部の調整用のShellScriptはChatGPTに書かせた

自分があまり得意ではないため、下記のようなプロンプトでChatGPTにShellScriptを作ってもらいました。 自分でやったほうが早かったかもしれませんが楽しかったです()

元データ
--- 
title: "【JavaScript】Docker上でのnpm/yarnの操作を10倍早くする方法"
date: "2020-05-23"
categories: 
  - "javascript"
tags: 
  - "docker"
  - "node"
  - "npm"
  - "yarn"
coverImage: "programming-583923_1280.jpg"
---
(任意の文章)
を


出力データ
--- 
title: "【JavaScript】Docker上でのnpm/yarnの操作を1/0倍早くする方法"
topics:
  - "javascript"
tags: 
  - "docker"
  - "node"
  - "npm"
  - "yarn"
authors:
  - tkkm39
description: "【JavaScript】Docker上でのnpm/yarnの操作を1/0倍早くする方法"
pubDate: "2020-05-23"
heroImage: "/img/programming-583923_1280.jpg"
---
(任意の文章)

に変更した上で別ファイルに保存するシェルスクリプトを書いてください。

＜条件＞
- title, topics, tags, description, pubDate, heroImageは元データから取得
- authorsは「tkkm39」で固定
- 指定ディレクトリ内のすべてのmarkdownファイルが対象
- 項目が存在しないなど異常な形式の場合は処理を中断する
- 入力ディレクトリと出力ディレクトリを指定できるようにする
- (任意の文章)はmarkdown形式で自由に書かれているので出力時は入力のものをそのまま出力してください

例1
---
<pre class="lang:python decode:true" title="views.py">from app.models import main, relation
main.objects.all().filter(relation__column=something)</pre>
を
<pre><code class="language-python title="views.py">from app.models import main, relation
main.objects.all().filter(relation__column=something)</code></pre>
に変換

---

例2

<pre class="lang:js decode:true" title="router.ts">Vue.config.devtools = true;</pre>
を
<pre><code class="language-js true" title="router.ts">Vue.config.devtools = true;</code></pre>
に変換

感想

ブログシステムとしての使用例が圧倒的で、調べれば大体のことはプラグインが解決してくれるWordPressの存在はとてもありがたいものでした。 パフォーマンスや維持費等もさることながら、自分で好きにいじっていける楽しさを感じています。 （WordPressも出来るはずですが内部の仕組みを理解するハードルが高いのは間違いないと思います）

現段階では、とりあえず動くようになったような段階ですが徐々にレイアウトの追加等をしていきたいと思います。