Astro: Starting My New Website

Lake Vyrnwy on a Hazy Day in April 2008

Since my last post, I’ve been busy sussing out how to use Astro to write my new website. It’s looking good. It’s far, far better than Jekyll. It’s much more powerful and easily extended.

The main problem was figuring out how it works; how to use it. The only way to do this is to create an actual website, which is exactly what I did. I created a basic one based on my current Home, About, Journal, Contact, Copyright and Info pages, plus a 404 error page. It took a few iterations, but I eventually understood Astro well enough to create a website I was happy with.

One thing I like is that it’s easy to extend Astro by adding your own code. All you need to do is learn TypeScript, a programming language I like (mainly because it’s strongly typed). Before starting this project, I knew a little bit about it (from writing the Ulverston Fallen website). But I have a lot to learn before I really understand it. TypeScript compiles into JavaScript; in my humble opinion, it’s a much better way to write JavaScript.

The new version of the website is here. Over the next few months, I’ll move the original website over. Along the way, I’ll tweak it and add a few new features. Eventually, the new version will become the actual version, and Jekyll will be history.

Markdown

I use Markdown to write my web page content. It’s simple to use. It’s easy to learn. It’s easy to write.

The Markdown for a given web page (or journal post) is contained within a single file. There are two parts to it: the Front Matter and the actual Markdown.

The Front Matter contains variable data such as the post’s URL, the date it was written, the date it was last updated and the author. For my website, it contains links to the previous and next journal posts. It contains the names of the tabs associated with a journal post. Plus a lot more. In Jekyll, these values can only be accessed by the Theme.

The Markdown is fixed text that cannot reference Front Matter. Authors, dates and links to the previous and next journal posts must be hard-coded into it (which duplicates values). The Markdown cannot contain any logic.

I’m not really happy with this, but I’ve learnt to live with it.

Within Markdown, it would be nice to access values in the Front Matter, such as the created and last updated dates, and the author (no more duplication). It would also be nice if it could contain logic; for example, only display a last updated date if a date has been specified.

Markdown for Components (MDX)

Markdown for Components allows me to do the things I want to do in Markdown but can’t. It allows me to access Front Matter variables and add logic to my Markdown.

Referencing Front Matter variables is easy enough; you place the value in curly brackets. For example, if the creation date is ‘20/09/2026’, then adding “Date Created: {frontmatter.dateCreated}” to the Markdown results in “Date Created: 20/09/2026” being added to the web page.

A big problem with this approach is that the date isn’t formatted. What if we wanted the date to be formatted as “20th September 2026”? You can add JavaScript to the MDX to format the date, but this complicates the Markdown. It also has to be added to every Markdown file that wants to format a date. And people who are not programmers won’t be able to do this.

With Astro, you can write components that can be easily referenced in the MDX text. A component has a name and zero, one or more parameters. For example, a component to format a date requires the date and the required format. It contains all of the JavaScript required to format the date. Once the component has been written and tested, it can be referenced and used in any MDX file.

For the same date, the Markdown “Date Created: <FormatDate date = {frontmatter.date} format = ”DMY”/>” will be translated to “Date Created: 20th September 2026”.

A component takes the parameters and generates the HTML (if any), which is added to the translated Markdown. Components are part of the Theme and do not require users to understand HTML. All of the HTML generation is hidden in the component.

Components are very, very powerful. I’ll be investigating them further as I port my website to an Astro-based one. For now, I’ve only created a few simple ones. As this project continues, they will get more and more complicated. I suspect I’m going to be creating a lot of components.

An Issue With This Approach

Until I came across Astro, I’d never heard of Markdown for Components. At present, I have no idea how common it is in other website generators. And, more importantly, if it is, does it work the same way? Moving my Jekyll-based website to Astro could make it difficult or impossible for me to move to another website generator in the future. It’ll certainly be impossible to move it back to Jekyll.

Last January, Cloudflare acquired Astro. They tell us it’ll continue to be open-source software, distributed under the MIT license. Who knows. But given the incredibly strong community of open-source developers writing for it, I suspect this’ll be true. If Cloudflare keeps its promise, this is good. With Cloudflare, hopefully there will be a budget for further developing Asto (people might write open-source code for free, but the project still has costs, such as databases and servers).

After some thought, I decided to throw my lot in with Astro; component-based Markdown looks very exciting. I’m sure components will be extremely useful for my journal.

Astro Code

In this series of posts about moving my journal to Astro, I’ll write about the components I create and the new features I add to my website. About how I use them for things like image manipulation and creating a database of external links (so I can automatically check if a link disappears (a 404 error) or the content changes). About how I automated the links between individual journal posts and posts in a series (which are hard-coded at present).

I won’t be writing about how I actually wrote the code for my components and features. I’m too busy porting my website and adding new posts to the old website. Soon, I’ll publish the code behind these components and features on GitHub. You can then view them and even use them yourself (they’ll be published under an MIT license).