Back to articles

The Battle of Building My Website

If you ask any developer, designer, product manager or anyone else who works in the field of technology, you’ll find out that they probably had a tough time deciding on what their website was going to look like, the content that was on it, etc. and my website was no exception. This website has been through more iterations than I’ve done coursework (and I’ve done a lot of coursework…).

I’ve always tried my hardest to build products and projects that I’m proud of that serve a clear purpose, and most importantly is performance-optimised. I have always tried to build my own portfolios/websites and I hate using pre-made themes because of the overall lack of control since there will always be underlying code that I haven’t created. The whole of my website, as it stands now, is entirely my own, as is all the work available on it. The only exception some may say is my blog which runs off WordPress, but even this is on a custom theme that I built which matches the rest of my site and keeps the staggering 90+ Lighthouse speed rating.

Lighthouse page speed record for my blog post showing all 95+ ratings showing optimisation in place.
The Lighthouse (Page Speed) rating of this page!

This post will go over the technology stack I’ve elected to use for my current version of my website (as of the 29th September 2020), how I’ve set it up and the steps I went through to build it.

/articles/

The articles section of my website is powered by WordPress as it is the only blogging platform I’ve ever really had experience with and I know how to customise it exactly how I want it. I’ve heard lots of things about WordPress, being good for Search Engine Optimisation (SEO) but also having severe issues with performance because of “WordPress bloat” which I’ve completely avoided by using a completely custom theme, removing any unnecessary functions, plugins or third-party extensions.

My Theme

Inside of my WordPress header file, I import the same links and stylesheets as the rest of my site, just including the code snippet to include WordPress’ pre-defined code that must be included to use plugins, etc.

I wanted to keep my website matching on every single page to ensure continuity between pages, so being able to just link my stylesheets made keeping my brand identity consistent possible.

Internal theme code for WordPress declaring browser icons, fonts and style sheets.
Snippet of my header.php file for my WordPress theme

All I had to specifically write for WordPress was the styling for the articles home page, call the loop variable to show all my posts and tweak the individual article page to fit the style I wanted. I’m not using any fancy plugins to add flying geese to direct your attention to adverts or anything, just what optimises and displays the content I want to promote.

My Plugin Stack

  • Autoptimise for HTML, CSS and JavaScript bundling and minification just to add to my already high Lighthouse performance score
  • Yoast SEO for a simple way to write out keywords, descriptions and adjust titles per article (I would do this manually in my header.php but Yoast was a quicker option and provides consistent results)
  • Smush to optimise images I include in my posts
  • Google Analytics to find out how long people read my articles for so I can better optimise for the audience my website has

Every other part of my website

Everything aside from /articles/ is written by hand, in pure HTML, CSS with a sprinkle of JavaScript to manage user interaction (mainly my navigation menu for mobile and the cookie popup).

I much prefer the feel of actually diving into the code, precisely writing each intricate line to ensure all content is included for a reason and maintains my branding guidelines and website performance.

Website Folder Structure

My website follows the following folder structure. I’ve found that having the trailing slash on the end of links looks nicer in address bars and sometimes ranks better inside of Search Engines and makes navigating repositories of code a bit easier.

Inside each folder is an index.html file along with any other assets on that page. The biggest folder is /projects/, where all my present and past projects reside and live in my portfolio. Each project has its own folder inside of /projects/ where the website file lives along with any assets such as images to add detail to the project.

The easiest way to increase your websites performance is to make it statically generated, not reaching to any databases, caching any frequently used assets like fonts and stylesheets. As the core of my site is written in standard HTML, my website is already static and as I’m proficient in semantic HTML code, it’s easy to edit too.

Hosting

For the first edition of my 2020 website, I was hosting on Netlify – which was completely free and was fairly well optimised too as it is “the fastest way to build the fastest sites” using content distribution networks (CDNs) and runs off the latest hardware. This worked well, but once I got round to adding forms for contacting me and submitting hire requests, Netlify no longer worked for me as they do not allow backend processing through PHP.

I was contemplating using a service such as Formspree to take in the form inputs, but it didn’t provide the option of delivering custom emails to my customers to let them know I received their email.

From the start of my website “journey”, all the way back on a previous domain, I hosted using Smart Hosting, later acquired and renamed to Krystal Hosting, which provided a completely unlimited web server with emails, databases, everything you could want – for an extremely low price of £2.50 a month (at the time).

I returned back to Krystal for my 2020 website. Although there is no longer unlimited storage and high performance is only available for the second and third-tier plans, for what I’m using, Krystal is perfect and I endorse them heavily and promote them to any customers I have who do not already have a hosting provider.

Unlimited cloud hosting packed full of great features - Krystal Hosting website features
Krystal Hosting Cloud Hosting Features

Roundup

So that’s about it, my technology stack is fairly simple – but by design. The 2020 design trend seems to be really flashy with spinning shapes and everything like that, but personally, I prefer minimalistic websites with the content you need, with a clear brand identity and pages that load quickly, and I think I’ve got that with my website.

I’d be happy to hear any feedback and answer any questions you may have about my website – get in contact with me through my contact page.

This post contains affiliate links to Krystal Hosting where I earn a commission on referrals.


Thank you for reading my blog post, if you have any feedback or questions, please email me and I'd love to have a conversation with you! This article was written on September 28, 2020.

,

Get in touch!

Are you interested in working on your digital appearance or have general questions? I'm available to contact via a number of platforms. For business enquiries, contact me on LinkedIn or via email, or if you want to contact me for a non-business related matter, direct message me on Instagram!

Contact MeLinkedInInstagram
Hey, this website uses cookies!OK