How I built this blog - part 1

The Tech

React-Static

I read about react-static, watched Tanner Linsey's video presentation on youtube and was hooked. I have used docusaurus in the past to put content together for documentation purposes but like most of the react web apps I build, I tend to wonder whether I need such a large bundle size for what at the end of the day is static content, then there is SEO, in site search, analytics ... you know where this is going - there is a lot to juggle.

I know there are other frameworks out there that can do the same but being a web developer who mainly uses react coupled with the fact that it can be used to replace create react app; react-static appealed to me.

It's faaaast - I feel this is what I have been missing for a while. I build large technical apps that provide users with all sorts of analytics and I would be lucky if it all bundles to below 1MB. Now I can have a page that's kB and loads in 5ms, yes more stuff is loaded after that but 5ms and the user sees something - that's imperceptible!

Once the main page is loaded based on the links on your page it will load the next content that the user will look at. If the demo is true, after 350 ms a website will have a user consuming your content and have the next page ready for them to load. That's amazing!

I love what the creators have done, they have put SEO and speed first and made it easier for anyone to do this on the web.

MDX

Like docusaurus I wanted to write the content in MDX - for those of you who don't what that is then it's markdown but you also get to use react components. Markdown offers you a lot of basics but then try and highlight something ... problem. MDX solves that problem for you by allowing you to use JSX elements with inline styles.

MDX is great because you can write content quickly - not get bogged down in how your headings will look and let UI/web developers worry about that for you. Want to do something special; get your web developer to create it for you and then tell you how to insert it into your markdown file.

CMS

A content management system (CMS) allows you to host your content separate from your web app. This is great as it means your web app can be all about styling, look and feel. And your content can be brought in separately and then templated in.

In my mind anything that separates concerns is good and this is what a CMS does. It allows content to be done separately to your web app.

Tailwind CSS

This is what will make the website look good. I want my website to be me but I am not good and drawing, picking colors, etc. When you go to a website you can quite quickly work out what component framework was used to build the website, like material or bootstrap. I want me, but I cannot design.

Tailwind is a utility css framework - That means it allows you to abstract common css functionality at the same time leaving it up to you how to compose what you want your HTML elements to look like.

I am a big fan of this project and bought the creator's book refactoring ui. This book helped me on a ton of projects where the client refused to pay for a designer. Maybe the subject of another blog post. I just need someone to allow me to use tailwind on a project ... well my blog will have to do.

Putting it all together

Great now we have a place to write content, a web app, and something to make it look personal how do I put it all together?

Connecting the dots

A react-static app, when it is built, can pull your content from a CMS (their demo app does it) and then builds all the static pages. So the idea is that on each build or content push all you have to do is build your app and host the output. Easy right!

This is where something like Netlify comes in (and yeh I know you could do it all in GitHub but you know web development is all about fads). Netlify brings four things together for me -

1. It will manage hosting using AWS (cloud front edge). Edge is AWS specially placed servers that means content will be served as fast as possible. Edge will cache your files anywhere they need to be to provide the speediest content delivery on the web.
2. Domain and certificate management are taken care of. We want anyone to be able to access our site and not get blocked by their browsers.
3. Updates to the main branch (on GitHub) will trigger a build - which means I can edit the look and feel and know that will get deployed without having to even click a button.
4. Webhooks means that with the right CMS I can trigger builds on new content publishes. Again no button click.

Boom static site generated. Delivered to your browser the fastest way possible both in terms of size and network speed.

Cost

It should not cost much. I will need time in the evenings to write content, build the blog and think of projects to do blogs about.

Not much - How is that?

• Netlify provides a free tier.
• Contentful CMS has a free tier - with 2 million pulls a month - I cannot write that many blogs a month (remember with react-static it's a pull per build).
• Github is free for code repos.
• For splash pictures, I found Unsplash which is free as long as I credit the author. This blog is not about making money so I have no qualms.
• So all that is left is a web domain - ~£10 a year

So let's get cracking ...