Astro is an open-source tool that can build static HTML websites using popular frontend JavaScript frameworks (React, Vue, Svelte), while loading fully interactive components as needed https://github.com/snowpackjs/astro

#webdev #js #100SecondsOfCode

This video is NOT sponsored. 

🔗 Resources

Astro https://astro.build/
Islands Architecture https://jasonformat.com/islands-architecture/

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:48:42.866Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
036a76a8-e4bc-4e35-8542-d80a9df6ae1a
7dcd4cf84c1b8e7cfe063d23d95f3052ee698672bd0be041dafb19afa956d5a8
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Astro, a tool for building static websites with your favorite JavaScript frameworks while shipping 0 JavaScript to the browser.
End users love a fast loading website, but developers love to build them with big heavy frameworks.
Unfortunately, the key to better performance is to use less JavaScript.
Astro allows you to build a site with your favorite framework or even multiple frameworks at the same time and renders them to static HTML at build time.
That sounds like a static site generator, but what's unique is that when you have a component that needs to be fully interactive with JavaScript, script.
You have multiple strategies at your disposal to render and hydrate it client side.
Any component in your UI with the client load direct It will be rendered with JavaScript on the initial page load like normal.
But if the component is not a high priority, you can wait until the browser is idle before rendering it.
Or if it's a component That's further down the page, you can hold off on rendering it until it's visible to the actual user with intersection observer.
Instead of thinking of a website as a single page application where the JavaScript takes over everything, think of it as an archipelago where your water is the static HTML, and islands are self contained components that add interactivity when needed.
The end result is a website that is fast and search engine friendly, but also has the full interactive power of a front end framework.
To build your first project, open an empty directory and run npm init astro.
Inside the project, you'll find the pages directory.
The file Structure here defines the actual URL structure or routing configuration for your website.
Each page is defined as an Astro component, inside of which you can write static like HTML, while also declaring components that might be written in React, Vue, or Svelte.
At the top of a component, you'll notice triple dashes.
This is where you can execute JavaScript on the server at build time.
You may want to fetch data from your server or content management system or local markdown files in your source code.
And as an added bonus, it supports top level await here, making it easier to write clean code.
And finally, you can expect all of the essential features found in other static at excite generators like RSS feeds, site maps, and so on.
This has been Astro in 100 seconds, a tool that I like so much that I'm actually using it to rebuild my personal portfolio website.
Subscribe to catch a full video on that and hit the like button if you wanna see more short videos like this.
Thanks for watching and I will see you in the next one.

Speaker 0: Astro, a tool for building static websites with your favorite JavaScript frameworks while shipping 0 JavaScript to the browser. End users love a fast loading website, but developers love to build them with big heavy frameworks. Unfortunately, the key to better performance is to use less JavaScript. Astro allows you to build a site with your favorite framework or even multiple frameworks at the same time and renders them to static HTML at build time. That sounds like a static site generator, but what's unique is that when you have a component that needs to be fully interactive with JavaScript, script.

You have multiple strategies at your disposal to render and hydrate it client side. Any component in your UI with the client load direct It will be rendered with JavaScript on the initial page load like normal. But if the component is not a high priority, you can wait until the browser is idle before rendering it. Or if it's a component That's further down the page, you can hold off on rendering it until it's visible to the actual user with intersection observer. Instead of thinking of a website as a single page application where the JavaScript takes over everything, think of it as an archipelago where your water is the static HTML, and islands are self contained components that add interactivity when needed.

The end result is a website that is fast and search engine friendly, but also has the full interactive power of a front end framework. To build your first project, open an empty directory and run npm init astro. Inside the project, you'll find the pages directory. The file Structure here defines the actual URL structure or routing configuration for your website. Each page is defined as an Astro component, inside of which you can write static like HTML, while also declaring components that might be written in React, Vue, or Svelte.

At the top of a component, you'll notice triple dashes. This is where you can execute JavaScript on the server at build time. You may want to fetch data from your server or content management system or local markdown files in your source code. And as an added bonus, it supports top level await here, making it easier to write clean code. And finally, you can expect all of the essential features found in other static at excite generators like RSS feeds, site maps, and so on.

This has been Astro in 100 seconds, a tool that I like so much that I'm actually using it to rebuild my personal portfolio website. Subscribe to catch a full video on that and hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Astro, a tool for building static websites with your favorite JavaScript frameworks while shipping 0 JavaScript to the browser. End users love a fast loading website, but developers love to build them with big heavy frameworks. Unfortunately, the key to better performance is to use less JavaScript. Astro allows you to build a site with your favorite framework or even multiple frameworks at the same time and renders them to static HTML at build time. That sounds like a static site generator, but what's unique is that when you have a component that needs to be fully interactive with JavaScript, script.
astrology
architecture
You have multiple strategies at your disposal to render and hydrate it client side. Any component in your UI with the client load direct It will be rendered with JavaScript on the initial page load like normal. But if the component is not a high priority, you can wait until the browser is idle before rendering it. Or if it's a component That's further down the page, you can hold off on rendering it until it's visible to the actual user with intersection observer. Instead of thinking of a website as a single page application where the JavaScript takes over everything, think of it as an archipelago where your water is the static HTML, and islands are self contained components that add interactivity when needed.
The end result is a website that is fast and search engine friendly, but also has the full interactive power of a front end framework. To build your first project, open an empty directory and run npm init astro. Inside the project, you'll find the pages directory. The file Structure here defines the actual URL structure or routing configuration for your website. Each page is defined as an Astro component, inside of which you can write static like HTML, while also declaring components that might be written in React, Vue, or Svelte. At the top of a component, you'll notice triple dashes. This is where you can execute JavaScript on the server at build time.
astrology
websites
architecture
You may want to fetch data from your server or content management system or local markdown files in your source code.
And as an added bonus, it supports top level await here, making it easier to write clean code. And finally, you can expect all of the essential features found in other static at excite generators like RSS feeds, site maps, and so on. This has been Astro in 100 seconds, a tool that I like so much that I'm actually using it to rebuild my personal portfolio website. Subscribe to catch a full video on that and hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
astrology
youtube
video gaming
streaming
software
computer science
Astro, a tool for building static websites with your favorite JavaScript frameworks while shipping 0 JavaScript to the browser. End users love a fast loading website, but developers love to build them with big heavy frameworks. Unfortunately, the key to better performance is to use less JavaScript. Astro allows you to build a site with your favorite framework or even multiple frameworks at the same time and renders them to static HTML at build time. That sounds like a static site generator, but what's unique is that when you have a component that needs to be fully interactive with JavaScript, script. You have multiple strategies at your disposal to render and hydrate it client side. Any component in your UI with the client load direct It will be rendered with JavaScript on the initial page load like normal. But if the component is not a high priority, you can wait until the browser is idle before rendering it. Or if it's a component That's further down the page, you can hold off on rendering it until it's visible to the actual user with intersection observer. Instead of thinking of a website as a single page application where the JavaScript takes over everything, think of it as an archipelago where your water is the static HTML, and islands are self contained components that add interactivity when needed. The end result is a website that is fast and search engine friendly, but also has the full interactive power of a front end framework. To build your first project, open an empty directory and run npm init astro. Inside the project, you'll find the pages directory. The file Structure here defines the actual URL structure or routing configuration for your website. Each page is defined as an Astro component, inside of which you can write static like HTML, while also declaring components that might be written in React, Vue, or Svelte. At the top of a component, you'll notice triple dashes. This is where you can execute JavaScript on the server at build time. You may want to fetch data from your server or content management system or local markdown files in your source code. And as an added bonus, it supports top level await here, making it easier to write clean code. And finally, you can expect all of the essential features found in other static at excite generators like RSS feeds, site maps, and so on. This has been Astro in 100 seconds, a tool that I like so much that I'm actually using it to rebuild my personal portfolio website. Subscribe to catch a full video on that and hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Astro,
astro
a
a
tool
tool
for
for
building
building
static
static
websites
websites
with
with
your
your
favorite
favorite
JavaScript
javascript
frameworks
frameworks
while
while
shipping
shipping
0
0
JavaScript
javascript
to
to
the
the
browser.
browser
End
end
users
users
love
love
a
a
fast
fast
loading
loading
website,
website
but
but
developers
developers
love
love
to
to
build
build
them
them
with
with
big
big
heavy
heavy
frameworks.
frameworks
Unfortunately,
unfortunately
the
the
key
key
to
to
better
better
performance
performance
is
is
to
to
use
use
less
less
JavaScript.
javascript
Astro
astro
allows
allows
you
you
to
to
build
build
a
a
site
site
with
with
your
your
favorite
favorite
framework
framework
or
or
even
even
multiple
multiple
frameworks
frameworks
at
at
the
the
same
same
time
time
and
and
renders
renders
them
them
to
to
static
static
HTML
html
at
at
build
build
time.
time
That
that
sounds
sounds
like
like
a
a
static
static
site
site
generator,
generator
but
but
what's
what's
unique
unique
is
is
that
that
when
when
you
you
have
have
a
a
component
component
that
that
needs
needs
to
to
be
be
fully
fully
interactive
interactive
with
with
JavaScript,
javascript
script.
script
You
you
have
have
multiple
multiple
strategies
strategies
at
at
your
your
disposal
disposal
to
to
render
render
and
and
hydrate
hydrate
it
it
client
client
side.
side
Any
any
component
component
in
in
your
your
UI
ui
with
with
the
the
client
client
load
load
direct
direct
It
it
will
will
be
be
rendered
rendered
with
with
JavaScript
javascript
on
on
the
the
initial
initial
page
page
load
load
like
like
normal.
normal
But
but
if
if
the
the
component
component
is
is
not
not
a
a
high
high
priority,
priority
you
you
can
can
wait
wait
until
until
the
the
browser
browser
is
is
idle
idle
before
before
rendering
rendering
it.
it
Or
or
if
if
it's
it's
a
a
component
component
That's
that's
further
further
down
down
the
the
page,
page
you
you
can
can
hold
hold
off
off
on
on
rendering
rendering
it
it
until
until
it's
it's
visible
visible
to
to
the
the
actual
actual
user
user
with
with
intersection
intersection
observer.
observer
Instead
instead
of
of
thinking
thinking
of
of
a
a
website
website
as
as
a
a
single
single
page
page
application
application
where
where
the
the
JavaScript
javascript
takes
takes
over
over
everything,
everything
think
think
of
of
it
it
as
as
an
an
archipelago
archipelago
where
where
your
your
water
water
is
is
the
the
static
static
HTML,
html
and
and
islands
islands
are
are
self
self
contained
contained
components
components
that
that
add
add
interactivity
interactivity
when
when
needed.
needed
The
the
end
end
result
result
is
is
a
a
website
website
that
that
is
is
fast
fast
and
and
search
search
engine
engine
friendly,
friendly
but
but
also
also
has
has
the
the
full
full
interactive
interactive
power
power
of
of
a
a
front
front
end
end
framework.
framework
To
to
build
build
your
your
first
first
project,
project
open
open
an
an
empty
empty
directory
directory
and
and
run
run
npm
npm
init
init
astro.
astro
Inside
inside
the
the
project,
project
you'll
you'll
find
find
the
the
pages
pages
directory.
directory
The
the
file
file
Structure
structure
here
here
defines
defines
the
the
actual
actual
URL
url
structure
structure
or
or
routing
routing
configuration
configuration
for
for
your
your
website.
website
Each
each
page
page
is
is
defined
defined
as
as
an
an
Astro
astro
component,
component
inside
inside
of
of
which
which
you
you
can
can
write
write
static
static
like
like
HTML,
html
while
while
also
also
declaring
declaring
components
components
that
that
might
might
be
be
written
written
in
in
React,
react
Vue,
vue
or
or
Svelte.
svelte
At
at
the
the
top
top
of
of
a
a
component,
component
you'll
you'll
notice
notice
triple
triple
dashes.
dashes
This
this
is
is
where
where
you
you
can
can
execute
execute
JavaScript
javascript
on
on
the
the
server
server
at
at
build
build
time.
time
You
you
may
may
want
want
to
to
fetch
fetch
data
data
from
from
your
your
server
server
or
or
content
content
management
management
system
system
or
or
local
local
markdown
markdown
files
files
in
in
your
your
source
source
code.
code
And
and
as
as
an
an
added
added
bonus,
bonus
it
it
supports
supports
top
top
level
level
await
await
here,
here
making
making
it
it
easier
easier
to
to
write
write
clean
clean
code.
code
And
and
finally,
finally
you
you
can
can
expect
expect
all
all
of
of
the
the
essential
essential
features
features
found
found
in
in
other
other
static
static
at
at
excite
excite
generators
generators
like
like
RSS
rss
feeds,
feeds
site
site
maps,
maps
and
and
so
so
on.
on
This
this
has
has
been
been
Astro
astro
in
in
100
100
seconds,
seconds
a
a
tool
tool
that
that
I
i
like
like
so
so
much
much
that
that
I'm
i'm
actually
actually
using
using
it
it
to
to
rebuild
rebuild
my
my
personal
personal
portfolio
portfolio
website.
website
Subscribe
subscribe
to
to
catch
catch
a
a
full
full
video
video
on
on
that
that
and
and
hit
hit
the
the
like
like
button
button
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, a speaker explains how Astro is a tool for building static websites with JavaScript frameworks, and how it allows developers to use multiple frameworks at once to create websites that are fast and searchable. The speaker also discusses how Astro supports front-end development and building websites with specific elements. The video ends with a recommendation to a website builder and a promotion for a short video on Astro.
Astro in 100 Seconds
Astro, a tool for building static websites with your favorite JavaScript frameworks while shipping 0 JavaScript to the browser. End users love a fast loading website, but developers love to build them with big heavy frameworks. Unfortunately, the key to better performance is to use less JavaScript. Astro allows you to build a site with your favorite framework or even multiple frameworks at the same time and renders them to static HTML at build time. That sounds like a static site generator, but what's unique is that when you have a component that needs to be fully interactive with JavaScript, script. You have multiple strategies at your disposal to render and hydrate it client side. Any component in your UI with the client load direct It will be rendered with JavaScript on the initial page load like normal. But if the component is not a high priority, you can wait until the browser is idle before rendering it. Or if it's a component That's further down the page, you can hold off on rendering it until it's visible to the actual user with intersection observer. Instead of thinking of a website as a single page application where the JavaScript takes over everything, think of it as an archipelago where your water is the static HTML, and islands are self contained components that add interactivity when needed. The end result is a website that is fast and search engine friendly, but also has the full interactive power of a front end framework. To build your first project, open an empty directory and run npm init astro. Inside the project, you'll find the pages directory. The file Structure here defines the actual URL structure or routing configuration for your website. Each page is defined as an Astro component, inside of which you can write static like HTML, while also declaring components that might be written in React, Vue, or Svelte. At the top of a component, you'll notice triple dashes. This is where you can execute JavaScript on the server at build time. You may want to fetch data from your server or content management system or local markdown files in your source code. And as an added bonus, it supports top level await here, making it easier to write clean code. And finally, you can expect all of the essential features found in other static at excite generators like RSS feeds, site maps, and so on. This has been Astro in 100 seconds, a tool that I like so much that I'm actually using it to rebuild my personal portfolio website. Subscribe to catch a full video on that and hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
In this video, a speaker explains how Astro is a tool for building static websites with JavaScript frameworks, and how it allows developers to use multiple frameworks at once to create websites that are fast and searchable. The speaker also discusses how Astro supports front-end development and building websites with specific elements. The video ends with a recommendation to a website builder and a promotion for a short video on Astro.