TulsaSigmaNu.com Redesign

28 May, 2025

My fraternity chapter has had an alumni-facing website up for years, but it was using a service designed specifically for non-profit websites with an outdated template and needed an overhaul. As the current IT Coordinator, I wanted to spruce things up and contribute my knowledge/professional experience as a web developer, so I re-did the website and wanted to share a bit on how I went about it!

The original look of TulsaSigmaNu.com, captured by Archive.org on June 16th 2024.

The updated look of the TulsaSigmaNu.com website, at the time of writing this post.

The Stack

The original site was made and hosted using Celect - a company that seems to specialize in sites for academic organizations, fraternal organizations, and non-profit businesses. What is shocking to me is the price tag: a website like the above could range anywhere from $500 USD to $1000 USD.¹ Not only did this site need a refresh, but those prices are also crazy high!

The new site uses Eleventy (11ty) - my favorite static site generator for years. While I'm not the biggest fan of Node.js as a tooling system, 11ty has proven to be one of the best out there. The maintainers provide excellent support and are always working to improve, there's a ton of flexibility, loads of documentation out there, and a great community backing it up. I did not use a starter template for this site, instead opting to start from a blank slate using their Get Started tutorial and my previous 11ty project configurations for reference.

Hosting is done on Netlify - letting us use a custom domain for free with very little influx traffic. Since this site mostly stands as a historical/contact reference, traffic is always slow enough that a paid plan isn't justified at the moment.

Design Choices

I wanted to keep the site as minimalist as possible for a while, both in terms of code and design. I started by copying over all the content on the site that was primarily text-based, such as the About page. As I added these pages, I made an initial header with navigation as seen in the photo, without any flashy design. On a mobile view, the header drops to a single column and content is still easily readable.

At the core, I want this current site to build up with functionality rather than be an experiment in design techniques. Modern design has never really been my strong suit either way, so I'm proud of getting this going as it stands now.

In the time honored tradition of 11ty sites having fantastic Lighthouse scores, I will note that the site currently scores almost all 100s across the board - only losing 4 points at "Best Practices" for an improperly sized image that I plan to replace!

Lighthouse Score taken on 17May2025 on the index page

Pitfalls

There were a few various features I had to implement that managed to trip me up a little bit, and I think I found some quite interesting solutions using the powerful flexibility of 11ty.

Lost Brothers

The original site had a page called "Lost Brothers" - a listing of all former members whose contact information has been lost over the years. This is a great resource from time to time, being able to quickly be shared amongst our alumni and regain these connections through them, so I didn't want to immediately scrap this page!

One of my biggest concerns is handling this site with little maintenance: how can I make a site that will last beyond my time working on it, and still be easily accessible to use by future members?

Prior to this project, we had recently created a Google Sheet file containing as much alumni information as we could find - and I knew this new "Lost Brothers" section would use this same dataset. I looked into eleventy-fetch - a plugin I knew existed but didn't know much about. This is a fantastic addition! fetch takes a remote URL to a file (JSON, CSV, etc.), and you can use Javascript to manipulate that dataset and use throughout 11ty (including in pages)!

So, the "Lost Brothers" page is created using fetch which grabs our CSV of alumni information, and provides it as a data set for use in pages. Then, I wrote a "filter" in the 11ty configuration that checks for an email or physical address with each listing, and removes it if present, to create the table used on the page! This is done each time the site is built, so no client-side calls are needed - keeping the data secure.

There's a few improvements needed to this system, primarily a system for automated builds to re-update that cached data. But for now, I am able to update it regularly enough that it is okay.

Photo Gallery

The other higher-level feature from the original site that I needed to clone was the photo gallery. The main concerns were:

• How do I download all ~500 photos from the original site, with no easy export tools available?
• How do I automate the photo gallery in 11ty, so that I wouldn't be manually sorting and creating gallery pages for this many images?

To start, I created a quick userscript for an extension like GreaseMonkey that would look for a "next" button on each photo, download the photo, then press next. This took a few iterations - as I didn't realize there were 2 galleries with image captions that needed to be saved! Unfortunately, I lost that script when I recently switched browsers, but it was fairly simple to setup and very specific for this use.

Then, the question became how to automate the creation of galleries. This was also fairly straightforward, luckily there are a lot of shared blog posts about doing similar things! The gallery is two templates - one for the list of albums, one for each album itself - and a Javascript file in the _data folder that looks for all files in each folder and provides a listing of albums with file names inside.

At the moment, this is a fairly gerry-rigged system that needs some work. Photo captions don't exist yet (file names are simply displayed under photos) and album names are just the names of the folder itself. I also want to try and find a way to include who provided the images, but I'm not sure what the best way to do that is yet. I've considered including a JSON file in each album containing the album name, photo captions, and sources, but not sure if that is the best route to go yet.

Future

The site is in a very stable state for the moment, but I definitely will continue to work on and improve the site. At first, I plan to improve the overall design and add a Dark Mode option for easier reading². Following that, I want to improve the data functionality described above, both for the photo gallery and alumni table!

From there, I'm not sure what I'll do next! I plan to look at other fraternity chapter websites and see what kinds of content and pages they have, and build from there. I will also probably attempt to automate even more sections - automated calendars would be nice and remote image additions would be awesome!

Having abandoned my personal 11ty site for the time being in exchange for a focus on writing and projects, it is still nice to have an opportunity to just build a site without worrying about putting content out there. It is also really nice to not have pressure on this project and work on it at my own pace! I'm excited to keep working and expanding this a bit more, and hopefully I can eventually write some cool and unique posts about 11ty myself.

I'd love any feedback other web enthusiasts might have regarding design or functionality. I've always been good at development, but design and UX has never been my strongest suit, so I'd love suggestions on how to improve!

That's all for this lengthy(er than normal) blost about web development! 73, de WW0CJ

#'11ty'