First steps with Astro

What is Astro ?

In the ever-evolving landscape of web development, new technologies emerge to streamline the process and enhance the developer experience. One such groundbreaking technology is Astro, a modern JavaScript framework designed to optimize web performance and improve the overall development workflow for front-end focused websites. That’s why i used it for my personal website (The one you’re reading). To be more precise, Astro is a static site generator (SSG).

What is a Static Site Generator ?

A static site generator (SSG) is a tool that helps developers build static websites. Unlike dynamic websites, where content is generated on-the-fly by a server in response to user requests, static websites consist of pre-built HTML, CSS, and JavaScript files. The content on static sites remains the same until manually updated or regenerated.

Here’s how a static site generator typically works:

Content Creation: Developers or content creators write content in a markup language like Markdown or HTML. They organize this content into a directory structure.
Template System: SSGs often use templates (such as Handlebars, Liquid, or others) to define the structure of the website and how the content should be displayed. Some have their own !
Build Process: When it’s time to publish or update the site, the static site generator processes the content and templates, combining them to generate a set of static HTML, CSS, and JavaScript files. This is done during the build process. Since static sites serve pre-built files, they are generally faster and more scalable than dynamic sites because there’s no need for server-side processing or database queries for each user request.
Hosting: The generated static files can be hosted on any web server, including content delivery networks (CDNs) or platforms like GitHub Pages or Netlify. I think it’s a perfect thing for documentation.

Popular static site generators include Jekyll, Hugo, Gatsby, and Next.js. These tools have gained popularity due to their simplicity, speed, and ease of deployment. They are often used for blogs, documentation sites, and other content-focused websites. Astro is one of them.

Pros and Cons for me

After a bit of discovering, i feel there’s a bunch of pros and cons i can share here, for my usecase.

Pros

Performance: Generating only HTML, Astro can build some really fast websites.
Workflow: When i feel Angular or React are “too much” for a nearly pure static front-end website, and pure HTML/CSS makes it less flexible, Astro’s workflow takes place just between those two options.
Easy to use: Not a huge learning curve for somebody who’s already a bit into web dev. And if you know React/Vue/etc., you can bring’em into Astro
Markdown use: When everything is set up, if you want to add some content, you can just add a Markdown file and never manipulate code again

Cons

Ressources: Astro is a new framework, so there’s not a huge community yet. But maybe it’ll grow !
”Simple”: If you’re into static websites or little blogs, Astro is for you. If you wanna build something more complex, there’s some limitations.
Not dynamic: Astro is not really made to build highly interactive websites. Which means i’ll need to stick to a portfolio/blog layout.

If you want to see what can be made with Astro, here are examples of themes of the official website. As i wanted something “straight-forward”, for my website, i use one of their themes, they’re really good.

How to

Prerequisites

Node.js and npm: Ensure that you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from nodejs.org.

Steps to Create an Astro Project:

Install Astro:

Open a terminal or command prompt and run the following command to install Astro globally on your machine:

npm install -g create-astro

Create a New Astro Project:

Run the following command to create a new Astro project. Replace my-astro-project with the desired name of your project: Here, you’ll be able to choose between multiple options for your project, such as Typescript support and more.

create-astro my-astro-project

Navigate to the Project Directory:

Change into the newly created project directory:

cd my-astro-project

Install Dependencies:

Install project dependencies using npm:

npm install

Start the Development Server:

Start the Astro development server to preview your project locally. This will also watch for changes in your code and update the preview in real-time !

npm run astro dev

The development server will provide you with a local URL (default is http://localhost:4321). Open this URL in your web browser to see your Astro project in action. In this page, you’ll find a little toolbar at the bottom of the page which can be useful in development phase, with a little button for accessibility check.

Explore the Project Structure:

Astro projects have a simple structure. Key files and directories include:

src/: This is where your source code resides.
src/pages/: Pages in your project. (Here, i have my about.astro page, my index.astro for the homepage, and some others)
src/layout: Layouts. I personally have only one.
src/components/: Reusable components. Like in most of templating frameworks, i don’t need to copypaste 10000 times my footer. I can store it here in Footer.astro and reuse it as much as i can. I also have some components i know they’ll be on multiple pages.
src/content: My content. I’m currently writing in it because my blog posts are stored here.
public/assets: My assets/images. I also stored a .pdf file here.
astro.config.js: Astro configuration file.

Build for Production:

When you’re ready to deploy your project, you can build it using the following command:

npm run build

This command generates the static files in the dist/ directory, which you can then deploy to your hosting provider of choice.

Additional Resources

Astro Documentation: The official documentation is an excellent resource for understanding and exploring the features of Astro.

With these steps, you should have a basic Astro project up and running. From here, you can explore advanced features, integrate with other libraries, and build powerful web applications with enhanced performance.