Hipster of web design?

In the days of 56k modems, sites were pretty basic, we used **** browsers, pages were poorly rendered, they took ages to load and all we had was HTML and CSS to drive them.

Just search “old amazon.com” for proof of how bad everything used to look. However it was probably for the best, sites didn’t need to be complicated, the internet was relatively new and we wanted them (sites) to be basic and fast to keep users engaged and stay on your site.

As technology got better, our machines being used to access those sites got faster and our internet connections got better. We started doing things like ordering items from a browser, adding things to baskets, logging in and accessing data. Obviously, this resulted in webpages becoming more complex, diverse, browser agnostic, gimmicky if you will with fancy backend information going on like ad sharing.

If you look at Chrome (as a browser), it used to be this great go-to browser for a lightweight use, and it was great but fast forward to now and its one of the worst system intensive browsers out there, and now people are using Chromium Edge or Brave browsers instead, we’ve gone full circle a bit.

As a result of the above, we therefore needed chunky databases on the backend for all this stored information and we needed support in place to look after these databases, such as the hardware itself and the people who provided that support such as database engineers.

It’s actually fine, users devices are so powerful and fast now that all of this clunky backend business isn’t really an issue, to the user at least - but to me as someone who is using this to write blogs, it matters - plus its relatively expensive, you can reduce your expenditure a lot by moving away from traditional WordPress type sites - which even a simple 1 page site needs a backend database to run, its crazy.

However, what if the site you have is a basic page - in that you don’t really need users to login, you’re not fussed about requirements for backend databases and having to support them - Does your company have an externally facing website selling a product you want to showcase, or are you simply just wanting a simple low standards blog.. like this/mine?

So.. in comes static sites… again (20 years later). If you had said to someone a few years ago, we would be going down this path again, it would have been laughed at - but its happening. Static sites are basically webpages that don’t have any moving parts. In a static site, you have HTML which contains the content/code of your page, and the CSS which tells your system how to render and style the page.

The cool thing about modern static sites are you can use all the modern tools we have available, at a fraction of the price we pay for solutions such as WordPress, and using these methods allow us to moderate and control our sites a lot easier - if you know what you’re doing of course.

If you’re someone who wants an easy route, using a WYSIWYG IDE then you could get by using WordPress still if you wanted, it’s around 10£ a year for a domain and maybe 40£ for somewhere to host the site and database, with some space for content storage like photos, its fine. However, I think static sites are really cool and you should definitely give them a look.

Why I am moving to a static site?

Well, first and foremost I’ll be honest - it’s because its free (whilst Azure Static Sites is in Preview).

Previously, I used google sites and blogger (for around 40 posts) which was kind of fine, however google sites is a WYSIWYG and is very basic, its designed for single page sites and its the only real solution if you want to use photos etc then you can easily paste screenshots in and google will host them for you, its pretty nice - it also has build in change tracking, so you can see what changes are being made and I think you can revert to previous iterations if you want which is also nice.

I just didn’t get on massively with it, I wasn’t feeling it. So then I took a look at blogger which is owned by Google, and whilst the platform is nicer to use for blogging (surprising right?) it’s still pretty basic, the page layout for me is awful (using a 2k screen) and it’s not as nice a WYSIWYG as google sites.

What blogger is nice for is the templates/layouts, the tagging of content and the date/time of content which is perfect for me, the theme I used was also really clean and functional, just the backend side of it was lacking and basic and not fit for what I was looking at in terms of a site.

So, onto static sites - ultimately the below is what I am aiming for.

• Own the data and code of the site, no fancy ad tracking.
• Obtain high 90%+ scores in browser performance indexing.
• Easily admin the site via an IDE such as Visual Studio Code.
• Ability to see content changes live and locally before committing.
• Utilize modern DevOps practices, such as CI/CD with Azure.
• Use code repositories to store and build via GitHub.
• Utilize modern storage technology such as Azure Storage.
• Create a blazingly fast website (80-100% faster) with externally hosted content.

How fast is, fast?

A few vital statistics, using https://developers.google.com/speed/pagespeed/insights/ to get a Lighthouse score rating which essentially grades your site based on multiple factors, they also offer ways to improve this score.

However, all I am concerned with below is showcasing how much faster static sites are than traditional websites, ‘cos that’s cool and people don’t really care why.

Lastly I think the score also helps dictate where your site will show up within search engines like google.com I.e. whether it shows up on Pg1 of results or Pg99, so its worth looking at this also.

What will be used?

I will use the following modern technologies to moderate this blog.

• GitHub to store site configuration. (Code Storage)
• Azure Storage to host my .png & jpg files. (Image Storage)
• Azure Workflow to build my website. (CD/CD Pipeline)
• Visual Studio Code will be used to edit the site. (IDE Tool)
• TinyPNG to reduce image size. (Image Size Reduction)

Lets see the flow of how all this works

So I will try to go through how I built up todays post as an example of the workflow for updating a static site below.

Firstly, I drop into Visual Studio Code and I run a couple commands:

• git init - Initializes my repo
• git pull - Pulls my repo
• hugo serve - Starts my localhost server

In the below a few things are going on.

On the left you can see VSC open displaying my website structure and pages.

On the right hand side, whenever I make a change in VSC, that will show in the right window (localhost).

It’s great because its functioning much like a WYSIWYG would do, but I have the ability to edit the code locally and view it locally before uploading, which means its quicker to see changes as there is no middleware slowing things down.

As I add images to my site, I upload to TinyPNG and feed it some of my screenshots, as I am using online storage I want to ensure I am reducing costs where possible, and this is a good way to do it.

You can use any offline or online tools to do this, but TinyPNG seemed the best I could find that was also free.

Once I have done the steps above, I can then upload the files into my Azure storage by dragging and dropping the files into the explorer. I right click the files and grab the URL. I then go into VSC and place that picture in my blog.

It’s important to pick the cheapest option in Azure if you’re going to-do this, if its just a blog like mine then I don’t really care too much for whether I’m using LRS or GRS, it makes no difference to me.

However, you probably would care if it was a company site for example, worth looking into. One other thing is to look into how users interact with the data itself, meaning that with the storage you pay for the hosting in that the traffic to and from the site and providing that to the user, so factor those (minimal) costs in also.

Inside VSC, I then commit all the changes and push them, this is to ensure I am committing the correct changes and pushing them to my repo. Once I do this, if I switch over to my Azure account, I can see the job running through and completing.

You can use VSC to perform all these steps, I like using the GUI as I can see a list of exactly what’s changed in my code, and exactly what changes I am committing before I push that code to GitHub, from where it will kick off a build of my site into Azure - so its at this stage I need to look at changes closely and VSC is great for this.

You could also use something like GitHub desktop also to see these changes if you didn’t want to use VSC.

Once the codes been committed, in GitHub I can see an action has fired off and the site will be build and hosted in Azure (for free).

The CI/CD process will go through a similar process to what my site did when I used localhost to preview the changes, it essentially built the site, so any issues would’ve been raised at that stage, which means when I push to GitHub, theoretically I shouldn’t have any errors.

Once the process has finished, it’s at this stage, I can then go-to the website itself and see all my changes are now live.

Static site caveats

The only real caveat with Azure static sites (preview) at the moment, is you can’t use root domains, it has to be a subdomain.

I.e. subdomainname.domainname.x - however, this guide shows you how to work around this issue by using Cloudflare (also free).

https://burkeholland.github.io/posts/static-app-root-domain/

We also don’t know what the final cost of the site will be, how storage is factored in as we don’t have visibility of that at the moment which is why I am using a separate storage account in Azure until we do.

Summary

I would say, the learning curve on the above is a bit of a steep one but give it a couple weeks of playing around with the setup, getting it right for you, choosing an IDE, template, a builder such as Hugo which is what I use and some basic knowledge of GitHub and its easy enough to pickup, and a lot cheaper also to run (technically free) - You just need to throw yourself into it, play about and make mistakes if you need to, its the only way you’ll learn.

Anyway, like a famous art attack host used to say, try it yourself! :)

Coffee?

If the above was interesting and it helped, please consider buying me a coffee @ https://ko-fi.com/L4L542GI9