Colophon
Curious about what makes our website tick? Read all about it
Running a website in 2021 can be quite involved. Here's a rundown of the different things that are at play.
Core Technologies
The underlying set of technologies that we use boils down to PHP, JavaScript and CSS.
Content Management System
The CMS underpins the whole website. To manage all website content, we use the excellent Craft CMS. This system runs on PHP and gives us unlimited flexibility to create just about any kind of web page you can imagine.
We've modelled the CMS in such a way that allows non-coders to build feature-rich web pages without coding knowledge.
We've implemented a series of reusable block elements that can be dragged onto a page and the content in those blocks edited with ease.
CMS Plugins
We use a handful of third-party plugins to extend the functionality a little
- Solspace Calendar to manage multiple calendars for the church
- Solspace Freeform to provide a form builder for whatever purpose we need
- nystudio107 Image Optimiser to make our images work best on screens of all sizes
- nystudio107 SEOMatic to facilitate modern SEO best practices & implementation. It is a turnkey SEO system that is comprehensive, powerful, and flexible
- nystudio107 Web Perf helps you build & maintain high-quality websites through Real User Measurement of your website's performance
- Rias Scout to sync our sermon archive to Algolia search
Search
We have 2 types of search on the site. The main site search comes courtesy of Craft CMS.
Our sermon browser is a lot more refined.
I think we have a world-class sermon browser thanks to Algolia. Algolia is a search-as-a-service platform; when we publish a sermon, the metadata from that sermon is passed to Algolia and we can then run advanced ranking measurements on the metadata from Algolia.
What you see as a user on the front-end is a search tool that is similar to the one you might see on an e-commerce website with filters of speakers and books of the Bible.
The sermon browser is a small JavaScript built with VueJS - an excellent JavaScript library for building rich, interactive user interfaces.
Site Design
I don't do a lot of design work these days but this was my first approach to "designing in the browser". Breaking each site element (like site header/footer, heroes, image lockups, content block etc) into its own "thing" and then viewing that piece in the browser at different screen sizes until I'm happy.
Styles
We use the excellent Tailwind CSS utility library for styling our "things". Tailwind allows us to keep our styles lean, our site fast - by not repeating styles - and enables us to tweak design elements without the risk of those style changes leaking to other elements of the site.
Fonts
Our pretty font is Canada Gibson in a variety of weights delivered by the Adobe Fonts web service.
Hosting
Servers
Craft CMS runs out of an NGINX web server and MySQL database on Amazon Web Services. Our assets (images, video and audio) are delivered from another AWS service known as S3.
The server itself is managed using a service called Laravel Forge. Forge is hooked up to a GitHub repository (where we keep the website code). When one of us pushes a change to the code, Laravel Forge kicks off a deployment to implement the change.
Forge is also responsible for running our database backup schedule every night for disaster recovery.
Queue
For things that take time, generating images of varying sizes, we pass these to a queue so that you don't wait for them to process before you get the page returned. For this we use Redis.
Content Delivery Network
Our AWS sits behind Cloudflare to protect us from the dark side of the Internet and help make the site fast regardless of where in the world you're visiting from.
Email Delivery
Any emails that the website sends is delivered by Mailgun.
Code
Our code is backed up to GitHub where we can grant access to whoever needs it. It means we can work on the site on our own machines without impacting the live site. When a feature is ready to be deployed, we store it in a feature branch to be reviewed. When a review is complete, we merge the change or continue the change locally.
Analytics
Currently, we're using Fathom to monitor our website traffic and give our users greater privacy by not tracking their web history. You can see our analytics here.
Anything Else?
There's likely something we've not covered but if there's something specific you'd like to know, drop me an email [email protected] and I can answer and update this page.