Contents
Astro
A framework for fast content sites: pages, content collections and islands of interactivity.
1.Getting started
- What Astro isWhich sites Astro is for, why it ships no JavaScript by default and what islands are.
- Creating a projectHow to create an Astro project with npm create astro, start the dev server and what the project folders contain.
- .astro componentsWhat an Astro component is made of: frontmatter and template, expressions, conditions and lists, using one component inside another.
- Pages and routingHow Astro turns files in src/pages into site addresses, how to link pages and how to make a 404 page.
- PropsHow to pass data into an Astro component through attributes, describe its type and set default values.
- Layouts and slotsHow to move the shared markup of pages into a layout and insert the page content through a slot.
- StylesStyles in Astro components: the scoped style tag, a global CSS file, class:list and adding Tailwind.
2.Content
- Markdown pagesHow to make a site page from a Markdown file, give it a layout and read data from its frontmatter.
- MDXHow to add MDX to Astro and put components and JavaScript expressions into Markdown text.
- Content collectionsHow to define a collection of blog posts in src/content.config.ts: the glob loader and a frontmatter schema with zod.
- Querying collectionsHow to get collection entries with getCollection and getEntry and output the post text with render.
- Dynamic routesHow one page with a parameter in its file name creates pages for all posts and tags through getStaticPaths.
- PaginationHow to split a long list of posts into pages with the paginate function and link to neighbouring pages.
- ImagesHow to output an image with the Image component from astro:assets so Astro optimizes it during the build, and how to give a post a cover.
3.Interactivity
- Islands and React componentsHow to add React to Astro, put a React component on a page and bring it to life in the browser with client:load.
- Client directivesWhen an island loads in the browser: client:load, client:idle, client:visible, client:media and client:only.
- Scripts in componentsHow to add ordinary browser JavaScript to an Astro component with a script tag and pass data into it.
- View transitionsHow to turn on smooth page transitions with the ClientRouter component and animate individual elements.
4.Data and server
- Fetching data at build timeHow to get data from an external API or a JSON file in a component's frontmatter and show it on the page.
- On-demand renderingHow to add a server adapter and make a page that is rendered again on every request: URL parameters, cookies, redirects.
- API endpointsHow to make an Astro address that returns JSON instead of HTML: GET and POST functions in src/pages files.
- MiddlewareHow to intercept every request in src/middleware.ts: pass data to pages through locals, protect a section and change the response.
- Actions and formsHow to accept a comment form through Astro Actions: define an action with zod validation and call it from the browser.
- Environment variablesHow to keep settings and secret keys in a .env file and read them through astro:env with type checking.
5.Publishing
- SEO and sitemapHow to set the site address, output meta tags and a canonical URL in the layout and create a sitemap with @astrojs/sitemap.
- RSS feedHow to make an RSS feed of the blog with @astrojs/rss from the post collection and link it from the pages.
- Several languagesHow to set up routing for several languages in Astro: locale folders, Astro.currentLocale and links through astro:i18n.
- Building and deployingHow to build an Astro site with npm run build and publish it: static hosting for a static site, a Node.js server for on-demand pages.