Hello and welcome to my blog!

I have been thinking about the best place to talk about the things I am learning and building for ages now. To truly learn something there is no better way than to try and teach it.

I built out this website myself from scratch and in my this first ever blog post I will go over some of the decisions I made on the way and anything interesting I learnt as I went.

Hopefully, a couple of times a month I will post something new and perhaps add in more features to the blog itself - comments, for example. There is currently a collections tab that doesn't really do anything as this is the only post so far. Perhaps when I have a sufficient number of posts I can groups some of them together by topic in the "collections".

Inspiration & Styling

I came across a news website that I really liked the design of.

https://review.firstround.com/

It is also blazingly fast which was very inspiring. I basically just copied a lot of the aesthetic of the site itself. I like the minimal, clean look of it a lot. And I was interested to see if I could "reverse-engineer" the style. I think I got fairly close. As I build the blog out more I will incoroprate some of my own style and it will probably diverge a little style-wise.

I had been learning Tailwind around this time so it made total sense to see if I could use it to style the whole site. It is amazing how quickly you can bootstrap a site and have it looking great using Tailwind. I also found that having a good grasp of CSS makes using Tailwind quite intuitive once you get used to it.

React & Next 13

This project uses Next.js 13 and the new App router. When Next 13 came out there was a lot of fanfare and I was really curious to see what it was all about. Building out a blog using Next is a bit overkill but I thought that it would be a good excuse to see what it was all about.

The routing in Next makes a lot of sense to me and helps to organise the structure of your project naturally as the directories in the app directory will correspond to the different pages you want to route to in your app.

The fact that Next were really pushing SSR and Server Components made it all the more intriguing. I have only really ever used React on the client until now so the chance to further develop my understanding of SSR was a big factor in choosing to use Next.

Content & GraphQL

I also wanted to use GraphQL to fetch my blog posts as I use it a lot at work and I quite like it. Although certainly overkill for a simple blogsite, it isn't complicated to use at all and allows you to select exactly what data you want to fetch.

I decided early on as well that I wanted to use a CMS so that I would have somewhere to organise, edit and publish my posts. Using a CMS also gave me a lot more built in styling options for the posts themselves which is obviously great.

It means I can add things like this.

or this

or this

very easily. As well as photos or tables or whatever else.

There were a few options I considered but in the end I decided to use Hygraph as it incorporates GraphQL very nicely and the UI is great.

Deployment

Again, there were a few options I considered. I had used Netlify before and still use it for a couple of projects. Given that this was a Next project though and, I think, Next is run out of Vercel it made sense to me to give Vercel a try.

Vercel is incredibly simple and easy to use and I was able to set up the DNS and add my own domain in minutes.

Discoveries

I learnt quite a lot in the proccess of building out the blog and hopefully as I keep working on it I will keep learning.

Fetching the data server side directly in the component was interesting and it seems React is moving very intently towards SSR and pushing server components a lot so perhaps this is something we will see more and more. It did take me a little while to work out one or two things - particularly how to pass the data around between components whilst still on the server.

dangerouslySetInnerHTML

I also learnt how I could pass data into my JSX using dangerouslySetInnerHTML which was new to me. Very useful.

 <section
        className="col-span-3 border-l-2 border-customBlue border-opacity-25 mt-6 p-2"
        dangerouslySetInnerHTML={{ __html: html }}
      >
</section>

Of course I was sure to sanitise the HTML before inserting into the section so as to avoid XSS etc. The above snippet is not from my code.

revalidatePath()

I hadn't realised that Next uses something called ISR (Incremental Static Rengeration) allowing the site to be very quick after it has been loaded. Part of this means caching a lot of the generated HTML.

This was causing me problems as when I was updating the content of my blog in Hygraph and hitting 'Publish' the old content was still cached and I had to tell Next that I wanted to refetch the data.

This is where revalidatePath() came in. Calling revalidatePath and passing in the path you wanted refetching - in my case /articles - meant that when I updated content in Hygraph it was being fetched fresh and so updating with the new content.

Webhook

Hygraph also provides you with webhooks so I was able to write a simple revalidate script in my Next API that would fire the webhook every time I published an update to a blog post. Meaning that I don't need to redploy my code every single time I write or update a blogpost. If the webhook worked then this paragraph should appear on the live blog. 😉

// TODO (bugs and features)

F̶i̶x̶ ̶l̶o̶g̶o̶ ̶b̶u̶g̶
Add/enable comments and likes
Optimise performance
M̶a̶k̶e̶ ̶m̶o̶b̶i̶l̶e̶ ̶r̶e̶s̶p̶o̶n̶s̶i̶v̶e̶
Improve accessibility

I still have a long list of things I want to improve on the site. It would be great to have somewhere for people to leave comments on each blog post. I like the way that Medium has a sidebar that comes out of the right to display the comments, so maybe I will look at something like that.

The MF logo bug doesn't toggle correctly with the theme. This looks very janky and is top of my list to fix.

I also want to work my through the Lighthouse issues and try to make the page as quick as possible - implementing lazyLoading and after the fold loading to optimise as much as possible the performance.

And at the minute the site is just not readable on mobile which needs correcting and could be an easy win if I can spend a couple of hours going through that.

In its current form it is very poor from an accessibility perspective as well which again I need to spend a few hours bringing up to code.

Final thoughts

That was a very high level overview of what it took to get this site up and running. I plan to keep working on it whenever I get chance so hopefully it will improve bit by bit.

I am always learning new things and I hope that some of these things can be the inspiration for some blog posts going forwards. The idea being that teaching others about what you have learnt is the best way to truly internalise what you have learnt.

When I first started working as a developer I - like a lot of people - wanted things to be perfect and work perfectly from the start.

One of the biggest lessons I have learnt is to work iteratively. To get something out of the door and up on its feet first. Then you can take stock, make a plan to make it better and improve little-by-little until you arrive at "perfect".

Thanks for reading!