Motion Middleman Template

Introduction

Motion started life as a hobby project of mine as I was creating my personal website. I wanted to take up the challenge of creating my own platform and touch upon all aspects of website / CMS development: from designing the logo and visual elements (typography and color theme elements) to creating a backend (of-sorts) to hold the structure of my data.

I would love to say that I started it having the in mind that I would publish my work as a Middleman template, but that would a lie. I decided to open source a more streamlined polished version of Motion to give something back to the community and allow other developers to leverage some of my experience creating this website. One of my goals creating this project was to create a minimal boilerplate that I could potentialy re-use for a variety of projects in the future.

Over the years, I have published several websites using Wordpress. Wordpress is a wonderful platform that allows even very non-tech savvy users to publish almost any type of content. Wordpres is a full-fledged CMS, using a MySQL database and requiring a PHP enabled web server to serve. It is a living system, meaning that you have to take care of it: update it the core component regularly, back the database up, update your plugins regularly, update your theme, etc. That was something that I wanted to avoid, as I wanted my website to be as low maintenance as possible, while still maintaining the ability to publish the content I had in mind. So, I settled on a static site generator, called Middleman.

In case you are not familiar with the term, static site generators are application frameworks (or libraries) that take plain files and convert them to appropriate HTML, CSS and JS files that can be served by any web server. In a way, they feel like a throwback to the time I created my very first website in Adobe Dreamweaver, but at the same time, they feel very modern and up to date. There are static site generators in almost any language (ruby based ones include Jekyll (which is used by Github Pages), Middleman, JS ones include Gatsby, Python include Hugo, etc) and the end result they produce is more or less the same. Most of the differences come from the intricacies of each language and the feautures that the developers baked into them.

A major drawback of static websites is the lack of user interaction, simply because there is no database or application server in the backend to handle such user requests. In the case of presentation websites, that is absolutely fine, but If your project needs major user interactivity, your best bet is to go for a proper CMS or application. Still for my use it was absolutely perfect.

Defining the set of features

Here's a small sample of the list of features I wrote down when I started thinking about the project:

• I wanted to create a website that I could publish articles, photos and projects breakdowns (like this one you are reading now), with an option to add more sections if I ever needed to
• I wanted the information in each article to be classified and tagged in multiple ways so it could be easily retrieved
• I wanted to be able to use any JS framework I wanted to increase the interactivity of the website
• I wanted a very clean, minimal aesthetic, similar to the one Medium has
• I wanted to have search functionality*
• I wanted to able to use Markdown to write my articles and not HTML. Since I was the intended user, I didn't care about a GUI editor
• I wanted to be able to publish the final product on any major CDN or serve it from an Amazon S3 bucket
• I wanted to be able ot use it as a base to quickly sketch out other ideas for clients or myself, skipping the need to constantly create the same boilerplate (a very time consuming and very boring process)

As you can see that is a fairly large list of features (and it's not the whole one either). I went through the important ones first, putting the ones I wouldn't immediately need aside and started creating the base for the website. There is one item on that list that I do want to touch upon, and that is my need for search functionality, coupled with my need for having the ability to use any kind of JS framework. You can read about how I ended up creating the search functionality for my website and for Motion here, but I can tell you that it was a very interesting and exciting process. The initial version of search was based on VueJS, but I have since created a React version of search that will be migrated over to this website as well.

Improvements and further development

There are a ton of things that one can do to improve or further develop upon a platform such as this one. Since Motion came to life as a side-project of my own website, It carried only the elements that I felt were necessary for me at that time (I haven't implemented a carousel element for example, because I had no use for it initialy, but I could create or import one if I need to in the future). One of the reasons I wanted to open source this project was because I was excited to see what would people be able to do with it once they got their hands on it.

Documentation and project files

A very important and also very time consuming part of writing software is documenting it. Because you are creating something that is meant to be used by someone else, you need to be able to provide very clear and concise documentation in order to get the point across as best as possible. While in the process of documenting the website I had an idea about how to better do that. I decided to create a series of small videos and an eBook to help the process along. All of the videos and book are aimed at seasoned developers as well as junior developers and will be available as soon as possible.

Motion is open sourced and it can be found on my Github Page.