Astroで作る「高速Webサイト」阿部寛のホームページを超えてゆけ

シェアしてね〜🤞

高速Webサイトをいろいろな技術を組み合わせながら作れるという「Astro」使ってますか? https://astro.build/

2023年1月末にAstro2.0がリリースされて、さらなる盛り上がりを見せています。

Astroは極限までJavaScriptを排除することで、Webサイトの高速化を行っています。 ゼロJSをAstroは謳っており、完全にJSを排除したサイトがデフォルトで構築できるようになっています。

また、ReactやVue、Svelteなど様々な技術を混在させてサイトを構築していくことができ、慣れ親しんだ技術を使って高速なWebサイトが構築可能です。 Astro独自の機能や配信の最適化(エッジ最適化)など、いろいろ良い機能、環境が揃っています。

阿部寛のホームページを超えてゆけ

阿部寛のホームページは言わずとしれた、超高速サイトですね。 こちらはコンテンツの殆どがHTMLで構成され、jsのコードは多少あるもののCSSすらもなく高速で表示されます。

まあ、高速化を目指してこのような構成にした訳では無いと思いますが、 Astroを使えば、このように高速なサイトを作成することが可能になります。 デザイン自体はCSSやTailwindも使えるのでイケてる感じに出来るかは自分次第です。

もう「阿部寛のホームページ」については話しません。 気になってたまらないという方は、阿部寛のホームページのさらなる高速化を目指した人もいるようなので見てみると面白いですよ。 https://nlab.itmedia.co.jp/nl/articles/2207/19/news170.html

Astroはコンテンツにフォーカス

AstroはWebサイトを作成するもので、コンテンツにフォーカスしています。 つまりブログや記事メディアなど、いろいろな機能が盛り込まれたWebサービスを作る目的では作られていません。

出来ないこともないですが、サイトのコンテンツを重要視しています。 なので、そのコンテンツの表示を出来る限り高速に表示出来るような仕組みが整えられています。

最初にも話しましたが、Astroにはいろいろな機能や環境が揃っていますが、細かい話になるので、それは別の機会に紹介します。

ここでは、Astroをさくっとセットアップして表示ローカル環境で表示してみるというところまでを行っていきます。

Astroインストール

今回はnpmでAstroをインストールしていきます。

npm create astro@latest

色々聞かれますが、とりあえずrecommendedのものを選択していけばいいです。

astro install

今回はastro-sample-appという名前でAstroプロジェクトを作成してみました。

では実際に起動してみましょう

cd astro-sample-app/
npm run dev

astro npm run dev

3000ポートで起動するので、

http://localhost:3000/  にアクセスしてみましょう。

astro top page

このように表示されれば成功です。

code .

vscodeとかで開いて、コード変種していきましょう。 また細かいページの作り方やReact、Vueなどの入れ方、Tailwindの入れ方は次回移行触れていきます。

シェアしてね〜🤞