My First Astro Site

My First Astro Site

I was recently assigned a “micro-site” of four pages that would be accessible by QR code. This was a very simple project to complete using just basic HTML/CSS, but I thought it would also be an interesting way to get my feet wet with Astro, a relatively new JavaScript-based static site generator.

I began by following the relevant portions of the “Build a Blog” tutorial on the website. (This looks like it would be a good tutorial to follow and learn all of the content it includes.)

First I had to install Astro. This requires Node.js and npm (or yarn) so be sure to get those installed first. Then, following the instructions at, I ran

npm create astro@latest

to start the new site creation wizard.

This went fine at first, and I chose the “empty site” option. I was not able to install the dependencies from the wizard (I kept getting a timeout). I had to complete the steps without installing dependencies, and then switch into the new directory I created for the project and run

npm i

Then it worked fine.

I played around with the index.astro file just to see how it worked. Then I began creating my real pages in markdown (.md) format because I figured that would be the most likely way I would want to add and edit content on simple pages like these (and I’m used to it from my work with Jekyll).

Next I wanted to figure out how to create layouts, again like I would do with Jekyll. This was also pretty straightforward: create a layouts folder in src/ and create a base layout … call it BaseLayout.astro. This layout contains the “wrapper” code that I used on the initial HTML pages. Content is inserted within the layout by using

<slot />

(this is analogous to Jekyll’s {{content}}.)

The footer is a common element across all pages, and while it too could just be placed into the base layout, I wanted to try creating a component for it:

Create a components folder in src/, and then a Footer.astro file. Copy the contents of the footer into the file, and insert it into the layout with this tag:

<Footer />

My footer contains an image, so I needed to import that image into the component first in its front matter:

import seal from '../images/scranton-seal-transparent-background.png';

And then use {seal} to refer to this variable within the footer code.

There are also some imports used on the base layout. In the front matter, I have :

import Footer from '../components/Footer.astro';
import '../styles/global.css';
const {frontmatter} = Astro.props;

These import the Footer component, global styles, and a variable taken from each page’s properties (its markdown front matter) as the title. (This is specified within the layout as {frontmatter.title}.)

The command to run this on a local development server is

npm run dev

The dev site (previously at localhost:3000; as of Astro v3, at localhost:4321) will update live.

In order to create a production copy, run npm run build and it will create the static site in a dist/ folder.

Initial thoughts … Astro seems a bit overcomplicated for a simple site, although of course the easiest way to become familiar with it is by using it to build/rebuild a simple site. I think the components and other features will really shine in more complicated applications. I am not sure about the use of <style> tags within the components and layouts - seems like Astro encourages this although my experience has always been that it’s best practice to separate styles and content/views as much as possible. I like the automatic style scoping that this offers, however. I need to learn more and get a “feel” for it, because I’m sure there is a very good rationale for this decision.

© 2024 Jennifer Galas. All rights reserved.