HPにAstro.jsを導入したい備忘録💻

No.21

HPにAstro.jsを導入したい備忘録💻

ようやくHPプチ改築に手をつけようと思って今色々調べてみたけど、なるほどわからんでした。
人は未知の情報を目の前にするとフリーズする生き物なんだよねということを改めて自覚。

とはいえほんのり触れたばかりで諦める訳にはいかないので、千里の道も一歩から。
参考になりそうな記事を貼っておく（後日の自分任せ）

▽AstroサイトをGithubでいい感じに公開できるらしい
https://qiita.com/takeshi_du/items/2654f...
何やら細かい設定やら用語多数で混乱を極めております。
でもこれさえできればHTML、CSSなどのファイルを一個一個毎回デプロイという、かなり面倒な工程を省くことができるのではという期待が持てる。

▽jsを読み込む方法
https://qiita.com/takeshi_du/items/9fb22...
色々調べた感じ、Astroは余分なjsコードを排除（？）してページ読み込みを軽量化する特徴があるとのこと。TOPページの段階でパララックスやらパーティクルやら盛大にjsを使いまくってるので冷や汗かいてたけど、この通りにすれば読み込めそうで一安心。

と、ここまで細かい仕様説明ばかり注目しているが、肝心の具体的な導入方法を理解していないぞ。そんな初心者まるだしの自分にも優しいチュートリアルのまとめ記事も、なんとある。

そこで、インストールガイドにて。
「Astroを動かすには、Node.jsが必要。」ほう、jsライブラリなのかな、と思いきや…
なんだなんだ、結構複雑な技術の話になってきたな〜〜

最近ターミナルくんにお世話になる機会があり、多少は触れるようになってきたものの、まだ慣れないので苦い顔をしているが、弱気になってはいけない！勉強のチャンスだと思って頑張ります…もしトライして駄目だったら駄目なりに、WordPress化の選択肢もあるので、やるだけやったろうと思う。後の自分に任せた。畳む

【2025/10/17 追記】
Node.jsのインストールをやった。ちなみにターミナルじゃなく、インストーラを使いました🥴
んでそっから…Astro.jsの記述って全部ターミナル操作なの！？
これって…ほんとに効率上がるの？！本物のプログラマーみたいだあ（エセプログラマー並感）

先のチュートリアル記事を見ててもなかなかに難しいこと書いてて挫けそうになっています。
世のコーダーさん方は皆これを手懐けてるのかと思うと、己の未熟さを知りました。
ターミナルなんてアプリのインストールとかコンフィグ操作でしか使ったことないから恐れ慄いているよ。ここまで毛嫌いするのは経験則上、書いたコマンドは高確率で実行失敗するからである…(´･_･`)

と思いながらつべで解説動画探してたら、色々発見があった。
▽
https://www.youtube.com/watch?v=0zvxvmQq...

多分立ち上げのとこまでがターミナルで、サイトの編集はコードエディタでできるっぽい？
そしてその編集の、なんたる楽そうなこと‼︎と効率化のイメージができた。

今のHPをAstroに移植する作業難度がちょっと思いやられますが、これできたらかっけーし後学のためになるだろうなあ。
てことでまた後日の自分に託しましたよ。畳む

【2025/10/18 追記】
Astro.jsのインストールと、サイトフォルダの立ち上げができたっぽい！
渋い顔しながらチュートリアル通りにターミナルを打ってたらこんなんなった

なんかアスキーアートみたいな顔が出てきて、口がぱくぱく動いてた…🤩（感心するとこそこ？）
ターミナルってPC内のローカル操作に使うもんだとばかり思ってたけど、インストール手順に使えたりするとことか見てるとオンラインにも繋がってるんだな〜と思う　実際の仕組みはよく分かってないが…

まだ場所を立ち上げたばかりで中身何も書いてないのに、こんな細かい一歩に大喜びしてここに逐一書きに来てしまう。
できなそうなことができた瞬間ってドーパミン出るもん。この場所でくらいは自慢させてほしい。

この調子でAstro化作業がんばるぞー✊
畳む
#Web

メモ 2025/10/16(Thu) 03:56 edit_note

« No.20 / No.22 »

初期表示に戻る