Skip to the content

/

Astro

Astro 7

Astro: 0% done

Module 1 · How a website reaches you

A website is files that one computer sends to another

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 212 · How a website reaches you

Course progress

0%

A website is files that one computer sends to another
The browser asks, the server answers
, 1 to practiseAn address says which server, and which page
HTML, CSS and JavaScript each do one job
, 1 to practiseThe browser reads the HTML, then fetches what it points to
, 1 to practiseStatic pages are made ahead; dynamic pages are made per visit
, 1 to practiseEvery bit of JavaScript costs the visitor time
Astro makes HTML ahead of time, and adds JavaScript only where you ask
Recap: how a website reaches you

The terminal is where you type commands
Node runs JavaScript on your computer, and npm installs tools
, 2 to practiseCheck: which tool does what
A framework gives your project a shape
A build turns what you write into what the browser gets
, 1 to practiseWhile you work, a dev server rebuilds as you save
Astro is built for sites that are mostly content
, 1 to practiseThe same page, two ways
Recap: tools, frameworks and the build

One command makes a new project
, 1 to practiseEach folder has one job
, 1 to practisepackage.json lists the commands you will run
The dev server shows your site at localhost
Your home page is one file
, 1 to practiseA new file in src/pages is a new address
, 1 to practiseBuild writes the finished site into dist
, 1 to practiseRead an error from the top: what, where, which line
astro.config.mjs holds the site’s settings
Recap: your first project

An .astro file has a script on top and a template below
, 1 to practiseThe script runs while the page is built, never in the browser
, 1 to practiseCurly braces put values into the HTML
, 1 to practiseShow something only sometimes
, 1 to practiseTurn an array into a list with map
Attributes: plain, computed, shorthand and spread
, 1 to practiseThe script can wait for data
Fragments, raw HTML and comments
Recap: inside an .astro file

A component is a piece of page you write once
, 1 to practiseImport a component, then use it like a tag
Props are the inputs of a component
, 1 to practiseAn interface says which props a component takes
, 1 to practiseComponents and map make lists of cards
, 1 to practiseAstro components render once, to HTML
, 1 to practisePass through the attributes you don’t name
Small components, clear names
Recap: components and props

Props carry values; slots carry markup
One <slot /> takes whatever is inside the tags
, 1 to practiseCheck: where do the children go
Named slots fill more than one hole
, 1 to practisePractise: fill a named slot
Fallback content shows when a slot is empty
, 1 to practiseAstro.slots.has asks if a slot was filled
Several elements in one slot, and passing slots along
, 1 to practiseCheck: props or a slot
Recap: slots

CSS says how things look
A <style> in a component only styles that component
, 1 to practiseCheck: what a scoped rule reaches
Global styles: a stylesheet, is:global or :global()
, 1 to practiseclass:list builds a class from conditions
define:vars passes values into CSS
Tailwind: styles as classes
A <script> adds a little behaviour
, 1 to practiseis:inline leaves a script exactly as written
Recap: styles and scripts

Each file in src/pages/ is an address
, 1 to practiseLinks are plain <a> tags
Brackets in a file name make a dynamic route
getStaticPaths lists the pages to build
, 1 to practisePractise: tags pages
A rest parameter matches several levels
, 1 to practiseWhen two routes match, the more specific one wins
paginate() splits a long list into pages
, 1 to practiseNot found pages and redirects
Recap: routing

Every page repeats the same frame
A base layout, line by line
, 1 to practiseA page wraps itself in the layout
The head tells search engines and social sites what the page is
, 1 to practiseMark the current page in the navigation
, 1 to practiseLayouts can wrap layouts
Let pages add to the head
Markdown pages pick their layout in frontmatter
Recap: layouts

Markdown is writing with a few symbols
A collection is a set of files of the same shape
Collections are declared in src/content.config.ts
, 1 to practiseZod in five minutes
getCollection lists entries
, 1 to practisePractise: list the quick recipes
, 1 to practiseOne page per entry, with render
Tag pages from the collection
, 1 to practiseData files and references between collections
Recap: content collections

Images are usually the heaviest part of a page
public/ is copied as it is; src/ is processed
, 1 to practiseThe Image component does the work for you
, 1 to practisePicture offers several formats; the browser picks one
Responsive images send each screen the size it needs
, 1 to practiseImages from other sites must be allowed first
, 1 to practiseImages in content collections are checked too
The fonts API downloads and serves fonts for you
, 1 to practiseOther files: ?url and ?raw
Recap: images, fonts and files

, 1 to practiseBy default, Astro sends no JavaScript
Hydration brings server HTML to life
Islands are written with a UI framework
The recipe search, as an island
, 1 to practiseA client directive turns a component into an island
Each directive says when to hydrate
, 2 to practiseCheck: choose the directive
, 1 to practiseProps cross from server to browser as data
Islands are separate: share state through a module
Recap: islands

A page can be made at build time or at request time
, 1 to practiseThe choice is made per route
Some things exist only when there is a request
, 1 to practiseCheck: personal data on a static page
An adapter turns the build into a server for one platform
, 1 to practiseCheck: what a hybrid build produces
Server islands: a static page with one fresh part
Sessions remember a visitor between requests
, 1 to practiseDeploying: a folder of files, or a server
Recap: rendering modes and deploying

An endpoint is a route that returns anything
, 1 to practisePrerendered endpoints become files
The context: everything about the request
Middleware runs before every route
, 1 to practiselocals carry information to the route
, 1 to practiseOn static pages, middleware runs at build time
Chaining middleware, redirects and rewrites
Environment variables keep settings out of the code
, 1 to practiseCheck: where a secret may go
Recap: endpoints, middleware and environment

A form is the browser’s own way to send data
, 2 to practiseCheck: what a form sends
An on-demand page can handle its own form
An action is a typed server function
, 1 to practisePoint a form at the action
, 1 to practiseThrow ActionError for problems the visitor should hear about
Calling an action from an island
, 1 to practiseProgressive enhancement: works first, then better
Astro checks where form posts come from
Recap: forms and actions

A second language is a second set of addresses
, 1 to practiseTell Astro which locales exist
, 1 to practiseYou still write the pages for each language
A page knows its language from its address
, 1 to practiseBuild every link from the config
, 1 to practiseGuessing the visitor’s language needs a request
A view transition animates the change of page
, 1 to practiseThe ClientRouter swaps pages without a full load
, 1 to practiseChoosing between CSS and the router
Recap: languages and transitions

Measure what the visitor feels
, 1 to practiseThe fastest JavaScript is the JavaScript you don’t send
, 1 to practiseImages and fonts decide LCP and CLS
, 1 to practiseHow CSS and HTML reach the browser
, 1 to practisePrefetch the page they are about to open
Caching: keep a copy so you don’t make it again
, 1 to practiseAstro 7 caches on-demand pages for you
, 1 to practisePurge by tag when content changes, and never cache what’s personal
Faster builds for big sites
Recap: performance and caching

What can go wrong on a small blog
, 1 to practiseExpressions are escaped; set:html is not
, 1 to practiseSecrets stay on the server
, 1 to practiseAstro checks where form posts come from
A Content Security Policy says what a page may load
, 1 to practiseAstro hashes every script and style it builds
, 1 to practiseYou write the other directives
, 1 to practiseScripts Astro can’t see need your hash
, 1 to practiseWhat a meta policy can’t do, and what it rules out
Recap: security

An integration plugs a feature into Astro
, 1 to practiseWhat astro build does, in order
, 1 to practiseAstro is built on Vite
The hooks, and when they run
, 1 to practiseWriting a small integration
, 1 to practiseTesting components with the container API
, 1 to practiseArchitecture: decide where each part runs
Where the content comes from
Recap: integrations and architecture

, 1 to practiseHow this challenge works
, 2 to practiseReview: a dynamic route
, 2 to practisePredict: an island’s props
, 2 to practiseChoose: which routes need a server
, 2 to practiseComplete: middleware for the members area
, 1 to practiseFind the bug: the newsletter action
, 1 to practiseReview a pull request
, 1 to practiseDesign: a recipe site that grows
Recap: thinking like an Astro expert

Build a conference website on your own computer
Step 1: one layout for every page
Step 1: each page keeps only its own content
, 1 to practiseStep 2: mark the current page
Step 3: a page for wrong addresses
Step 4: the talks become a content collection
, 1 to practiseStep 4: the schema checks every file
Step 4: a card for each talk
Step 4: the schedule lists the cards
Step 5: a page for each talk
, 1 to practiseStep 5: only the listed pages exist
Step 6: put the speaker beside the talk
Step 7: a page for each tag
, 1 to practiseStep 7: link each talk to its tags
Step 8: filter the schedule as you type
Step 9: a JSON feed of the talks
, 1 to practiseStep 9: check the types
Step 9: build it, then preview the build
What you built, and where to go next