ブログをWordPressからFreshに移行しました【WIP】

お久しぶりです。Reoです。 2024年初めましての記事です。あけましておめでとうございます。（10月!?)

このブログ「うるおいらんど」のリニューアルをしました。

Before	After
WordPress	Fresh 🍋

WordPressからFreshに移行しました！

全てのブログ記事の移行は完了したので、とりあえず公開しましたが、まだ全然移行中って感じです。

久しぶりに個人サイトと向き合うと、トップページに置くものってなんだろう...というのがさっぱりわからず、まだデザインができていません。

何を見せたいのか、自分1人が運営するサイトで、自分のアピールポイントがイマイチわかりません...最新の記事だけっていうのもさみしいよなぁとは思っています。今後どんどんと賑やかにしていきたいです。

脱 WordPress をしたワケ

さて、まずはどうしてWordPressをやめたかについてです。

• 記事をgit管理したかった。
• 記事を書くまでのステップが長い。(ブラウザでログインして投稿を押して...)
• ブラウザで書いているので、ネット接続が切れて途中で消えちゃうこともしばしば。
• WordPress のブロックエディタが苦手だったので、記事を書く時に html のタグを書いていたことが結構つらかった。
• ローカル環境と本番環境の同期が大変だった。
• テーマの編集が大変だった。
• マークダウンで記事を書きたい。

たくさん理由はありますが、一番の理由は、「記事とサイトをgit管理したかったから」です。次いで、「記事を書くモチベがイマイチ出しづらかったから」です。

また、WordPressを使っているときは、Vagrant でローカル環境を構築していて(【VVV3.2対応】ローカル環境でWordPressを始めよう！の方法)、テーマを本番環境にデプロイする時も、毎回 Vagrant から wordmoveでやっていました。よく VirtualBox の環境が壊れちゃったり、PCを買い替えて最初から構築し直ししなきゃいけなかったり...でテーマを編集する手間が大変でした。

WordPress のテーマを自作して Git 管理していたけれど、Git にはプッシュされていても本番環境にはデプロイしてなかったり、その逆もあったり...とうまくやれていませんでした。

そんなこんなで、ここ数年はまともにブログを書くこともなく、放置しちゃっていました。

Fresh を選んだワケ

Fresh は Deno製のWebフレームワークです。🍋

Fresh を選んだ理由は、「ワクワクしたから」です。

Deno が出てきた時からとても気になっていて、その理由も「かわいいから」でした。舐めてんのかって感じかもしれませんが、本当にかわいいからちょっとみてみてほしいです。アイコンもイラストもｶﾜｲｲ!!

https://deno.com/blog/web-frameworks-on-deno のスクリーンショット

以前、uruly.com というドメインでポートフォリオサイトを作ったんですが、その時に Freshと同じく Deno 製の Aleph.js で作っていました。 uruly.com (ややこしいので近日閉鎖します...)

当時は、Fresh より Aleph.js のが勢いがあり、Aleph.jsを選択しましたが、現在ではFreshの方が人気のようです。（一応 Fresh の方が Deno 公式だしね。）

この Aleph.js は Next.js に影響を受けたフレームワークでしたが、Next.jsよりなんかわかりやすいじゃん！って思っていました。(前回の記事)

Fresh はそれよりさらにわかりやすかった気がします。Fresh のドキュメントを全部読んだからなのか、スキルアップしているからなのかはわかりませんが、楽しく作ることができました。

お気に入りのペンだから勉強が捗る、みたいな感じで、カワイイ！使ってみたい！と思ったからFreshを選びました。

将来性に関しては少し不安ではありますが、こうして無事に新しく記事を書くこともできているので、今のところ Fresh を選んでよかったと思っています。

移行過程について

WordPress から Fresh への移行過程については後日記事にしようと思います。 書いたらリンクを貼ります👇

構成

これまでとこれからの比較を表にしました。

	これまで	これから
フロントエンド	WordPress	Fresh 🍋 (フルスタック)
コンテンツ管理	WordPress(MySQL)	GitHub サブモジュール (DBは使っていない)
サーバー	Xserver	Deno Deploy(サーバーレス)
コンテンツエディタ	WordPress の Classic Editor	Obsidian
ローカル環境	VVV	Deno 環境
デプロイ方法	wordmove	Deno Deploy

図に示すとこんな感じです。

Fresh のリポジトリとブログコンテンツを分けて、コンテンツのリポジトリをサブモジュールとして取得するようにしています。

記事を書くエディタはローカル環境でマークダウンで書いているので、書ければなんでも良いんですが、今は Obsidianを使っています。

Obsidian のおかげで、Templateを使って記事の形式を決定したり、ホットキー機能を使って、ファイルの保存をするように GitHub にコミットしてプッシュするまでするようにできています。(そこからはGitHub Actions で本体のFreshのリポジトリを再デプロイしています。)

サブモジュールでコンテンツを管理するっていうやり方は、特に何かを見たわけでもなく、思いつきでやってみてうまくいったので採用した感じです。

Fresh自体使っている人がまだ少ないなか、誰もやっていないようなやり方に挑戦するのはすごくわくわくして楽しかったです。

画像の扱い

Strapi というオープンソースのヘッドレスCMSを使おうと考えたこともあり、かなり勉強をして、実際に使っているプロジェクトもあるんですが、結局このブログでは使いませんでした。

自分の中の一番の難関が「画像の扱い」で、脱WordPressをしたいが、画像をどうやって扱えば良いのかがわからない問題がありました。

それを解決してくれたのが、コンテンツをサブモジュールとして配置するやり方とObsidianでした。記事を書いているときはObsidian上で画像を配置しちゃえば、そのまま指定のフォルダに入れてくれて、プレビューもちゃんと見れます。

以下の画像のように記事が書けます。

こうして画像を扱えるようになったことが非常に大きくて、重い腰をあげて移行を決心することができたと思います。

今後のうるおいらんど

長年 WordPress で運用していて、脱WordPressをしたいけれどそこまでのモチベが出ず、いくつか新しくドメインを取ってちょっとしたブログをしていました。（uruly.comもそのうちの1つ。最近はuruly.meなんてのも取っていた(これもFreshで構築)）

それらは全て消そうと思います。ややこしいので。利用するとしても、このブログからリンクする形で利用しようと思います。

そして真面目にうるおいらんどの運用をしていこうと思います。

残りタスク

残りFreshでのタスクはだいたいこんな感じ。

• トップページ
• OGP
• 動画を表示できるようにする
• コメントフォーム
• フォント

あとはコンテンツ。自己紹介とか、このサイトについてとかのページは全て元のまま持ってきてしまっているので、書き換えます。

でも、WordPress上にあったコンテンツは、カスタム投稿やコメントも含め、全て大事に持ってきました。今までコメントくれた方、ありがとう。

これからも気軽にコメントができるようなフォームを作りたいです。年内には...！

日報を書いています

日報を書き始めました。

ちゃんとした記事は書けないときも、書きたいことがあったら日報に書くようにしようと思います。日記色が強いです。

うるおいらんどでは新コーナーですが、よく別の名義やドメインでやっていました。それをちゃんと自分でやっていこうと思います。

末長くよろしくお願いします

2014年にこのドメインを取り、はや2024年。10年経ちました。 10年記念の移行になってよかったかもしれないね。

生きているうちは続けていきたいなと思います。

このブログがなかったら知りえなかっただろう人と一緒に、今は仕事をしています。

これまでも、このブログがないと知りえなかった人はたくさんいました。自分にとって、とてもとても大事な場所です。

これからもうるおいらんどをよろしくお願いします。

久しぶりの投稿、緊張するぜ...！