I am a lover of top-level domains. I have been buying useless-but-funny TDL or generic TLDs for over a decade. My charity event (hugs.tf) was a joke based on a friend’s HUD site domain (huds.tf), bought and left dormant for years until we decided to do something for it. Our esports team (not dead doggo) had notdead.dog. Last year I purchased isthegamejamhappening.co.uk for a 2 week joke and immediately regretted it.

I am a terrible web developer. Sure, I’ve patched together a few minor successes with Bootstrap, HTML, and CSS - but I must call my skills ‘barbaric at best.’

So when I was giddy in anticipation of buying yet another domain (studygame.dev) to replace my own website, it only dawned on me later on that I should actually park something on it. Long story short, I thought that most valuable use for the domain was a blog: but how the #### do I do that?

Having only made single-page certified bangers up until now, I was certain that doing it alone wasn’t going to work. I looked into Medium, who wanted a monthly fee to host the site on a private domain. I looked into Wordpress and wanted to tear my eyes out of my face. I didn’t look any further because that would’ve broken the comedy rule of thirds. No - I wasn’t ready to retire my awful web skills. I needed something else.

Astro

I must have been sleeping under a rock for the last 3 years, because Astro hit the market in 2023 offering a Javascript framework for building static content-heavy websites, such as blogs and e-commerce stories. Using plenty of very clever tool keywords that I’ve at least heard of, such as Node.js, React, Vue, Astro can build that essential dynamic framework that you need to create a web site like a blog - where you don’t want to be updating 100s of header links for each one of your pages every time you push an update.

In a nutshell, the process is this:

• Run a couple terminal commands to install relevant dependencies
• Run a terminal command to build the website
• You have a website that you can upload via your hosting provider, or GitHub (I imagine)

Now, again to underline - none of this is new. But it was new to me.

The process was relatively straight-forward, provided that you have opened your terminal/console window at least once in your life. If you haven’t, it’s still not impossible - but it’s significantly more anxiety-inducing. However, if after all this you happen to be interested in how this very basic, but functional, blog was made - I’m just going to tell you. We don’t gatekeep, especially when the information is this valueless.

Installation

As if this entire article wasn’t enough of a joke, the entire process of building the website was driven by a ChatGPT conversation. I tell you what, I don’t care. It genuinely cooked and ate the entire process, leaving no crumbs, and no notes.

It described Astro as the perfect companion to my skillset, allowing the creation of article content in Markdown, which then is parsed, injected into a CSS and Astro layout, where a static HTML page is automatically created and embedded into the page. It would have separated Header and Footer components, and would build into a compact distributable website which even compressed my images for me.

However, it had just one barrier to overcome: installation.

To begin installation, you first need to install Node.js onto your computer. This can be found at https://nodejs.org/en.

If you’re unsure if you’d already done this before, open your terminal and type in: node -v

Which will either respond with a: v20.10.0 (or equivalent) if it’s installed…

or 'node' is not recognized as an internal or external command (or equivalent) if it’s not.

Once it’s installed, again type in node -v and npm -v. This will install node (run whichs JavaScript programs, the frameworks used under the hood), and npm (a package manager which downloads and installs tools like Astro).

Finally: type npm create astro@latest.

Configuration

The early options of this process are important if you don’t want to install your project in System32 (which is what I did). I would recommend having arrow keys (or equivalent) to navigate the terminal space as you paste in the folder location, and choose the “Blog Template” option. For an interested party, there are plenty more templates available - but I honestly couldn’t tell you. As you click through, choose these options if you want an identical blog space to the website you’re currently sat on.

• Where should we create your new project? [LOCATION]
• How would you like to start your new project? [Use blog template]
• Install Dependencies? [Yes]
• Initialize a new git repository? (optional) [No - you can do but I ended up not needing it]

With that, it will build the site in roughly 30 seconds.

Using your new Astro Site

The website that you’ve created isn’t so much of a website as I would have previously understood it. It’s to be expected that such a clever solution to this problem would require a slight abstraction - and this is it: the website doesn’t exist yet.

The project folder that you’ve created is instead the instructions for the website to be built - with folders akin to the comments below:

• Project folder
  • .Astro - internal workings, essentially magic, don’t touch
  • .vscode - same
  • dist - where your website WILL be when it’s ready
  • node_modules - don’t know, scared of it tbh
  • public <--- IMPORTANT AND USEFUL
  • src <--- EVERYTHING ABOUT THE SITE YOU NEED TO KNOW IS HERE

“public” is a useful folder for placing in fonts and images you want to use in your blog posts, which can be referred to as you would a traditional html website: for instance a file named image.jpg placed in the public folder could be embedded into your Markdown with <img src="/images/image.jpg" alt="An image" />.

However, “src” is the most important folder of all - and is essentially where all of the micro decisions that make up your blog site are made:

• src
  • assets <- article images
  • components <- home of your header, footer, and other page components
  • content <- contains all of your blog posts in Markdown format inside of “blog”
  • layouts <- contains the formatting for your blog article template
  • pages <-contains the formatting for other page templates, such as the index
  • styles <- contains the global stylesheet
  • consts.ts <- the blog name and description (for previews, headers, etc)
  • content.config.ts <- defines the data used by your pages - important

My only criticism of the layout above is that the separation of “layouts” and “pages” is a little awkward. It’s perhaps due to the multi-use nature of Astro, and “layouts” or “pages” are generated as a result of our choice of “blog” template. However, once you understand the structure of the folder, you’re good to go! Initially, I worked on making alterations to the global stylesheet and working on the formatting for the first page, before creating a test article within “content”, and working my way outwards.

You’ll have to refresh your memory on basic CSS and Markdown, and .astro files are essentially a merging of these with HTML. If all of this is jargon to you, select the project folder and hit delete. Otherwise, I have absolute faith that you (and ChatGPT) will figure it out.

Preview and Building

As you get used to the folder structure: making a new article here, changing a global stylesheet there, copy and pasting code from the internet on a whim and somehow being confused that it doesn’t work… you’ll eventually come against your final boss in this process - how do I see the website?

Unfortunately, the abstraction we spoke about earlier comes with the cost that we have to go back into the terminal window in order to see our website. Would it help if I told you it gets easier with time?

To preview your website, open the terminal window for your project folder and type npm run dev. This will create a live preview of your website on localhost:4321 - a locally hosted website on your own computer.

Don’t, and I beg you please don’t, send localhost:4321 to someone to show them your new website.

To build your website, it’s the same process except with npm run build. This will create all of the necessary files for your website, while also compressing your images and performing a number of increasingly clever and modern web development tricks that I wouldn’t even know what to google. Once you have the files, upload to your file hosting platform of choice, or I presume that you could host it on GitHub or equivalent.

Conclusion

So there you have it: a barely competent web developer, armed with a new domain, a terminal window, and the miraculous powers of Astro, has now birthed a baby blog. If you’ve read this far, congratulations… why?

Astro made it easier than I ever expected, and if you’re anything like me you’ll be amazed that it’s taken all of the drama out of making a more complex website that I could’ve managed alone. With a little patience, help from your robot chat daddy of choice, and a few error screens when you fly too close to the sun, you’ll have a working blog to write your own nonsense on too.

If nothing else, I hope this serves as a small beacon of hope. Maybe we’re safe now - Astro is here. It’s approachable, and you might even enjoy it. Maybe that’s what we’ll take away from all of this.

But the real moral of the story is that no top-level domain purchase is too ridiculous to justify, even if it means learning an entirely new framework and making a website in 24 hours.

---