Astroではじめてのportfolio

AstroではじめてのPortfolio #12 札幌開催：はじめてのIT勉強会 in 札幌(2024) 宮本直幸 @MSprzk

自己紹介 名前: 宮本直幸 - Miyamoto Naoyuki 所属: N高等学校 言語: JavaScript, Java 興味: software dev, GIS, IoT, Security, etc.. @Msprzk とまとくん

アジェンダ ● きっかけ ● Astroとは ● Astroで作ってみる ● 成果物 ● 触ってみた感想

きっかけ

きっかけ 学校の授業で、ポートフォリオを作る授業があった テンプレートは、Google Slides

きっかけ 学校の授業で、ポートフォリオを作る授業があった テンプレートは、Google Slides →せっかくだから自分で作りたい！ & Astro おもしろそうだった

Astroとは

Astroとは ● SSG(静的サイトジェネレータ）, Webフレームワーク ● ブログなどのコンテンツ主体のWebページに適している ● 非常に軽量 ○ ○ ビルド時又はSSRでオンデマンドでレンダリングされるらしい ビルド時に可能な限り js を html・css に変換して取り除く “Zero JS” をしているため軽量 ● React, Vue, Svelte等の他の framework も同時に使用 することができる ● MarkdownやMDXが使える

Astroで作ってみる

Astroで作ってみる 事前準備 ● Node.js

Astroで作ってみる 1.とりあえず、 npm create npm create astro@latest 2.Setup wizardが起動する ので答えていく

Astroで作ってみる Devサーバーを起動してみる

Astroで作ってみる Devサーバーを起動してみる

Astroで作ってみる .astro ファイルを作ってみる

Astroで作ってみる .astro ファイルを作ってみる

Astroで作ってみる 動的なコンテンツの追加

Astroで作ってみる コンポーネント

Astroで作ってみる コンポーネント

Astroで作ってみる コンポーネント

Astroで作ってみる コンポーネント これだとうまくいかない...

Astroで作ってみる ルーティング [astro.config.mjs]

Astroで作ってみる ルーティング [Navigation.astro]

成果物

https://supurazako.github.io/portfolio/

• https://supurazako.github.io/portfolio/

触ってみた感想

触ってみた感想 ● めちゃくちゃ簡単！JSとhtmlの知識あれば、すぐできそ う ● imageやその他、ルーティングはしっかりDocs読む必 要があるな...（自業自得） ● デプロイ手段等の公式ガイドがとても充実していて良い ● コンポーネント使えるWebページ制作は楽しい！！！

ありがとうございました！！ 参考: https://astro.build