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.
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.
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.
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.
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
- 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
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.
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.
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.