This is the first entry in a series. In this post I will write about the technology used to create this site along with the process for adding new posts.
Back in September, my good friend Mary suggested setting up a blog after she heard my travel plans. I thought this was an incredible idea and straight away got to work!
As a frontend developer I liked the idea of building my own site/blog from scratch, as opposed to using Medium, Substack, Wordpress etc.—I wanted this to be more of a coding experience whereas with Wordpress it feels like it would be more learning how to use it.
In my professional life I used React extensively and—more recently—Remix, so I started building something out with this before realising it was a bit much for a standard blog.
Then, in October, I subscribed to the ever-excellent Cassidoo newsletter and noticed that her blog is open source, using Astro and TinaCMS—two things I hadn’t heard of let alone used. So I forked her repo, had a look around, and liked what I saw.
The content below touches on a few technical things but may be of interest to those without the tech background regardless.
Astro & TinaCMS
Astro is a JavaScript web framework optimized for building fast, content-driven websites.
Setting up Astro is pretty straightforward. There is even a default blog template when you go to start a new project. This is what I used to get the basic layout then removed the placeholder posts and filler content and worked on the code using VS Code.
Running the first command starts the project creation
TinaCMS is an open-source, headless CMS that supports Git, with built-in version control.
TinaCMS is a revelation. It runs on top of your site and allows for all the creating/editing/deleting of the posts. Once you create a file it uses the title as the url (e.g. this url is /how-i-set-up-this-site) and creates a Markdown file in your project.
The TinaCMS dashboard. Lightweight and straightforward
I actually prefer to code in the .md file rather than in TinaCMS itself. It’s easier with the way I have the images set up.
It took some config work to add the fields needed for the blog post frontmatter and when that was set up I was good to go.
The different fields on an individual post. Fully customisable within the config
Once I’m happy (enough) with the blog I push the changes to Github and once it is merged the site updates, via the process mentioned in the next section.
Domain & Hosting
Having a not so common name I was able to secure davidmcgurrin.ie. Purchased the domain on Blacknight, an Irish domain provider. Glad to have it for the Irish branding but .ie is one of the more expensive ones, typical. In the past I had davidmcgurr.in (.in being India’s country code)—I thought this was pretty clever but may as well go with the .ie.
For hosting I use Netlify which is great. As soon as I merge a pull request on Github the Netlify integration kicks in and automatically builds and deploys the new site—very seamless and all for free!
Blog content
Mostly just making it up as I go along, trying out a few different things and see what works.
Copy
The beauty of a travel blog and visiting so many places means there is a lot of topics to write on. As things progressed, more ideas have come up and different topics emerged to branch out of the travel category (such as this one).
Usually when writing a post I try and dump a bunch of thoughts in first. Following this is the refinement phase where I had the headings and group things together.
Earlier on I did try running some of the text through ChatGPT for structure, grammar and vocabulary as I feel I’m not the greatest wordsmith.
However, as handy as it is, and with all the prompts in the world, it just cannot replace the essence of you. The tone is just that wee bit off that it sounds cheesy, in my opinion anyway. (ChatGPT also changed the mighty Maverick movie to Top Gun:Maverick—the cheek!)
Images
I take a ton of photos so when it comes to images there is almost a problem of having too much to choose from. Something I learned along the way though is to capture more landscape photos—a forgotten art in the smartphone era—as they look better on the website.
One of the most tedious aspects of the blog is converting portrait to landscape, as well as from .png to .jpg, since there’s a huge difference in the file size and a barely noticable difference in quality.
Thus far I’ve been using Fotor to go through images 1 by 1. There is a paid option to do in bulk but feck that.
If anyone knows of a better (and free) way to process the images please let me know!
Unsplash is a useful site for free stock images which I’ve used from time to time.
That’s it for part 1 of this series. Next up I’ll talk about how I work on the blog in terms of project management, i.e. keeping track of blog ideas and prioritising features and fixes.
DavAI SummAIriser
Want a quick summary of this post?
