Astro を使用して手動でコーディングした Web サイトを再構築してみました。何がうまくいき、何がうまくいかなかったのかを次に示します。

私は Neocities で Whistling Nose Games, Music, and Multimedia という愚かな小さな Web サイトを運営しています。昨年のダウンタイム中に、私は数か月かけて Web デザイン、CSS、JavaScript を学び直し、不条理なゲームや音楽を作成しました。意図的にノスタルジックな雰囲気を醸し出しています。改造してみます。驚異的なデザインスキルを持つ友人が、再デザインを手伝ってくれるように Astro の方向性を教えてくれました。それで試してみたところ、かなりうまくいきました。

Astro は静的 Web サイト用の Web フレームワークです

ボンネットの下では多くのことが起こっています

「コンテンツ主導型 Web サイト用のフレームワーク」を宣伝する Astro は、JavaScript Web フレームワークです。これは、サイトのインタラクティブなコンポーネントをコンテンツ自体から分離することで、ユーザーが静的でコンテンツの多い Web サイトを構築できるようにするための派手な言い方にすぎません。

ユーザーのブラウザーにコードの実行を処理させるのではなく、サイト用に作成したすべてのもの (コンポーネント、レイアウト、マークダウン ファイル) をサーバー側で HTML と CSS にコンパイルします。それがリアルタイムで動作するのを見るのは非常に驚くべきことです。ファイルベースのルーティング システムを使用して、ファイル レイアウトに基づいて URL を生成します。それはあります たくさん 舞台裏の仕事の様子。

機能が豊富で、基本的にユーザーがソフトウェアを使用して最初の Web サイトを構築する手順を説明します。 AI を使用して構築するための統合機能もあります ( クロード CLI の統合 面白そうです）、しかし、このプロジェクトではそれらをテストしませんでした。

始める前に、Astro のコースのいずれかを受講してください。ページを作成する前にそれらを確認しましたが、非常に役立ちました。

Astro を使用して Web サイトのアップグレードのテスト ビルドを行っています

単一ページのテストは、Web サイトの新しい方向性を知らせるのに役立ちます

個人の Web サイトの更新や全面見直しは、他の作業よりも優先されるわけではありません。訪問者カウンターが機能していないことに気づきました。また、リンク先のコンテンツの多様性に対して、私のホームページは必要最低限​​だと感じました。

さらに、妻への記念日の贈り物としてバーチャル博物館の展示を作成し、月末までにサイトに追加したいと考えていました。プロジェクトを完成させ、それを「秘密のリンク」として追加しましたが、自分のサイトにはもう少し磨きをかける必要があることに気づきました。また、壊れたコードについて訪問者から連絡を受けました。

したがって、Astro が（うまくいけば）私がそれを修正するのを手伝ってくれるでしょう。

私が自分のサイトに対して考えていたアイデアの 1 つは、誰も真剣に受け止めないような、冗談っぽく、くだらない記事を作成することでした。したがって、Astro を使用したこの実験の範囲は、 その特定のページ Neocities に追加する前にテストしてください。

インストールはコマンドライン内で行われます

または、ソフトウェアのオンライン版を使用することもできます

Linux に Astro をインストールするには、まず Node.js をインストールする必要があります。使用 node -v そして npm -v 持っているかどうかを確認してください。そうでない場合は、次のようにインストールできます。 sudo apt install npm Linux ではミントシナモン。 Curl を使用して Node.js の適切なバージョンを取得します。

Astro へのさまざまなモジュールのインストールと追加は、ターミナルで行われます。インストール後、Astro はプロジェクトのディレクトリを作成し、必要に応じて依存関係とフレームワーク (すべての詳細は Web サイトにリストされています) を追加できます。コマンドを使用しました npx astro add alpinjsAlpine.js フレームワークをプロジェクトに追加します。私はこのフレームワークの大ファンで、サイトの訪問者カウンターを再構築するためにこのフレームワークを使用するつもりです。

Astro では、ブラウザで使用できるバージョンも提供しています。

Astro を読み込む前に、慎重にデザインを計画しました

アプリを最大限に活用するには準備が重要です

ページのコンテンツはすでに存在しているので、デザインと機能のみに関心があります。私はそれに反対票ボタンのようなインタラクティブな要素を与えたいと思っています（その方が面白いと思うので賛成票ボタンはありません）。デザイン的には、80年代後半のテレビの静的で飽和していない雰囲気が欲しいです。

私は落ち着いた灰色の境界線、マイルドなセピアトーンの背景、おそらくテレビの静的なオーバーレイ (ただし、あまり気を散らさない)、そしてテキストにはある種の色あせた緑色が必要です。ヘッダーは、ページの主題に合わせてオフパープルまたはマゼンタになります。太字（または 強い CSS 内) は琥珀色である必要があります。ヘッダーでも面白いことをやってみます。

アストロと一緒に、 私には力がある それらすべてを実行し、それ以上のことを実行します。

開始すると、ビルドは速く進みました

通常の半分の時間で Web ページ全体を開発しました

Astro をインストールすると、Astro というディレクトリに 4 つの異なるフォルダが作成されます。 src。これらには次のものが含まれます。

1. 資産

2. コンポーネント

3. レイアウト

4. ページ

の 資産 フォルダーは、画像と使用したいフォントを置く場所です。 コンポーネント 再利用可能な要素 (ボタン、ナビゲーションなど) 用です。 レイアウト そして ページ CSS と実際の Web ページのコンテンツをそれぞれ保持します。

元のリストを 1 月に書いたので、それを Markdown に変換していくつか編集しました。次に、ターミナルのMicroを使用してMDファイルとして保存しました。 Astro はファイルの種類ではなくファイル名を参照するため、 しません HTML として保存する必要があります。

そこから CSS 要素を構築し、 レイアウト フォルダーを開き、アスキー アート アーカイブで見つけた ASCII スケルトンに変わる非常に単純な JavaScript ボタンを実行しました。各キャラクターのコミック画像をいくつか取得し、美観に合わせてグレースケールに変換しました。私はそれらを中に投げ込みました ページ の代わりにフォルダー 資産 簡単なテストのために作業を簡素化するために、Markdown ファイルと共存させます。後で、それらを次の場所に移動します。 資産 ページを完成させているとき。

編集は直感的に行えます。変更を加えると、その変更を確認することができます。 Micro を開いて一方のウィンドウでファイルを編集し、もう一方のウィンドウでサイトを開いたままにして、変更が発生したときに追跡できるようにしました。問題や不安定なコードのトラブルシューティングにかかる​​時間を大幅に節約できました。

コードを確認するには、次のコマンドを実行します。 npm run dev。実行するとコンテンツがまとめられ、ブラウザで localhost インスタンスが開きます。そこから、新しいページがどのように見えるかを確認し、問題がないかすぐに検査できます。調整が必要な場合は、元の画面に戻るだけです。 src ファイルを編集し、Micro でファイルを微調整し、ブラウザが更新されるのを確認します。

私のページに関する限り、時間と労力と微調整がかかりましたが、最終的に満足のいく最終結果が得られ、最終的に私のサイトで公開されることになるでしょう。

Astro ではうまく機能するものもあれば、磨きが必要なものもあります

常に改善の余地がある

Astro でうまく機能するのは、その統合と、作成した各ドキュメントがどのように連携して、まとまりのある Web サイトを作成するかです。一方、画像、テキスト、CSS、およびほんの少しの JavaScript を含む単純なページを作成するだけの場合は、手動でコーディングする方が簡単かもしれません。

Astro はデスクトップファーストのアプリのように感じられます。 Linux Mint 上でサービスを動作させるのに問題はありませんでしたが、Android 上でオンライン バージョンを使用しようとすると問題が発生しました。これは大したことではありませんが、モバイルで試してみたい場合は知っておく価値があります。

コードでいっぱいのドキュメントを扱う必要がなく、Astro が Markdown を完全に機能する HTML に変換できるのは素晴らしいことです。私は Markdown で書くのが好きなので、HTML を手作業でコーディングするよりも大幅に時間を節約できました。これは、自分が何をしているのかを理解すれば、Web サイトをより速く作成できるユニークな方法だと思います。

Astro は初心者向けではないと思います。私はすでに HTML、Markdown、CSS についてかなりしっかりした知識を持っていたので (JavaScript は明らかに錆びていますが、十分に使いこなすには十分な知識があります)、内部で何が行われているかを理解しました。そうは言っても、いくつかのチュートリアル (Astro 独自のものを含む) をチェックして、ソフトウェアを理解するために十分な時間を費やすことをお勧めします。

---

Astro は実際に頻繁に使用できる新しいツールのように感じます

更新されたページのために Astro と協力するのはとても楽しかったです。慣れるまでには時間がかかると思いますが、将来的にはもっと頻繁に使用するようになると思います。

そして誰が知っていますか？もしかしたら、ウェブサイトを更新したり、より頻繁にページを追加したりする動機になるかもしれません。訪問者カウンターをやり直すことはできませんでしたが、最終的にはやり直すつもりです。

いずれにせよ、私はこの製品を使って楽しい時間を過ごしたことは間違いありませんし、将来的にこの製品で他に何ができるかを見るのが待ちきれません。