Skip to content
Go back

Astro Blog Setup

Project Start:
Updated:

Decisions

I have done web development, and it put it lightly it’s definitely not for me. So I was looking for a site solution that would mostly get out of the way and let me focus on the content rather than the presentation. I’ve poked around at static sites before, and that seemed like an obvious choice, and after some digging Astro is where I landed.

I did the research a long while back, but I think I settled on Astro because it was a good balance between providing convenient features like components without requiring that I learn a framework-specific markdown language.

I have an active GitHub account, but the focus there is more on contributions to public projects, so I decided I’d go to GitLab to host.

Setup

I started with the Build a blog tutorial in Astro’s docs, but wanted to set up a devcontainer in VS Code for the node.js dependencies (too many node projects require a certain version or certain dependency versions and get unhappy if I try to develop more than one directly on my machine). However I immediately ran into issue where running npm run dev hosted a website with… nothing. Not really any errors or anything, but it definitely wasn’t working.

After some brief post-mapping attempts, I came across this post and solved the issue by adding this to the astro.config file:

server: {
    host: '127.0.0.1'
  }

About half-way through the tutorial things started getting more in-depth than I cared for (I’m not planning to build a whole site in Astro, just a blog) and I decided it was time to pick an Astro theme and get to work.

… but you can’t just pick a theme. “Themes” in Astro are actually just pre-built Astro webpages that you can copy and replace the content. In one sense this is excellent because I don’t want to build a website, but less great because I just spent some time building a tutorial blog that I have to just overwrite.

Once again aiming for simplicity I picked Astro Paper as a theme (also I liked the default color scheme). I used npm create astro@latest -- --template satnaing/astro-paper to create a new Astro page in a subdirectory of my existing blog, and then moved/replaced all the various files and directories over the top of my existing blog (not elegant, but it got the job done). A few little UI tweaks and I was good to go.

The second minor hiccup I ran into is that GitLab Pages requires that the generated site be in the public directory. This is fine except that Astro, by convention, uses dist for the output and public for static assets. There were a few Astro-Paper-specific changes required, but mostly I just had to put this in astro.config:

  outDir: 'public',
  publicDir: 'static',

It makes things a little confusing because I have to remember the “public directory” is called “static” and the “output directory” is called “public”, but it works.

Loose Ends


Share this post on:

Following Post
IncusOS Router / Server
Earlier Post
Blastoff!