Astroで サクッと作るWebサイト(仮) / Quickly create webpages with Astro

Astroと自動CLIウィザードを使って
・Reactの導入
・GitHub Actionsでマージ後の自動デプロイ
・Firebaseへホスティング
をサクッと行ってみた話です。

広島フロントエンド勉強会 Vol.32『Astroハンズオン』後のLT資料です。
https://hfe.connpass.com/event/280393/

Transcript

1. ɹ޿ౡϑϩϯτΤϯυษڧձ
   7PMʰ"TUSPϋϯζΦϯʱ "TUSP で
   αΫοͱ࡞Δ8FCαΠτ Ծ
2. ͓લ୭Α ‣ Ή͡Μ
   !NVJO
   
   ▹ ,PUMJOͱ3FBDUΛॻ͍ͯΔ;ͭ͏ͷϓϩάϥϚ
   ▹ ͍͢͝޿ౡ
   w ຖिਫ༵೔ʹ޿ౡͰ։࠵͍ͯ͠Δ*5΋͘΋͘ձ
   w ݄຤ਫ༵೔͸ʮ͍͢͝޿ౡ
   SC
   XJUI
   1ZUIPOʯڞಉओ࠵
   ▹ ޷͖ͳϞϊwίτ
    ࣗ࡞ΩʔϘʔυ
    ͍͢͝޿ౡ
    ϓνϒϩοΫ
3. ͖͔͚ͬ w"TUSPϋϯζΦϯ͕͋Δͱฉ͍ͯ
   wͪΐ͏Ͳࣗ෼ॴ༗ͷυϝΠϯΛ࣋ͯ༨͍ͯͨ͠ͷͰɺ 
 ͳʹ͔؆୯ʹ8FCαΠτ͕࡞ͬͯΈ͔ͨͬͨɻ
   wര଎Ͱര଎ͳαΠτߏங͕Ͱ͖ΔΒ͍͠ʁ
4. ·ͣ͸ཁ఺ͷ
   ͓͞Β͍ w"TUSP͸ߴ଎ͳ8FCαΠτΛߏங͢ΔͨΊͷϑϨʔϜ ϫʔΫ
   wσϑΥϧτ͸θϩ+4Ͱߴ଎
   wଟ༷ͳσϓϩΠํ๏
   ʜ
   'JSFCBTF
   wΧελϚΠζ΋Մೳ
   ʜ
   5BJMXJOEɺ.%9ͳͲ
   wଟ਺ͷϑϨʔϜϫʔΫʹରԠ
   ʜ
   3FBDU
   ࠓճ͸੩తϗεςΟϯάͷൣғͰ࡞ΔͷͰ
   ϗεςΟϯά͸'JSFCBTFͷແྉ࿮Ͱे෼ɺ
   "TUSPίϯϙʔωϯτ͚ͩͰ΋࣮૷Ͱ͖Δ͕ɺ
   ࠓޙ3FBDUͷΤίγεςϜΛ࢖ͬͯΈ͔ͨͬͨɻ
   
5. *5Πϕϯτ৘ใαΠτ
   IJSPTIJNBEFW
   Λ࡞ͬͯΈΑ͏
6. σϑΥϧτͷࣗಈ$-*Ͱαϯϓϧϖʔδ࡞੒ $-*΢Οβʔυʹैͬͯ
   αΫαΫઃఆ͍ͯ͘͠
7. 'JSFCBTFʹσϓϩΠ͢Δࣄલ४උ w'JSFCBTFʹϓϩδΣΫτΛ࡞੒͢Δ
   w fi SFCBTFUPPMTΛΠϯετʔϧ͢Δ
   wA fi SFCBTF
   JOJU
   IPTUJOHA
   Λ࢖͏ͱɺઃఆϑΝΠϧͷ࡞੒͸ෆཁ
   w(JU)VC
   "DUJPOTͰϓϧϦΫϚʔδ͔ΒࣗಈσϓϩΠ·ͰઃఆͰ͖ͯศར
   wઃఆϑΝΠϧΛ࡞੒ fi SFCBTFKTPO  fi SFCBTFSD IUUQTEPDTBTUSPCVJMEKBHVJEFTEFQMPZHPPHMF fi SFCBTF $-*΢Οβʔυ͋Γ
8. Ϗϧυͯ͠'JSFCBTFʹσϓϩΠ͢Δ
9. 3FBDUΛಋೖͯ͠ΈΔ $-*΢ΟβʔυͰඞཁͳϥΠϒϥϦΛબ୒
10. Πϕϯτ৘ใͷ3FBDUίϯϙʔωϯτΛ࡞੒
11. ݺͼग़͠ଆͷ"TUSPίϯϙʔωϯτΛमਖ਼
12. Ұ୴׬੒ʂ 3FBDUͷιʔείʔυ͕੩తʹग़ྗ͞Ε͍ͯΔ
13. ·ͱΊ wθϩ+4Ͱૉૣ͘දࣔͰ͖ΔαΠτ͕Ͱ͖ͨɻ
    w೔ຊޠυΩϡϝϯτ͕ॆ࣮͍ͯͯ͠ɺ಺༰΋ཧղ͠΍͍͢ɻ
    w"TUSPؚΊɺ$-*΢ΟβʔυͰ؀ڥߏஙͷෛ୲͕ݮͬͨɻ
    w41"ͷࢿ࢈Λ࢖͍ͭͭɺಈతͳ8FCΞϓϦέʔγϣϯΛඞ ཁͱ͠ͳ͍৔߹͸બ୒ࢶͱͯ͠࢖ͬͯΈͯ΋ྑͦ͞͏ɻ
14. ࠓޙ΍Γ͍ͨ͜ͱ wΠϕϯτ৘ใͳͲϦΞϧλΠϜੑ͕ॏཁͰͳ͍αΠτ͸ɺ 
 $*ଆͰఆظతʹ৘ใΛूΊͯදࣔ͢Δ͜ͱ͕Ͱ͖ͦ͏ɻ
    w"TUSPͰ͸εςʔτ؅ཧʹ/BOP
    4UPSFT͕ਪ঑͞Ε͍ͯΔ ͨΊࢼͯ͠Έ͍ͨɻ
    wIJSPTIJNBEFW
    ͷ׆༻ΞΠσΞืूதͰ͢ʂ
15. ༨ஊ ໘౗͍͘͜͞ͱ͸
    $IBU(15ʹฉ͍ͨΒͳΜͱ͔ͳΔɻ
16. Έͳ͞Μ΋"TUSPͰ
    ര଎Ͱര଎ͳαΠτΛ࡞Ζ͏ʂ