Using Ember CLI as a Single Page Static Site Generator

Originally published at blog.current.sh on August 26, 2015.

The past couple of months I’ve been using Ember CLI to develop an Ember.js app for the web UI of ⚡current.sh. I have thoroughly enjoyed using Ember CLI, so when the time came to build a static site for the beta sign up page I couldn’t help but want to use it. Let me show you why.

Setup

I am using the latest version of Ember CLI v1.13.8 to generate an Ember.js v1.13.7 app. To get setup with Ember CLI checkout the Getting Started guide.

After Ember CLI is installed, create a new project

$ ember new my-static-site $ cd my-static-site

I love frameworks. I’ve spent years as a Rails developer. I’d rather use Ember.js to build an application than Backbone.js or React. So it may be no surprise that I prefer to use a CSS framework than to write it all myself. I really love how simple it is to get setup with a CSS framework using an Ember CLI addon.

To get started with Foundation, install the addon

$ ember install ember-cli-foundation-sass

If you encounter a conflict during installation and are asked to select a “suitable version for jquery.” Choose !1. Make sure to prefix your choice with ! so it persists to bower.json.

conflict Unable to find suitable version for jquery 
1) jquery ^1.11.3
2) jquery >=1.6
3) jquery >=1.2
4) jquery >= 2.1.0
5) jquery >= 1.7.0 < 2.2.0 [?]
Answer: !1

To find your favorite CSS framework check out Ember Addons. It lists thousands of addons and scores them based on things like how many contributors it has, how recently it has updated, and how many times it has been downloaded.

Ok here is my favorite part… when we start the server:

  • Saas will ✨automatically✨ be compiled to CSS with zero setup
  • the browser will ✨automatically✨ reload the page when a file is saved with zero setup

To make reloads faster when we only change CSS we can install an addon that reload styles without reloading the entire page.

Install the styles reloader addon

$ ember install ember-cli-styles-reloader

To include Foundation’s JavaScript we add options when we are creating our Ember app.

Add options to ember-cli-build.js

var app = new EmberApp(defaults, { 
// Add options here
'ember-cli-foundation-sass': { '
modernizr': true,
'fastclick': true,
'foundationJs': 'all'
}
});

Start the server

$ ember server

Then navigate over to http://localhost:4200 in the browser. You should see “Welcome to Ember.”

Develop

Ok let’s build a site!

Add HTML to the body of app/index.html

<nav class="top-bar" data-topbar role="navigation"> 
<ul class="title-area">
<li class="name">
<h1><a href="#">My Static Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="http://blog.current.sh/using-ember-cli-as-a-single-page-static-site-generator"> Read the blog post </a></li>
<li><a href="https://github.com/jlsuttles/my-static-site"> See the code on GitHub </a></li>
</ul>
</section>
</nav>

Now we see our top bar in the browser! But we also still see “Welcome to Ember.” Since we aren’t using Ember’s handlebars templates we can just remove the template that is outputting this.

Remove the application template

$ rm app/templates/application.hbs

Time to style. It is easy to customize the look of our site by setting Sass variables because we are setup with the Sass version of Foundation. Yay, less code to maintain! Say we aren’t happy with the color of our top bar. We can change the color in Foundation’s settings.

Edit Foundation settings in app/styles/_settings.scss

// $topbar-bg-color: $oil; 
$topbar-bg-color: #268bd2;

If we are unhappy with the color of the site name in the top bar and can’t find a way to change it through the settings, we can write some of our own Sass.

Add custom Sass to app/styles/app.scss

.top-bar .name h1 a { color: #002b36; }

Looking good, but clicking the hamburger icon does not expand the responsive menu. We need to initialize the Foundation JavaScript.

Add a script tag to the bottom of the body in app/index.html

<script> $(document).foundation(); </script>

Great, that’s working now! Let’s commit our changes. The project is already setup as a git repository thanks to Ember CLI. It was even kind enough to generate an adorable first commit featuring Tomster ASCII art. 💖

Admire the Tomster ASCII art

$ git log

Commit changes

$ git add . 
$ git commit -m "A very descriptive message"

Deploy

Let’s deploy for free to Heroku. We need a Heroku account and the Heroku Toolbelt. If you prefer to deploy to S3 or elsewhere check out the Ember CLI Deploy addon.

Create a new Heroku app

$ heroku create my-static-site --buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git

You’ll have to come up with your own clever application name, as only one of us will be able to claim my-static-site.

Push to Heroku

$ git push heroku

That’s it! Now the whole world can navigate to http://my-static-site.herokuapp.com and see your awesome site. Remeber to replace my-static-site with whatever your Heroku app is called.

When you’re ready to build an ambitious web application you’ll already be setup! Take a stroll through the Ember.js Guides to get started and lean on the Ember.js Community when you get stuck.