Hero image

Website redesign

Some notes about our new and improved look

Website redesign

by Christopher Witulski, Kristina Nielsen, Jessie Vallejo

We are pleased to share the launch of our updated and streamlined website. Improvements include better functionality for phones and other devices, as well as a new look as we bring our project out of its fledgling state.

Since beginning the World Music Textbook project, we have been focused on exploring best practices while carving a pathway toward sustainability. We knew that we wanted more flexibility than what most platforms offer, so we started building the site from scratch using familiar technologies that let us get running quickly. The site we are launching today is brand new, another build from scratch, but one that uses modern tooling and provides us with extraordinary flexibility to grow.

Important new features include:

  • Improved accessibility;
  • A blog-like news section that makes online sharing and social media updates more consistent and cohesive;
  • And a hosted server—which we can use for improved control of our content, mailing lists, and other things that you don't necessarily see—that we can expand in the future for potential features like custom WMT pages for your classes.

The site is built on open technologies and run using free services. All are standards in modern web development and well documented. The rest of this post includes technical details about our change for anyone who might be interested or considering a similar open project.

Our "tech stack"

In building a fully custom site that does what we need, we made use of a host of technologies. With so many options, it can be difficult to know where to start. As we move to version 2, here is an outline of what we are using. If you have questions or want to talk about how these (or other) approaches can help make your project idea happen, reach out to us at editors@worldmusictextbook.org.

Sustainability

Knowing that websites can come and go, we wanted to ensure that contributions to this one are properly archived and accessible forever. The standard way to handle this is using DOI records, but these can require expensive memberships. To keep everything free (an important part of project sustainability), we host our PDF files through Bowling Green State University's library system. With the push toward open educational resources, many libraries can offer use of their DOI access, it is worth asking library staff about potential options.

Code

We wanted full control over what our site could be and do, which meant that standard no- or low-code site generators like WordPress were not flexible enough for our needs. Many also charge fees for hosting and ad-free sites. We opted to build the site using standard web development tools. Our first version used Jekyll, which serves the purpose well. It builds static sites from easy-to-edit markdown files and allows developers to customize themes more easily than systems like WordPress.

With version two, we moved to Next.js, a library that offers a number of benefits, in part because it is based on React, an industry standard for web development. Among other things like faster load times, Next.js combines the benefits of static site generation with an API system for server-sided work. Right now, we use this to improve our mailing list signup and other simple tasks, but it opens possibilities related to site users being able to log in and save their work. Think building custom World Music Textbook course schedules and reading lists or saving online course content and integrating it with resources from within and outside of this project.

All of these are free and open code libraries. We store our code in open repositories at GitLab and host the site on Vercel. Each of these has free or free-for-education tiers. Most importantly for our goal of sustainability, however, is that if the pricing were to change, this is all just code with no vendor lock in: we can change services with minimal trouble. On the downside, this kind of distributed system requires a great deal more web development knowledge than fully integrated services like WordPress.

Content management

One reason for our recent change from Jekyll to Next.js is content management. We previously had to hand-code and update any new material. The new site integrates into a content management system (CMS) called Sanity. This is another open source project with a free community tier and it allows for any of our editors to easily add and edit any of the text on the site. It's also impressively customizable and has been a pleasure to learn and use so far.

That's all on the digital side. We use Pandoc with LaTeX to create print journal-quality PDF files of every contribution. You can see our templates and processes in this repository on GitLab.

Other stuff that we're trying out includes Notion and its free pro plan for educators for our own internal record keeping; GoatCounter for very basic analytics that don't collect any identifiable personal data; and Discord for communication and custom bots that notify us when you sign up for the mailing list, suggest a resource, and so on.

Taken together, this collection of tools and services has afforded us a free, open, flexible, and powerful way to collaborate and build a dependable and sustainable World Music Textbook. If you have any comments, suggestions, or questions—or you are considering creating an open resource and just want to toss some ideas around—let us know! And, of course, if you want to be a part of this work, consider contributing!