theme | class | fonts | layout | background | title | ||||||
---|---|---|---|---|---|---|---|---|---|---|---|
seriph |
text-center |
|
cover |
./images/slide-title.png |
Using Astro |
- I am Jan, 36 years old
- currently DevOps Engineer, doing web development since a long time
- passionate about new technologies and learning
- What is Astro ?
- Goals of Astro
- Mechanisms (Project Structure, Routing, ...)
- Things I'd like you to know about
- Future outlook
- Feedback, Questions & Open Discussion
- Static Site Generator
- Bring your own JavaScript Framework
- Islands Architecture
- HTML first build tool
- Based on Snowpack (Module Bundler, heavily relies on ES Modules)
- make better and faster webpages
- power web applications
- expression and possibilities of JavaScript
- ship as less as possible through the browser (Simplicity of Webpages / Speed of Static HTML)
- have a nice developer experience
- Project Structure
- Astro files (pages / components without runtime)
- Markdown OOB
- Hydration
- Routing
# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro
# install your dependencies
npm install
# start the dev server and open your browser
npm start
- have the
.astro
extension - can be pages
- can be components
- consist of HTML
- add frontmatter script section for server side rendering
- add JSX for templating
Let's integrate Vue in our project...
- Collections API
- Tailwind support
- Generation of sitemap.xml
- State libraries (Vuex)
- Styling
Framework | Global CSS | Scoped CSS | CSS Modules |
---|---|---|---|
Astro (.astro ) |
✅ | ✅ | N/A |
React / Preact | ✅ | ❌ | ✅ |
Vue | ✅ | ✅ | ✅ |
Svelte | ✅ | ✅ | ❌ |
- Currently positioned as Static Site Generator
- support of more frameworks (possible)
- mixture between static and dynamic sites (possible)
- Named Slots
- Image Support
- https://astro.build
- https://github.com/snowpackjs/astro
- https://twitter.com/astrodotbuild
- https://css-tricks.com/astro/