ブログの編集をするのにVSCodeを使うのをやめた話
作成日カテゴリ: blog dev タグ: CMSnuxtPython
ブログ構築当初は記事書くのVSCodeでもいいか～と思っていたが、だんだんしんどくなってきて更新頻度が下がってきてしまっていた。
なんでかな？と思って思い返してみると、やはりVSCode開くのめんどいってことかな。と。
ということで、思い切ってVSCodeで記事を書くのをやめてみた。 というお話。
変更前の構成
構成っていうほどでもないんですが。
NuxtContentsで構築したブログのPostフォルダをVSCodeで開き、Markdownを手打ちで編集していた。 PushもVSCode上からできるし結構便利じゃん？みたいな。
公開はAmazon CodeCommitにPushされたのをトリガーにCodeBuildでビルドしてS3にアップロードしている。 のでランニングコストはほぼかかってない構成になってる。
問題点
問題点は以下の２点
- Frontmatter書くのがめんどい
- 記事の最初の部分に書く必要があるメタデータ的なアレ 記法が決まってるので手打ちするのは結構めんどい
- 画像の管理が超めんどい
- VSCodeで画像を管理するのであたりまえ・・・ フォルダに画像を入れた後は相対パスで記事中に参照の定義を書かないといけない。
２点しかないじゃんって感じではあるが、記事を書くという体験においては文章をどんどん打っていける快感みたいなのが重要で、挙げた２点はどちらもその文章を打っていくというところを致命的に中断させてしまう問題点である。
中断っていうか、１つ目については記事のつくりはじめのところで、いきなり腰を重くさせてしまう要因でもあった。
変更後の構成
リポジトリにPushして自動的にビルドするとかのところは変えていなくて、記事を書くというところだけ楽にできるようにした。 具体的には、PythonとFlaskを使ってちょっとしたWebアプリを作ってそこから編集できるようにした。
DBとかあると管理が面倒なので、一覧系の機能とかタグ検索とかはPythonから直接フォルダをスキャンして実現している。 現状は記事の数が少ないのでこれでいいかなと。 今後記事が増えてきて動作が遅くなってきたら対策考えましょう。。。
以下、各画面の紹介。 デザインはGeminiがやったんで、あんま気にしないでください。。。
記事一覧
メインの画面。記事の一覧を表示する。 公開ステータスとファイルの更新日が一応表示される。
新規の時は右上のボタン、既存の記事は一覧を選択すれば記事の編集画面に遷移する。
イメージライブラリ
画像の管理をする画面。 とりあえずで作ったが、編集画面からでもアップロードできるので今のところは間違って上げた画像を削除する用の画面になってる。
Pushボタン
記事の完成後にPushするボタン コミットメッセージを自動でつけるか自分でつけるか一応選べる。 まあ自動といっても、日付と「自動でコミットしました」みたいな一言がつくだけだけど。
記事の編集画面
一番力が入ってる画面。（アタリマエ）
真ん中にMarkdownエディタが表示されるのと、右上のほうに普段使いそうなボタンを配置してある。
Tags/Cateogriesボタンはタグとカテゴリをほかの記事から引っ張ってきて今開いてる記事に適用できるボタン。
問題点のところではFrontmatterで一括して書いちゃってたので言及してなかったけど、タグも結構負担だったんだよね。
記述を統一しないと、タグとかで記事がまとまってくれないので・・・
しかも、なんと、この画面、Ctrl+Sで記事を保存できます。 めちゃ重要！！ 仮保存のためにイチイチ右上のボタンをマウスで押すってのも微妙なので・・・
今後追加したい機能
画像の整理機能
ファイルのフォルダ間移動とかリネームとか。
プロフィールの編集画面
あんまり変えないだろうけど、今後はVSCodeで開く機会がへるので変えたいときに変えられるといいなって感じ。 特にアイコンとかは頻繁に変えたいような気もする。
まとめ
ここまで書いててすでに楽しいので施策は成功！って気がする。
改善案もどんどん出てくるのでモノづくり的な観点としてもいい感じですね。 やっぱツール作るのたのしい。
