Hello World

Our website has been in need of a refresh for a long time, and it finally happened.

The Reasoning

The website was in dire need of a redesign for many reasons

• No automatic builds
• No use of modern frameworks and tools
• No use of a CDN
• Clunky and incredibly hard to modify

The Requirements

The redesign needed to solve all of the previous problems without creating an overcomplicated mess. Therefore, the new website came with a few key requirements

• Full github integration for automatic builds and deployment
• CDN for offsite asset storage and faster load times
• Modernized UI for ease of use
• Blog for tutorials, writeups, and more
• Theme Switching (Dark/Light)

Framework?

The question that plagues all web developers alike, “what framework am I going to use for this project?“. Well, I went through numerous before I ended up upon AstroJS, an “all-in-one” web framework. Truthfully, my reasoning for this choice was because I wanted to learn something new and it supported Vercel!

So far my experience with Astro has been nothing but positive, providing all of the power found in other frameworks like NextJS but with some of the annoying bits removed. Most notably, Astro has a feature called Integrations which allows developers to easily load in 3rd party packages to handle problems such as Image Optimization or Markdown rendering! This was critical as one the requirements for this website was a blog, which I had decided early on should be written using Markdown to allow any member to easily write a new post.

For styling the website itself, I went with Tailwind and one of its many component libraries Tailwind Elements. These allowed me to rapidly prototype and design the website while worrying less about creating complicated stylesheets and color palletes.

UI Redesign

As I mentioned before, one of my requirements for the new site was a “modernized” UI. Previously, our website was a collection of pages that limited its content quite heavily to limit the amount of vertical scrolling required. While I did want to keep this feature in certain areas such as the Teams page, I felt the Home page could use a bit of spice. To keep it simple, I more or less summed up the other pages while keeping the content length short, producing a home page that contains all relevant and important information such as an FAQ and our sponsors.

The Blog

Blogs are cool, theres not much else to say here. I implemented it using the default markdown support provided by Astro, and @astrojs/mdx to allow for JSX expressions and components to be used in Markdown content! In general, I just wanted a simple blog that members could easily add to while also allowing for plenty of customization.

Hosting and Content Delivery

Another problem we ran into with our previous website was slow and inefficient content delivery, a result of hosting our files directly alongside the website itself. To fix this, I took advantage of two services built for the job: Cloudflare and Vercel.

Cloudflare manages all of our websites traffic, optimizing the experience for every user who comes to learn about robotics! I have been using them for all of my personal projects without failure, and am always pleased with the speed and simplicity of setting up new domains and records.

Speaking of domains, since we are moving to our own, the question of hosting came up. Again, I have been using Vercel for years to host personal projects and decided it would be a perfect fit for this website. After a few DNS records and some time playing around with settings the new website became live at https://soonerrobotics.org :)