At the MODX Coding Convention Cologne in February 2015, most of the website you're viewing today was built. In this slightly-technical-but-not-too-much post, we share what technologies were used and how you can do the same to build a really awesome website in a short period of time. There was already a very simple website for the podcast, and a rough idea in Chris's head on how to make it, but other than that the vast majority of the work was all done in the weekend.
So, obviously, it is built on MODX Revolution - version 2.3.3 - but we did add a few more tools to make it easier to collaborate and develop.
Front-end Development
Chris built the design and front-end for MODX.today directly in the browser. The primary technologies and tools used for the front-end are npm (we used npm scripts for pre-processing, autoprefixing, autoreload and other fancy build features), Sass for the styling, several Foundation modules (grid, flex-video and offcanvas), Masonry for aligning article previews in multiple columns, and the Slick slider that will be used for galleries.
By skipping photoshop, it was easy to quickly see and iterate over the design while building it.
Workflow Processes
Right from the start, the website was built with Gitify, making it possible to keep the entire site in a public git repository. This made it possible for Chris to work on the front-end, while Mark did some development and content work, without getting in each others way too much.
The process is pretty simple, and you can try it too.
- Clone the GitHub repository to your local dev environment. The suggested host is localhost.modx.today (because this is opened automatically), but it can be mostly anything.
- Copy the setup folder from the 2.3.3 distribution to the dev environment.
- Run the MODX setup. This will set up a blank MODX installation.
- Call `Gitify install:package --all` to install all the necessary packages. Note that this does not include the modmore.com packages (because it needs available licenses and a valid API Key), you should manually install ContentBlocks, Redactor and MoreGallery via package management.
- Call `Gitify build --force`, this will set up the MODX.today website in your clean install, with the content and elements from the _gitify directory.
After those steps, you should have a fully functional copy of the MODX.today website to work on.
The gitify process, for those who haven't played with it yet, is a combination of two simple yet powerful commands.
- Gitify build: takes the files from the _gitify directory, and saves the data to the database.
- Gitify extract: grabs the data from the MODX database, and writes it to files in the _gitify directory.
With these two commands, you can edit things like content and templates from both the filesystem or the database, and synchronise them easily. This way it's possible to use the MODX manager for writing content (using ContentBlocks in this case) while you work on the front-end and themes exclusively on the filesystem, in your IDE of choice.
When you're done making changes, and made sure all changes are in the files, it's easy to commit and push the changes to the remote repository. Then someone else can pull in your changes, do a `Gitify build`, and be up to date with what you did.
If you want to make changes to the scss/js you should run `npm start` from the command line. This will start the watch process which will automatically trigger the build process after each file change. It also runs `Gitify build` when you update the files in the _gitify directory. There area also other commands, including `npm run build:js` and `npm run build:css` for quick one-off builds.
This process worked quite well for building MODX.today.
Deploying to Production
Even in the early stages of development, every change was automatically pushed to the production server. For this we used dploy.io, which is insanely easy to set up and simply connects to the server over SSH to upload new files. It can also be configured to run some scripts on each deploy. In the case of MODX.today, it just runs `Gitify install:package --all` and `Gitify build --force`. This will make sure the packages added to the .gitify file are installed, and it also forces a build of all data.
dploy.io fires automatically when a change is pushed to the repository, and it sends a notification to the modmore slack channel when it completed. Easy peasy, and free for one project!
Up next: Content!
Now that we have the base site up and running, we need to get working on the actual content! We're setting the bar high with the goal of daily(-ish) content, and we will definitely need guest authors to help out.
We haven't figured out the best way to do this yet, so for now we just have a simple Submit a Post page where anyone can submit an article to be posted on the site. That sends an email to a special email address and from there - if we think the post is a good fit - we add it to the site manually, and if necessary invite the author to do further editing from there until it's ready to go live. Maybe in the future we can further automate this and provide authors more tools to already start preparing their post for publishing.