ウェブサイトデザインに四苦八苦
要約
ウェブサイトのデザイン。Astroのサイトに気にいったデザインのテーマがあった。やっとでき上ったのはいいけれど、熱が冷めて、いつもの通りサイトの内容の更新が。その内にAstroがバージョンアップしてた。さあ大変なことに。habit - website
Astroでサイトづくり
体幹強化に興味を持っている
Ninjinです。
以前はワードプレスというブログシステムを利用していましたが、セキュリティ対策でバージョンアップ依頼のメールが度々送られてきて、長年放置していたらログイン情報忘れてた。
時は過ぎ、
技術は進歩していた。静的サイトジェネレーターが便利で使いやすくなっているではないか。
昔に比べて情報も多くて何とかなりそうな気がして、その中でもAstroに出会ってから、サイトづくりにわくわく感がでてきたのです。ちなみに、詳しい内容は、ほとんどわからないので、試行錯誤で「うまく表示できた」って喜んでいるといったレベルです。
全てを手作りすることはできないので、テーマ選びでいいのを見つけたので使ってみることとなったのです。
テーマAstrowindは、何でもできる優等生なのですが。
いくつかのテーマを試して、darkモード（やってみたかったんです）が問題なく使えて、それと、それと、えっと…スキルがなくて他に説明できない。だって、Astrowindは優等生なんです。知識がなくても使っていたら何とか出来上がっていくのです。\
「あれ？」
（中身をいじって、自分の使いやすいようにアレンジし始めると、頭の中で整理ができない状況に陥っている）
レスポンシブ対応で画像が何種類も作成さるのを止めようと、いろんなファイルの内容をいじって、制止しようと毎日必死になっていた。
何でもできる優等生の暴走は、知識のないNinjinには扱い切れなくなってきたのです。
追い打ちをかけたのが、Astroのバージョンアップ。
「お前もか！」
Astroのバージョンアップで何が何だか、わけわからん
時が過ぎるのは早く、Astroがバージョン2からバージョン4になっていて、性能が上がっているのでアップグレードしないてはないと、サイトの指示通りにバージョンアップ完了。
いざ、動かしてみると、というかエラーから始まる。
設定ファイルが変わるわ、画像最適化処理ソフトsquooshがSharpへ変わるわ。せっかくsquooshの設定ファイルimpl.jsを見つけ出したばっかりなのに、今度はSharpの設定ファイルを何日もかけて探さなければと思うと、心が折れて落ち込んでしまうであった。
探索結果を先に言うと、constructor.jsでした。やはり、何日も電脳空間をさまよっておりましたです。ハイ。
default avif qualityが50とのサイト情報があったので、qualityやavif、他のキーワードでファイル内検索してみましたが見つけられず。最終的に探せることに成功したキーワードは”50”でした。
ここまで来るのに、なぜこんなに時間かけて苦労しないといけないの？
やり始めたら意地になって止められない性格。でもあり、すぎ飽きてしまう性格。どうしようもない。思い出したくないので、この話はここまで。
Astro - starlight でよみがえる。かな？
懲りずに、続けていると良いこともあるのです。
救世主が現れるのです。
starlight、これもAstroのテーマで、ドキュメントサイト作成に特化しているというので、余計な（扱いきれない）機能が省かれて、疲れ果てたNinjinの脳でも操れそうな感じがしたので、 新規でAstro V4と一緒にstarlightをインストールしてみました。
何といっても、Astroのサイトがstarlightで作られているというので、開発版と言いながらも変なエラーは出ないでしょうと思い、ドキュメントを見ながら。
（そう、Astroはドキュメント見ずに適当にサイト作成していて、収集つかない失敗をした経験を踏まえてなんです）
一つ一つ理解しながら、サイト再構築に取り掛かかりました。
できるだけ、シンプルに、「難しい機能は使うなよ」と言い聞かせながら。\
でも、最後の最後でビルドエラーが発生。\
- 削除したサイトのファイルを読み込もうとする。
- ビルドに入る前にすごい速さで大量の文字列が。
撃沈です。
えっ？そんなことだったの。
でも、最後の最後でビルドエラーが発生。
エラーを直そうとサイト検索するも、内容がわからない、英語がわからない、知識がないので余計に難しく思えていたようです。
- 削除したサイトのファイルを読み込もうとする。
具体的には、削除したはずのstarlightサイトのfavicon.svgにアクセスしようしているエラー。
この解決策は、ブラウザのキャッシュ、履歴を削除することでした。普段、プライベートウインドウでサイトを見ているから、気づきませんでした。
たまたま、通常ウィンドウでサイトを確認していたものが保存されていたので、通常ウィンドウの履歴（キャッシュ？）を削除しなければいけなかったのです。
- ビルドに入る前にすごい速さで大量の文字列が。
このエラーは、読めないスピードで大量の文字が流れていくので、チンプンカンプンでしたが、最後に、
Result (14 files):- 0 errors- 0 warnings- 58 hintsの結果だけ確認できて、よく見れば、エラーメッセージではないということが分かったんです。
ビルドの前に何かしらのチェックプログラムが動いているようだと、やっと気が付づきました。
それで、npm run buildのコマンドを実行すると、Astro checkがビルドの前に実行される設定になっていたので、削除して解決できました。starlightの初期設定値になっていたということで正しいでしょうか。
知識がないなら、それなりに。
時間が流れるのが速くと感じています。時間を有効に使いたいなあと、つくづく反省するのです。
自分の頭の中を整理する一つの手段として、このサイトづくりをしているところもあるので、この2カ月間もったいないことしていたのかなと。\
サイトを更新するのを習慣化しよう。
何がしたいのか、やりたいことを見失うことが習慣化の障害となっています。
もともと、飽きっぽいので、いろんなことを試してみるのだけど、中途半端な結果になってしまっています。身の回りを見渡せば、無残な残骸が散らばっていますので。（現在、身の回りの不要品を処分しているところ）
ウォーキングを健康のためにやっていて、第2章パワーウォーキングへと物語は進んでいます。サイト更新も関連付けて習慣化を成し遂げたいものです。
サイト更新の習慣化のカギは、定期的に「時間をかけてでもやりたいことは何？」と問いかけ、決めたら考えずにやってみる。
ちっぽけな話
「ここんとこ、1日のプライベート時間がサイト更新に費やされている。どうすればいいのでしょうかね」
ECOSIA AI Chatに相談してみると、
プライベート時間をサイト更新に費やすことがストレスやバランスの崩れを引き起こす可能性があります。効果的な時間管理や優先順位の設定が重要です。以下はいくつかの提案です：
スケジュールを立てる：プライベート時間と作業時間を明確に区別し、時間を効果的に使うためのスケジュールを作成します。
プライベート時間を守る：自分の時間を尊重し、リラックスや趣味に充てる時間を確保します。
タスクを優先順位付ける：重要なタスクを優先し、時間を無駄に使わないようにします。
デジタルデトックス：デジタル機器から離れてリフレッシュする時間を取ることで、集中力や創造性を高めることができます。
もし、この問題が続いているようであれば、時間管理の専門家やカウンセラーに相談することも有益かもしれません。
お友達になれそうです。いやいや、デジタルデトックスしなくっちゃ。
2024-04-15 00:00 just!
2024-04-14