thealmostengineer.com Update to Bootstrap 5
Problem
My website had not been updated from a graphical or visual perspective for some time. It was still running Bootstrap 4, which was no longer supported. In addition, I wanted to rebrand the website an in effort to grow my online presence, build my personal brand, and to increase knowledge about STEM fields and education.
Solution
I updated by website to Bootstrap 5. While making this update, I refactored the content to focus more on STEM and tech content that I was working on. By doing this, it would help improve my personal brand with being a person that works and knows about being in STEM (Science, Technology, Engineering, and Math) field and career. With this refactoring, I updated the style of the website, reorganized the content, and added new features.
Bootstrap 5
Update the style of the website, required getting the latest Bootstrap 5 CSS and JS files and
installing them in the website template. Since I was also going to add some additional
functionality to the website, that meant also creating custom CSS and JS files to accomidate
those custom features. One of those features was styling the code blocks on the website. This
way the code will have the syntax highlighting, and will be easier to read.
Reorganizing Content
All of the content that was on the previous version of the website was kept. As I was making the necessary changes to the website, I was also creating new content. This new content, including this post, would remain in the development environment until all code changes had been made.
Moving the content around did take a moment to complete. In part because I had moved all content to the same folder, so it was not as easy to separate it. With content being moved around, resulted in many of the internal links on the website breaking. Thus having to update the links to their new locations. I did consider building a tool that would identify all of the broken links, but decided to defer doing this because it would increase the amount of time to complete the updates to the website.
I wanted the focus of the website, to be about working with tech. Web development and embedded systems such as the ESP32 and Raspberry. As a dad, I also wanted to include the experiences of what it is like living "dad life". There are not as many creators or websites about dad life as their are for mom life, so I felt there was a gap that needed to be closed and creating a section on my website will allow for that.
For some of the content organization, I consult with multiple AI tools. This was to get feedback of what it thought would be a best way to organize content. Also how to structure the website so that it can be used to improve my personal brand as someone that works in STEM and in tech.
New Features
Static websites do have some limitations, because they are static. Because of this, I have had to find other ways of implementing the features that I would like for my online community. This includes being able to sell products and an online forum just to name a couple.
Adding a mailing list was a new feature. Because it is a static website, the form to sign up is not included in the website. Therefore I have links on the website that will take users to the mailing list system, where they can then input their email address to subscribe. This is an extra step, but still allows the same task to be accomplished.
Conclusion
The plan with this update is to keep this website on Bootstrap 5 until the next major version of Boostrap is released. By doing this in this manner, it allows me to keep my web development skills and other tech skills up to date.
Technologies Used
- Mkdocs (static site generator)
- Bootstrap 5 (styling website)
- Github Actions (CI/CD and automated actions)
- AI (for troubleshooting code and content suggestions)
- VS Code (code editor)
- phpList (mailing list)