February 3, 2019

Moving My Site to Jigsaw, TailwindCSS and Netlify

In 2014, I built a website using Jekyll and deployed it onto Github Pages. My intention with the site was to start blogging regularly about development and music. Since then, I've managed to write a total of four posts: two in 2014, one in 2015, and one in 2016. None of them were really very useful to anyone and, ever since, the site has sat there abandoned.

I imagine I'm not the only person to do this, but whenever someone gives me their email address, I always check out the domain if it's not a standard email provider to see if there's a website there. Every time I've given my email address out in the last four years, I imagine that the person receiving it is going to check out my domain and discover my old, abandoned site sitting there unloved and pass some form of judgment.

And because of that, I decided that 2019 was going to be the year that I did something about it.

Planning

When I sat down to build out my new site, I came up with a feature list that I wanted to include:

When I originally built my site back in 2014, I had all of these same requirements, but couldn't find a platform that was full-featured enough to satisfy all of my requirements. I had checked out Jigsaw back then, but when I took another look at it recently, it had improved significantly and offered everything that I needed.

I've used TailwindCSS extensively in my day job, and I knew that I wanted to use it for my site this time around, instead of using a CSS framework that came with a collection of components.

I also wanted to collate a database of the shows that I have been involved with over the years. Whilst revisiting the Jigsaw documentation, I found their collections feature which seemed to fit the bill perfectly.

For deployment, I was never really satisfied with GitHub Pages and, despite having a load of droplets on Digital Ocean, went looking for another solution. Netlify was mentioned in the Jigsaw docs and looked like it would fit the bill perfectly. And as an added bonus, it supported automatic deployment from GitHub commits.

Development

Over the course of a few evenings, I built the templates in a fresh Laravel project. This wasn't required, but because it already had all the tools that I wanted to use installed, it was quick and easy to get everything hooked up. There ended up only being two templates to build - the main content page, and the shows gallery page - both of which used the same basic styling.

I next initialised a fresh Jigsaw project and spent some time playing with it to work out the best way to structure everything. It turned out to be extremely straightforward to get everything up and running, and creating a collection for the shows I wanted to display on the site took less than five minutes.

Once I'd done that, it was a simple process to move over the Blade templates that I'd prepared in the Laravel project and get everything working the way I wanted it to.

Deployment

Having never used Netlify, I followed the instructions in the Jigsaw docs for creating a netlify.toml file to instruct Netlify what to do when the site was deployed.

I signed up for an account, authorised my GitHub account, added the repository and within about five minutes to site was deployed to a Netlify server. It was even easier than I had imagined.

Once the deployment had happened, I added some entries to my DNS configuration at my domain registrar and within a couple of hours, the site was live.

Netlify offers free SSL certificates using Let's Encrypt. The process for generating a certificate and activating on a domain is completely automatic and needed no intervention at all. They also promise to renew the SSL certificate so that it never expires.

What's Next?

I got most of the things that I wanted to achieve out of the way pretty early, but there are still some things that I want to implement:

RSS Feed

Although RSS feeds probably aren't as popular as they once were, I still do a lot of reading via RSS. I want to add a feed here so that anyone who wants to can subscribe to it in their reader of choice.

Tags

I want to be able to tag my posts to allow easy filtering between music-related content and development related content. I've scoured the Jigsaw blog sample project and know how to implement this and it will be coming soon.

Better Show Listings

At the moment, there isn't any information about the shows that I've added. I've got metadata in the show items but haven't implemented anything for showing that metadata yet. I've also got to collate over 300 more show posters from shows that I've been involved in which is going to take a considerable amount of effort and time.

Pagination

At some point I will need to add pagination to a few pages. As there isn't much content here yet, I decided to leave out the pagination until it's really needed.

So Let's See How it Goes

All in all, the process of getting a new site up and running with Jigsaw has been much easier than I anticipated. And because of the ease of publishing and deployment, I'm confident that I can start to post relevant content on a regular basis. Hopefully, 2019 is going to be the year that I make this happen.