When we were first told we would need a landing page for this Grow Together conference, I thought using WordPress would be unnecessary. It didn’t exactly conform to our site’s brand identity, so I didn’t want to lock us into a project where we’d have to break existing standards or add a lot of tooling for a single page, so I recommended we build a static site and deploy it as a Github Page!
Phase 1: ParcelJS
We first reached for ParcelJS & Bootstrap, and that worked fine for a while. We had a decent number of sections and the design was simple enough to build with SCSS. Then, we got more content and the site got a little..unwieldy.
Then we got more content (especially in the form of Accordions) and it got out of hand quick.
I don’t like scrolling through files that are longer than 200 lines of code (I don’t know where that comes from), and I foresaw that we might need to build a few extra pages. Plus, as content changed within the accordions, it became very difficult to quickly find the minor copy tweaks amidst all the markup. I immediately began wishing we had reached for a different tool (namely, Astro). So when I had a free moment, I rebuilt the site.
Phase 2: Rebuild in Astro
JSX is a new templating language for us at Kingdom One, and because it’s very common in the broader web development world, I thought Astro would be the perfect way to allow me (and other devs) to make use of JSX without forcing more inexperienced devs to use it (as an Astro component could just be an html file). Ever since I first learned about html (back in 2004), I hated that you had to copy and paste code from one file to another to create a page (namely, the bits that always stay the same like the
<head>, header sections and footer sections of a site). Astro solves that problem simply without the need for a full-fledged CMS like WordPress.
Key Wins / Learning Points
Simple Photo Conversion
The simple conversion of images to webp was a huge win, as my design team could just drop images the site needed and I could handle converting them to webp without needing to use an online compression/conversion tool.
Easily extendable from a single landing page to multiple pages
We ended up needing to build a
/schedule page, and (as of time of writing this), have an eye on needing build a
/resources page as the conference has wrapped up. Astro’s Layouts make it easy to do that excellently and rapidly.
Web Components are Cool
Loading videos (iframes) can be quite expensive, so I reached for the npm package
lite-youtube. Because of handling things in modals as well, I needed to use the Youtube iFrame API, I ended up writing my own little web component! Astro makes it pretty easy to do for simple, reusable components, so that was a fantastic experience (both as a learner and as a developer).
Github Actions for CI/CD
Figuring out Github actions for continuous integration and continuous delivery/deployment (CI/CD) was the first time I’d ever run into a
yaml file. This was probably the most annoying bit of setup for the whole project, but it immediately paid dividends for prototyping a future project with the Choctaw Nation. This also allowed me to not ship the generated /dist folder, making PR Reviews and Merges more simple and allowing for site revisions to happen as fast as I could change them (as opposed to a more traditional FTP type approach). Overall, the benefits were worth the pain of learning something new, and it’s something I can improve upon and use again.