While I was out for a jog this morning, I had the idea that I would build myself a website and blog today. This was a rare thought: I'm usually thinking up ideas for my day job, what I am going to do with my weekend or what meal I was going to cook for myself that evening. But today, it was different. The last time I had the thought of building my own website or blog, I was only just starting out coding. Back then I'd constantly be exploring different technologies and platforms, making new websites and making flash games.

Roll on 10 years, and I've lucked my way through several social interactions that lead me towards building websites for other people, and businesses. I'd be bringing my knowledge, interest and expertise to actually develop the site, but rarely would I be sat in front of a blank box writing in to it for the written content that users would read. Usually that would be someone elses's job- for good reason. I'd usually take someone elses written words and copy and paste somewhere else. Even better, they copy and paste it in the box themselves.

I've enjoyed writing these last two paragraphs. It's actually quite weird, as each word is leaving my brain, flowing down my fingers in to this keyboard and appearing in the big white box infront of me I am noticing minute judgements and opinions arise as to the purpose of the content. Will anyone care? They might do, they might not; they probably won't. But the great thing is that this time around I don't care. I'm doing this, and if all that comes out of it is the last few hours of enjoyment then that's all that matters. But one thing I do know is it feels completely different to coding. When I'm developing a web app for example, I have a clear mental image of what it is i'm trying to end up with but at the moment I'm just rambling away allowing my thoughts to lead themselves to where they need to go, and the words on the page are keeping up.

Anyway, in the subject of this article I said I would tell you all how I did it, so here goes nothing.

What tools did I use to build my blog?

There is about a million ways someone could approach building a blog these days, and twice as many JavaScript frameworks to do that in.

React + Remix

I'm a big fan of React. But I could never use it without a framework, as I don't fancy discovering the wheel again. That's why I choose Remix (or React Router, as it prefers to be called these days). Remix is very quick for building websites and web applications. I might talk more in detail about this another time.

Tailwind CSS

I don't think it is reasonable to not use Tailwind CSS this days. It is just the G.O.A.T of rapid front end styles development. It's also pretty well supported, although there are some old versions of Safari that don't like some of the styling rules it generates. It makes a beautiful website UI everytime for me: whilst also using a fast, consistent, easily responsive class-based system. I used to get myself in a right pickle with other design systems, frequently feeling forced to use "!Important" throughout my styles to override things I didn't like. I haven't used a single "!Important" rule in a Tailwind project, as it does it all very, very well.

Vercel

If I'm being honest, there's a 1000 other hosts I could have used for this project. I used Vercel because it has a rapid onboarding flow, taking you from account creation to deployed application in about 2 minutes. You can pick from their template applications too which is where I picked the Remix starter template.

Hygraph

For my CMS, I'm using Hygraph. There's nothing worse than an overcomplicated CMS, and Hygraph is certainly not that. I like to keep things as simple as possible structurally, whilst retaining the flexibility to scale my content capabilities in different directions. On the Hygraph free plan I probably have more flexibility than I'll ever need for this site, and the drag and drop interface is quite joyous to us. I built my BlogArticle template in less than 5 minutes, and had an endpoint to query the API ready in 1 minute.

How do these tools come together?

Once your project is setup in Vercel and you have created a development brance on Git for your Remix template, all you need now is to get stuck into the code. This is how I approached the challenge of creating blog articles.

Create a /blogarticles route in your Remix application which will be a directory of your Hygraph blog articles. You'll fetch these using your Hygraph API endpoint and create a GraphQL query in the Hygraph API Playground to retrieve your articles. You can make this fetch request in your route loader, where you will intercept the data and render it in to your blog article cards.
Create a /blogarticles/$slug route. This will let you view individual blog article pages that each have a slug as per the route paramater. You can fetch an individual Hygraph article via the slug, using the route loader to fetch the data.
Now, you can style it up using Tailwind to make it look pretty.
Deploy! Time to publish your route branch, and your web app will be built and automatically push to Vercel.

Thanks for reading this, if anyone made it down here.

~ Ben

Articles

New Blog 📈