うるおいらんど
アイキャッチ画像

ブログをWordPressからFreshに移行した過程の紹介①【背景編】

DenoFresh

どうも。Reoです。

ブログをWordPressからFreshに移行しました【WIP】の記事を書いて、早1週間が経ちました。

WordPressを離れて、実際にFreshで構築したブログになっているわけですが、OGPがうまく出ていなかったり、画像が重かったり(特に処理してないのでそうよね)、いくつも問題は抱えていますが、今のところ移行してよかったなと思っています。

今回は、このブログの移行をどうやって進めていったのかを書いていこうと思います! ブログ移行の背景だけで長くなりすぎたので、いくつかの記事に分けます。sorry

マークダウンとの出会い

マークダウンで文章を書くことを覚えはじめた頃から、WordPress で記事を書きながら、この記事もマークダウンで書けたらいいのになぁと思うことが増えていきました。

2019年初めの時点で、すでにマークダウンで書けたらいいのになぁということを考えていたようです。

このブログも随時改善していきたいです。最近マークダウンで書くのが楽すぎて、このブログもそうしようかなぁなんて考えています。

# 2019年の抱負と今年使う手帳・迷った手帳の紹介

WordPressのまま、マークダウンで書けるプラグインを入れたこともありましたが、結局WordPress上では使いづらく、ブログを書くときは Classic Editor を使い続けていました。

テーマをいじる大変さなどもあり、だんだんと記事を書くこともなくなってしまいました。(精神的にも、スキルアップすると記事が書きづらくなるとかも。)

前回の記事にも書きましたが、脱 WordPress をしたかった理由は以下の通りになります。

脱 WordPress をしたワケ

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

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

多くのWebフレームワークが出てきていたので、WordPressにこだわることもないんじゃないかなと思ってきていました。

そんなこんなで、2022年には完全に WordPress をやめる気満々でした。

WordPress で記事を書く気になるのがなかなか難しいので、特筆して書きたいことがない限り、この記事が WordPress うるおいらんどでの最後の投稿になるかもしれません。

# 【近況】ポートフォリオサイトを作ったりOKAIMOをアップデートしたりしました。

それから実際に行動に移すのに、2年かかっちゃいました。

エディタを自作しようとした

マークダウンで記事を書きたい!だったら自分でエディタをつくっちゃえばいいんじゃない?!と思って Next.js で作りました。

マークダウンで書いて、HTMLを吐き出すものはできました。Gitにもそのままプッシュができます。

しかし、画像のアップロード周りを頑張る元気がなく、挫折しました。

3年前ぐらいに作ったらしいんだけど、久しぶりに見ると結構頑張っててすごいびっくりするw(知っているか、この時代にChatGPTはいない)

Strapi との出会い

StrapiというJavaScriptで書かれたオープンソースのヘッドレスCMSと出会いました。

当時は Strapi でブログを構築し直すつもりでした。(2022年ごろかな?)

ベアマケRさんの記事「自前のブログ作り① ー 技術選定 │ ベアマケR」に大変お世話になりながら、自分も真似してブログを作っていました。JamStackという言葉もよくみましたね。

実際に uruly.com というサイトでは、Strapi を利用してブログを書いていました。(まぎらわしいので最近閉鎖しました。)

Strapi を選ばなかった理由

このブログには、Strapi は採用しませんでした。 理由はいくつかあります。

  • 記事の管理が大変(既存の記事を持っていくのなんてどうしたら...)
  • カスタマイズが大変
  • Strapi 自体も保守してデプロイして.... 大変すぎ
  • マークダウンだけど、記事の書き心地がかなりイマイチ
  • もっといい方法と出会ってしまった。(後述のObsidian)

結構ギリギリまでStrapiを使うことは考えていましたが、書き心地の大変さと保守の大変さで渋っていました。

Deno との出会い

どういう出会いだったかは忘れましたが、多分Twitterに流れてきたとかだったと思います。

かわいい〜これなんだろ〜と気になりはじめ、Deno で作られたものたちにわくわくし、そこから Next.js ライクにかける Aleph.js にたどり着きました。Deno 使ってみたい欲から Aleph.js で遊んでいました。(これも uruly.com )

Aleph.js の体験が結構良かったのもあり、使うWebフレームワークは Deno関係がいいなぁと考えるようになりました。

最終的にDenoを使ったWebフレームワークの Aleph.js とFreshを比較して、Fresh を選ぶことになります。(現在使われている方を選びました。)

Deno や Fresh との出会い自体は、ブログを移行するきっかけではないですが、Next.js や React じゃなく Fresh がいいなぁとはぼんやり考えていました。(CMSっていうわけではないので)

Obsidian との出会い

今年(2024年)に、Obsidianと出会いました。Notion の代わりないかなぁと思っていた矢先に、XでObsidianを紹介している方がいて、気になってインストールしてみていました。

Obsidianを導入したての時は、意外と苦戦しました。

とりあえず使ってみた

がんばらないObsidianノート術 - Qiitaを見て、良さそうなプラグインはいれてみてはいいけれど、そこで満足しちゃって、5月に一度使っただけで投げてますね。

Thino
デイリーノート

Obsidian のデフォルトのデイリーノート機能はかなり好きです。以前に別のブログで日報を書いていたこともあり、日付ごとにまとめてくれるのはすごく嬉しい機能でした。

6月に、友人にObsidianを紹介して、紹介するからにはちゃんとお勉強しなきゃ...と思い、積極的に使うようになりました。

なにかあったら Thinoにメモ!をするようになりました。

Notion から移行

まずは Notion に書いていた記事を全てObsidianに移行してみました。

個人利用では、Notionを使うまでもないことが多く(機能を全く使わないので...)、Notion 上の記事もGit管理したいなぁと思っていたので移行しました。

画像の置き場所

Notion の記事をObsidianに持ってきた時に、画像が正しく表示されていることに気づきました。

単に、相対パスで imagesフォルダにある画像を表示していてくれるだけの機能です。

別にVSCodeにもそういったプレビュー機能はあるし、マークダウンを書いている時に画像が表示されることなんて大したことないかと思うかもしれませんが、自分にはすごく大きな気づきでした。

これってもしかして、ブログ記事も書きやすいんじゃないか...?と思いはじめたわけです。

だんだん好きになってきた

メモをタイムラインを形式にまとめてくれるThino と、単にマークダウンエディタとして、だんだんと気に入って使うようになっていきました。

Obsidianのたくさんある機能は正直全く使いこなせていません。Obsidian の特徴である wiki 機能も使っていません。使いこなそうとすると、上手く使いこなせないので、シンプルに書く意欲の湧くエディタとして使っています。

ローカル上のマークダウンを単にObsidianというアプリケーションを通して開いているだけっていうのも気に入っているポイントです。

導入しているプラグインについては、また続きの記事にて書こうと思います。

仕事がひと段落した

やっていた仕事がひと段落して、次にやることが決まるまでの間に、久しぶりに自分のことをやってみるかーっていうので、Obsidian上にやりたいことをまとめてみました。

そのときのやりたいことのひとつが「うるおいらんどの整備」でした。

Fresh も触ってみたいし、調べるだけ調べてみるか〜とやりはじめて、気づいたら完了していました!

その時に書いたメモの通りになったね。

背景をまとめてみて

自分が脱WordPressになったきっかけは

  • Fresh のワクワク感
  • Obsidian の存在
  • 仕事がひと段落

この3つがそろったおかげじゃないかなと思います。

でも根底にあるのは、「すべてのものを Git で管理したい!」という思いかもしれません。git 信者だ。

うるおいらんどに手をつけるまでに、いくつかのブログを作っては消しを繰り返してきました。 WordPress で作ったものもあれば、Next.js で作ったものもあり、Aleph.js で作ったものもあります。

それらをやってきていたおかげで、かなりスキルアップはできていたんじゃないかなと思います。

本当は、当事やっていたことも記事にしていればよかったんだけど、なんでしてないんだろうね!(実は一部他のとこでしてるけど!)

実際に行動できたのは、3つのきっかけと、ちまちまとWebフレームワークを触ってきてスキルアップをしていたおかげかもしれませんね。

つづく

背景だけで長くね?!ってなったので、一旦投稿して続くことにします!

数年間ほぼ放置してたから、いっぱい書いていこう。では、また!

Comments

コメントはありません。

現在コメントフォームは工事中です。