Building http://azimuthc.ms with… Azimuth CMS
How to create a simple Meteor.js site with Azimuth CMS
Meteor.js is a fantastic framework for building web apps but there is no simple solution to take care of a web site’s essentials (content pages, asset and user management, etc) so that people can focus on building cool stuff. To that end, I built Azimuth as a way to lay a foundation for awesome Meteor.js apps (or even just simple websites that perform great). Here’s how you can use it to create a basic site, such as the home page for the project itself. From this foundation, its easy to build the types of applications Meteor is uniquely designed to support.
Installing Azimuth
First things first: Getting Azimuth installed. The instructions are pretty clear on the web site (check out the ‘Getting Started’ section on the home page) so no need to repeat them here. We need to decide which front-end framework to use, Twitter Bootstrap or Zurb Foundation; In this case (just because I‘m more fluent with it) I’ll choose Foundation. After running through the instructions we’ll have our Azimuth installation ready to access — point your browser to http://localhost:3000 to fire it up.
Loading Azimuth for the first time might not be a beautiful sight, but this is only because we’re loading a bare bones copy of Foundation (which is meant to be customized, hence the name). We can make it a little easier on the eyes by searching for a free/paid Foundation 5 theme (or write it from scratch) and dropping the CSS into the client directory. Once you’ve copied in the CSS, Meteor will automatically reload and include the files you added. As long as your CSS is using the right selectors, things should start looking a lot better already.
Next we need to login so we can administer the site. Click the user icon in the upper right or navigate to http://localhost:3000/login and click the ‘create account’ link. By creating the first account in the system you will automatically be given admin privileges, and set up to manage everything on the site.
Creating a new layout with page templates
The Azimuth Docs will give you a good overview of what all the buttons in the admin panel will do for you. But I know right away that I’ll have to do something outside of the scope of the CMS’ back end — Create a new page template for the home page.
Basically, I want my home page to have three sections: A heading/short summary at the top; A list of features in the middle; And installation instructions near the bottom. So I create a folder in the clients directory called ‘azimuth_home’, and put three files in it.
- azimuth_home.html — Contains the template html and handlebars variables that’ll be used for the page layout.
- azimuth_home.js — Helper functions for the template and any custom logic I want to introduce to the page.
- azimuth_home.less — Styles specific to this page template (in .less format, so be sure to add the less package to your project to use it). Note that it is just a convention to put page-specific styles here: Any CSS in a Meteor app is available everywhere so you’ll have to scope it yourself.
Once I’ve created my page template I’ll find it available to me in the page settings panel.
Adding content with blocks
I cheated a bit and hard-coded the message at the top of the page. But I know I might want to edit the features section without having to redeploy my code. So i’ll add four six-column blocks to make up a 2x2 grid of content, starting by clicking the + sign on the toolbar for the block zone. From the panel that slides out, I select from the new block dropdown, select 6 column block, and enter the contents of this block.
After doing this for the next three blocks, I notice the layout is a little wonky and need to break the row after the second block. This is easy enough to do by selecting the block settings popup on the second block, and clicking on the down arrow.
The next step is to go in and make sure everything is properly styled. I can make this easy for myself by doing one of two things: Add a class to the page template around the block zone’s container, or add a tag to each block and target the dynamically generated tag (if you add a tag such as feature to the block, the block will be given the class azimuth-tag-feature automatically).
I’m not quite finished, but the rest of the site is pretty straightforward. I’ve created two pages for documentation using the default page template and filled them with a single 12 column block.
Publishing to the web
There are a number of ways of getting your Meteor site up on the web, such as netmute’s meteor.sh script or deploying to meteor.com’s servers; But I’ve been having success using arunoda’s meteor-up suite. Installation is a breeze, and all you need is an Amazon EC2 instance or a Digital Ocean droplet to deploy to.
As you can see, its pretty easy to get Azimuth up and running to serve a simple web site. But — Meteor offers a lot of technology that goes beyond a simple website. Azimuth makes it easier to build that killer app, using pages as a starting point for an interactive piece such as a live blog, a chat app, a multiplayer game, or something much more interesting. Likewise, blocks can serve as a sort of mini-app that can be used to display reactive information throughout your site.
Lastly, just a reminder that Azimuth is a community project. Please help by finding or fixing bugs or helping implement enhancements. Or, just make cool stuff!
