In 2019 I joined the Highschool Robotics team "The Thunder Down Under" (Team 3132) where, as part of their outreach program I decided that I was going to remake their website.
The old website was last edited in late 2016 and, as a result, was extremely out of date and somewhat antiquated. The other downside of the old site was that it was made using the Weebly website generation service. As some people reading this may know these different site generation services are terribly convoluted when it comes to the amount and what resources they load as part of rendering the site (also including all the different components). As a result, the loading times for these sites aren't fantastic. Some of the old content was useful but the majority that was on that site did have to be rewritten.
The first step of the process occurred in conjunction with one of the team's mentors who as a sensible step, suggested looking at what other teams had done. I did this by taking notes on the navigation menus of each site, each of them noted as indents within a bulleted list. From this list, I was able to gather what people wanted to know based on what other teams had done with their own sites. People wanted to know only a few things, ordered by importance:
Cool Robots
What we do/Who we are
Outreach
Sponsors
For design, I decided to use an existing style framework so I didn't have to design and style from scratch. There were only a limited number of frameworks that I might've considered.
Bulma
Bootstrap
Semantic UI
For the first major version, I used Semantic UI (mostly because it came with predefined React components). But, the first version wasn't great. It didn't scale well on mobile, it had weird visual errors that I just couldn't solve. Therefore, I decided to redo the site yet again but this time with Bulma which worked better on mobile and looked really nice, as well as having SASS colour variable support meaning that I could change the colours based on our team's colours.
The first version of the new site used ReactJS by itself with each page created individually and having its own unique code. This made it difficult for people unfamiliar with programming to add new content to the site. This problem prompted me to switch to using GatsbyJS instead for the second version with Bulma. Gatsby has an extensive library of plugins and useful starters of which to base our final site.
Handily it also comes with integration for an image processing library called Sharp which is able to scale images and provide SVG placeholders whilst they load a suitably sized image for the resolution that the user is using. This made the site notably faster when loading the large (entire-team) image.
Addressing the problem that I discovered in the intro to the functionality section, normal users are unable to code and, therefore can't create new pages. My solution to this is one of Gatsby's primary selling points. It's GraphQL processing during build time. Using markdown pages in Gatsby I'm able to use a template that uses the same format for nearly every repeated page on the site. The user can simply create a new markdown file and use a cheat sheet to create new content which will then be processed into HTML and added to the site without needing to change any other files or even code.
Using the gatsby-plugin-react-helmet plugin I was easily able to change the SEO data per-page meaning that each blog post has a different description, title and image (in some cases). This may not sound like much but it also gives me the opportunity to use Google's Rich Results format so that the search appears in more detail and grabs the user's attention more than a traditional search result.
Final Word
I learned many things over the course of making the site from design to some new Javascript functionality I didn't know about.