The making of DSMUN 2019’s website

My school, like many others, organises an annual “Model UN”. Each year, we build a website that houses the names of the committees, background guides, schedules etc. I’ve been working on the MUN’s site for three years now, but only in minor capacity for the past two years. This year, I “took the reins”, so to speak.

I decided that we’ll start from scratch, rather than reuse last year’s design and code. Last year, we had used Jekyll, but I decided to go with eleventy this year. Eleventy is new, fast (although admittedly not as fast as Hugo) and works with many templating engines out of the box. I like working with Pug, so this was one of eleventy’s selling points to my mind.

Back in the day the conference used to have the dsmun.com domain, but in 2016, for “complicated” reasons, we lost ownership of it. So for the last two years we used dsmun17.com and dsmun18.com. This is not ideal for multiple reasons:

• Schools and delegates that attend the conference regularly will have to keep track of different domains each year.
• All search engine reputation accumulated in a year would be lost in the next.
• Funnily (and embarrassingly), dsmun17.com is currently being used by a certain “YIFYMoviez”. On some search engines, this shows up as the second search result.

So I sat with Mr Secretary General and Mr President (let’s call them “the duo”) and searched for dsmun.com on NameCheap. Much to our shock, dsmun.com was now a “Premium” domain and purchasing it would cost us ₹2.75 lakhs (around 4000 USD) in the first year. We briefly considered the option and decided against it. We then began looking for alternatives. After scanning through a list of TLDs (which unfortunately did not contain .mun, .conference or anything relevant), we decided to go with <dsmun.in> which was available for around ₹1000 for the first year.

I already had a scaffold ready (I’m always quick and keen to scaffold, for some reason). After an initial meeting with the duo to discuss their requirements, I worked on a very basic, markup-only version of the website. I also roped in two of my juniors, Arav and Paavan, in the hope of training them to look after the site once I graduate. I gave them The Quick Introduction to Git and pointed them to documentation for eleventy, pug, git, linters etc.

We then added data (some dummy, some real). Once we had a minimum viable product in terms of aesthetics (building which took some time), it was mostly fixes, implementing feedback from external and internal sources, ironing out visual details (subtle hover feedback, for example) and working on performance, accessibility and code quality. And of course, there were mugshot replacements, write-up updates, background guide fixes and other such requests flowing in from the secretariat 🙄.

We had planned to fully digitize registration, but unfortunately emails with (non-digital) payment details had already been sent by the time we got around to working on the registration, so we had to stick to digitizing just the forms Still a step in the right direction ¯\_(ツ)_/¯. I wrote a little node server with Koa to validate the invitation code entered in the form and email the registration details to the secretariat. Working out how to set up the node server in now along with the static site build took some time to figure out, but was trivial once I found the relevant documentation.

Zeit’s now turned out to be a great choice for deployments. It’s essentially serverless deployments—similar to Netlify. We particularly benefited from now’s Github app. Which created deployment instances for each pull request, branch and deployed master to production each time we pushed. The free plan met all our needs (which was a plus). Almost everything was smooth and intuitive. A minor gripe I have is that redirecting the www subdomain to the root domain with now feels hacky.

We regularly took stock of accessibility and performance. We relied in part on Google’s Lighthouse (via Chrome DevTools and a zeit integration) to give us an overview of these metrics. While there are still some things I’d rather improve, I’m mostly happy with things right now.

I was happy to learn that the site quickly regained (sighs in annual domains) its position in search results. I tested DuckDuckGo, Google, and Bing). There was some conscious effort put into this as well.

Source code licensed under the MIT License (I was happy to get a chance to convince Arav of my motivations for open-sourcing it).

To Arav and Paavan: it was great working with the two of you. I hope you benefited from the experience as well.

Here’s a (now slightly outdated) timelapse of the <dsmun.in> homepage’s evolution (155 commits at the time of making the gif).