Just over a month ago we released this new version of CNCF.io. We had spent the previous 9 months rewriting the site from scratch to accomplish the following goals:
- Improve the speed of the site, both for browsing and editing content. Over the years the old site had become loaded down in layers of CSS, dozens of WordPress plugins, and suffered from an outdated and slow site builder in the back-end.
- Automate the administration of the site to make it easier to maintain and keep up-to-date. Various bits of content were duplicated or required specialized knowledge in order to update. For example, as CNCF projects graduated it was a labor-intensive job to update them in multiple places.
- Modernize the development process and codebase to facilitate ongoing improvements. The old site code was stored in a closed Pantheon git repo so couldn’t benefit from many modern development processes.
To accomplish these goals we made some changes for the new site:
- Wrote a new WordPress theme from scratch. To get the fastest possible site we wrote the theme from scratch and eliminated and consolidated plugins to reduce the size of the codebase.
- Used the new WordPress Gutenberg editor instead of the old site builder. The Gutenberg editor is lighter, faster, more intuitive, more expandable, and future-proof. We were able to borrow some of the blocks we’ve already developed for the LF Events site and developed several new custom blocks for CNCF.io.
- Made the site super-fast! To make the site load as fast as possible we used several plugins and methods for achieving the fastest possible load times without degrading the quality of the content or images. Read more about how site speed directly affects conversions and user retention.
- Improved the design. While it wasn’t within our scope to overhaul the design, we did make some significant changes to modernize the design patterns and promote consistency.
- Improved accessibility. We wrote the theme to comply with accessibility best practices and are pleased to receive a 97% in web.dev’s accessibility audit.
- Stored the code in GitHub. GitHub allowed us to opensource the code to give access to the larger community to use, contribute fixes and report issues. It also allows us to manage our tasks in a way that’s integrated with the codebase in addition to using the PR workflows, security checks etc.
- Automated the build process with CircleCI. Each time a checkin is made on GitHub it kicks off a CircleCI build process which updates a dev instance on Pantheon in addition to running code sniffs and visual regression tests. This modern infrastructure automatically catches a lot of issues and helps with team collaboration.
- Integrated Percy for visual regression testing. Most “bugs” on CNCF.io come from unintended and unnoticed consequences to front-end CSS changes. Percy is a visual regression testing platform which takes snapshots of the site and compares them to historical snapshots to flag any differences for review. This has become helpful in providing an extra layer of assurance before we push changes live.
We ran some speed tests comparing the old CNCF.io to the new site. Here are the results for the homepage from the front-end and from the admin edit screen:
Here are web.dev’s scores for our new site (the old site’s scores were 12, 67, 77, 71):
Finally, not only were we able to launch CNCF.io but, along the way, there was an urgent need for a new Linux Foundation project: Linux Foundation Public Health. We changed out some colors and abstracted out core pieces of the code so that we could quickly deploy LFPH.io. The code is also now ready to be adapted for other Linux Foundation sites that may be needed in the future.
If you have any comments or questions about the new CNCF.io, please do reach out or create an issue on GitHub.
Special thanks to my partner on this project, James Hunt, who wrote most of the theme and developed many key performance innovations.