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 astro.build 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 astro.build, 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.
