Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Astroで始める爆速個人サイト開発

takanorip
January 21, 2023

 Astroで始める爆速個人サイト開発

takanorip

January 21, 2023
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

  1. Astroで始める 爆速個人サイト開発 Takanori Oki / takanorip 2023/1/21 - BuriKaigi 2023

    Astroで始める 爆速個人サイト開発 Takanori Oki / takanorip 2023/1/21 - BuriKaigi 2023
  2. 爆速セットアップ A public6 A src6 A components6 A Header.astr% A

    Button.js A layouts6 A PostLayout.astr% A pages6 A posts6 A post1.m& A index.astr% A styles6 A global.cs0 A astro.config.mj0 A package.jso A tsconfig.json
  3. src/pages/index.astro --- = = --- => import const await const

    { } ; ​ { } . ( ); . ( . ); Using your CMS With top-level await, Astro makes it easy to fetch content from your CMS. { . (( ) ( ={ . } { . } ))} storyblokApi get values links map href slug name from storyblokApi Object data links link link link "../cms" 'cdn/links' data links < > </ > < > </ > < > < >< > </ ></ > </ > h1 h1 p p ul li a a li ul
  4. 様々なフレームワークと一緒に使うことができる --- --- import import import ; ; ; MyReactComponent

    from MyVueComponent from MySveltComponent from '../components/MyReactComponent.jsx' '../components/MyVueComponent.jsx' '../components/MySveltComponent.jsx' < /> < /> < /> MyReactComponent MyVueComponent MySveltComponent
  5. Contentful t Headless CMSの1$ t https://www.contentful.comU t 機能が充実しており、データ設計が柔軟にでき# t 無料枠が大きい(Records:

    25k、API calls: 2,000,000/mo t 公式にもサポートドキュメントがあ# t https://docs.astro.build/en/guides/cms/contentful/
  6. CSS Modules s ScopedなCSSを生成するための技P s CSSは温かみのある手書きに限q s Tailwind CSSを使ってもまあ良い気がすq s

    https://docs.astro.build/ja/guides/integrations-guide/ tailwind s 筆者はアンチなので使わないが
  7. 余計な装飾を入れない w カルーセルとかパララックスとか余計な装飾を入れなY w デザイナーのポートフォリオとかを参考にすると入れが… w スクロールジャックは絶対にするな!!$ w 情報設計とコンテンツ設計、レイアウトに注力すi w

    装飾は最低限(見出しの装飾、グルーピングのための枠線、など7 w 興味がある人は「レイアウト・デザインの教科書」を読むと良いかy w https://www.sbcr.jp/product/4797397314/