Today I've launched version 4.0 of my website, this is the 4th rebuild but 3rd redesign since the initial version. I've wanted to rebuild and redesign my website for a while but was stuck deciding on what technology stack to use and also exactly what content I wanted to include. I knew I wanted to update the design, as the old layout looked dated with an inconsistent design. Another feature I wanted to include was a blog, where I could post regular articles about Web Development, Cybersecurity, and technology in general. I've found these types of small blogs to be very helpful with answers to issues and tutorials on some of the more niche topics of web development. As this is the first post, I decided to document how I approached rebuilding the website as well as the reasoning behind some of the key decisions I made when choosing a specific stack and design.
I started by researching the different options available for hosting a blog. There were several questions I had to answer such as what technology stack to choose, whether it should be a static site or dynamic, what frameworks to use etc. Also, I started to examine modern design trends in 2020, as well as looking for design inspiration on websites such as Dribbble and Behance. I also looked at other web developer blogs to see what designs they used, as well as the functionality offered. Throughout this phase, I wanted to identify and list the positives and negatives of each option and compare and contrast each of them. I used a notes app to keep track of everything I needed to cover by the end of the process, including any new ideas of features or functionality that needed to be fixed later on in the process.
After the initial information reconnaissance stage, I moved onto implementation. I decided a static site would be suitable for my particular needs, for one I didn't plan on updating the content too often and had no plans on implementing any major dynamic functionality.
I chose Gatsby as the platform to build my website for a number of reasons. For one, it is really popular in the web development community at the moment and I've wanted to try it out for myself. Initially, I built a basic and minimal version of a Gatsby blog to test the abilities of Gatsby and identify and limitations I might face. I looked at the existing community around it and the wide selection of plugins offered to extend the functionality with minimal effort. In the end, the speed, simplicity, and power of Gatsby won me over and I decided to use it for building the next version of the site.
Gatsby offered several benefits which made choosing it easy
- Built with React - I wanted to get more exposure using React and this was the perfect opportunity. It offers a level of modularity during development, while also being simple to work with and maintain.
- GraphQL support - this is another technology I've wanted to invest some time learning and using. Although it wouldn't offer any major speed increases to performance due to queries being run at build time, it would offer faster builds and was simple to implement.
- Speed optimisation - Gatsby is a really fast and performant platform, it allowed me to generate fast and powerful sites, despite providing robust tools.
- Plugins - Gatsby has an amazing library of plugins to expand and enhance functionality without the need to build everything from scratch.
I kept the site structure simple, with just two main pages (homepage and blog) as well as a list of articles from the blog. I built the site from start to finish with a few considerations in mind such as Accessibility best practices and SEO optimisations.
There was also key functionality that I wanted to include in the first implementation of the site, this included offline PWA support, an RSS feed and automatic sitemap generation. Luckily, Gatsby and its library of plugins made this much easier to implement.
Once all the basics of the site functionality had been finalised, I moved onto the design phase.
UI and UX design were other areas I wanted to focus on, I've always loved using well-designed websites, and wanted to implement a similar feel on my website. I also wanted this site to be as fast as possible while also being fully custom from a design perspective. The design was created using 100% custom CSS, it relied on no external CSS frameworks or libraries. While I'm not a UI/UX expert, I utilised information I found online to help improve the overall experience.
I took inspiration from the research stages and tried to design something that looked modern and clean by 2020 standards. Additionally, I wanted to include a Dark Mode design, as well as the ability for a user to manually override the default theme. One design trend I'd noticed more of lately is the use of rounded corners on web page elements such as images and buttons. I liked this trend and included it throughout the site on different elements, using consistent styling such as border-radius throughout the design.
I utilised space as well as light colours to give each webpage a feeling of spaciousness, putting the focus on the content while also keeping everything easy to navigate. It was important that the design language stayed consistent throughout the site, this meant using a set palette of colours, consistent padding, and border-radius as well as custom button and component design. I also chose to use vanilla CSS as opposed to a pre-processor as I feel modern CSS offers most of the core functionality of preprocessors such as SCSS or Less at the moment.
Creating a deployment pipeline was the final important step in the process, I chose to use Netlify for hosting as well as GitHub for versioning of the project. I wanted to automate as much of the process as possible, the benefit of using GitHub meant I could take advantage of GitHub Actions to run an automated process which would trigger a few tasks once the local git project had been pushed to GitHub.
As the project needed to be uploaded to GitHub first I couldn't test the script but the plan is to run the following automation once finalised.
- Once the code and been committed to the local git repository it is then pushed to GitHub.
- GitHub actions handle the next step of the process, which includes testing the build to ensure it builds correctly without any errors as well as running the application.
- Once these steps have passed all images in the project repo are optimised.
- The project is then deployed to Netlify where it will go through Netlify's build tests and deployed once everything builds without errors.
Once the project has been finalised the above build script will be the core component of the continuous deployment process.
I set a deadline to get version 1.0 complete by September 1st, this meant focusing on the core functionality of the website. Using a notes app, I kept an organized checklist of what needed to be complete by version 1.0, as well as a list of some of the future enhancements to add once the initial iteration had been deployed. The following are features I intend to introduce in the coming weeks/months.
- Dark mode design with a button to override the default operating system theme.
- Add comments to blog posts, using an external database to store them.
- More interactivity such as page animations as well as a back button to give it the site a more modern web app experience.
- Blog post search - once the number of posts increases search functionality will be added to make finding specific posts easier.
Each of these features will be added based on the level of importance, but can and probably will change as new ideas pop up.
It was a long but creative process going from a concept I started with to the final build. Although some of the ideas and design I initially set out with changed throughout the process, the main concepts and design were achieved by the end. I plan to update the blog with content I find interesting or think could help others solve some of the more specific problems I've encountered. I'll also spend the next few weeks focusing on optimising performance and fixing any bugs that I find. I hope you enjoy the content.