At Corporation Pop, we like to be up to date with the latest web trends and tools that will help us produce quicker and better websites. We recently discovered a new static site builder called Astro.
Astro is a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. It allows you to build a site using any JavaScript framework of your choice and renders your entire page to static HTML, removing all JavaScript from your final build by default.
Getting started
Astro is straightforward but will need a few things setting up first.
- Node.js – 14.15.0 or higher
- a text editor of your choice
- command line terminal
Install the handy installation wizard either manually or using the CLI (command-line interface).
Once installed, you can use the command to start your project. It will open in a new browser window and look something like this.
Inside your project
Inside the Astro project, you will see the following:
- Public folder – files and assets that do not need to be processed during build, such as favicons and images.
- SRC folder – where pages, layouts, components, styles and Markdown are kept.
- Package.json file – a file used by JavaScript package managers to manage your dependencies. It also defines the scripts that are commonly used to run Astro. Similar to all the frameworks using node/npm packages.
As with any other framework, you can play around with the site and start putting stuff together.
As you can see from the screenshot, you first have to import the components to the page. It can be either a static component or an interactive one. Then, to add them to the page structure, you will need to add them as shown.
Let’s dive deeper
Astro works a lot like static site generators currently available, like Gatsby or Hugo. What makes Astro different is it renders your entire site to static HTML during the build with all JavaScript removed from the last page. Making the website load fast — and I mean really fast!
Sometimes JavaScripts are inevitable — for example, image carousels, shopping carts and other interactive elements that require user interactions — where they are needed to run in the browser. This is where Astro is better suited than other static site builders on the market. Astro can load these components while keeping the rest of the site JavaScript free, keeping the whole site lightweight. This is called partial hydration and is based on the new web approach of island architecture.
Conclusion
Astro is still relatively new to the game, but it has gained some attraction in the world of web. It’s simple to use, easy to get started and suitable for all levels of developers. And with a growing community in their Discord channel, I can see this framework taking off and potentially being the go-to tool for Corporation Pop in the future.