Using Hexo and Angular to build A Static Blog

By: Matias Niemelä
matias [at] yearofmoo [dot] com

Slides & Code



Blogs blogs blogs

What comes to mind first?



Server-side blogs

Relies on the backend

With some kind of database

And an admin portal


Easy to setup

Instant CMS / Admin Interface

Unmanaged Hosts exist

Plugins, plugins, plugins



Things can get pricey

Insecure (admin, DoS)

Slows over time

Lots of bandwidth

But what can we do?

What about static websites?

After all a blog is just HTML right?

Can we just build on the client first?

Static-site Blogs

The blog is built locally

Then uploaded to a server

CDN is then used to proxy it

And the domain is attached to the CDN


A super simple HTML website

No backend required

Caching + Performance-friendly

Secure, cheap and reliable


Dynamic content is difficult (no backend)

No CMS backend (you upload yourself)

Each file is a big HTML file

The build can get complex

Let’s go with a static blog

We’re all programmers

So why not rely on ourselves

And build a website powered by a blog

What’s out there

Jekyll (Ruby)

Hakyll (Haskel)

Hugo (Go)

Hexo (JavaScript)

Let’s go with Hexo

JavaScript + NodeJS + Extensibility

Well documented and well designed

Super configurable (templates, permalinks, etc…)

Excellent internal tools (warehouse.js, markdown, etc…)

Hexo is still kinda new

Yes hexo is lacking popularity

But why am I up here talking?

Hexo is the best choice for my website

Just give it some love already

The Hosting Setup

Hexo + S3 + Cloudflare

We use hexo locally to generate our website

Then we build the website

And upload to S3

Which then is served via a CDN

The best of all worlds

Cheap (S3 costs pennies)

Optimized (Cloudflare is amazing)

Testable (the website runs locally)

Extendable (we can do anything locally)

SSL IS FREE (Cloudflare rocks)

Using Hexo

Install `npm install hexo -g`

Run `hexo init`

Then `hexo server`

And goto localhost:4000

Hexo behind the scenes

Hexo runs a dynamic web server in the background

No constant rebuilding

We can also dynamically add / remove content

Content + Templates?

Content + Templates are separated

Which makes hot-swapping themes easy

We can also host our content publicly

And the website can be privately hosted


A regular HTML file with a YAML header

Or we can use Markdown

Let’s see an example


Used to store template files

Post.ejs, page.ejs, index.ejs, etc…

Templates can be referenced in posts

Let’s see an example


Used to store static assets

Images, js files, css files, etc…

Custom Pages

We can make new pages in layouts

And reference them in any source document

And we can also set a permalink directly

Let’s see an example

Going Dynamic

Static content made dynamic == complex

All dynamic code must be pre-generated

Or created on the front-end via JavaScript

What is good for static-sites?

JavaScript == Dynamic Content

We can really use anything

So long as it improves the blog experience

The less code then the better

Let’s make use of Angular

Angular makes static HTML dynamic

And turns websites into web apps

But a blog isn’t a web application

Other reasons why?

Directives keep HTML readable

DI keeps code uncluttered

Form validations

Animations are easy (ngAnimate)

Dynamic code is just template code

Example 1: Building a search

Angular downloads the file

Then lunr.js sets up a search index

Hexo Generator Code

generator.register(function(site, render, callback) { var searchResponse = parsePostsIntoJson(locals.posts); hexo.route.set('/search/results.json', searchResponse); callback(); });

Hexo Generator Code

[ <% posts.forEach(function(post, index) { %> <% if (index > 0) { %>,<% } %> { "title": "<%= post.title %>", "description": "<%- sanitize(post.excerpt) %>", "date": "<%= post.updated.toDate().toISOString() || %>", "href": "<%= encodeURI(permalink(post.permalink)) %>" } <% }) %> ]

Angular HTTP Code

var ctrl = this; $scope.$watchCollection( function() { return $; }, function(data) { var q = data.q; searchRequest(q).then(function(results) { ctrl.results = results; }); } );

Angular HTTP Code

.factory('searchRequest', ['$http', '$q', 'searchIndex', function($http, $q, searchIndex) { var index, allResults; return function(q, startIndex) { if (!index) { return downloadJSONFile().then(function() { return performSearch(q, startIndex); }); } return $q.when(performSearch(q, startIndex)); }; }]);

lunr.js Indexing Engine

var index = lunr(function () { this.field('title', {boost: 50}) this.field('description', { boost : 20 }) this.field('tags') this.ref('id') }); return { add : fn, search: fn };

lunr.js Search Code

function fetchResults(q) { var matches =; var results = []; for(var i=0;i<matches.length;i++) { var ref = matches[i].ref; results[i] = allResults[ref]; } return results; }

Search Template Code

<div ng-controller="SearchController as searchCtrl"> <div data-hexo-search-results="searchCtrl.results"> Loading search results... </div> </div> <div ng-repeat="result in searchResultsCtrl.results"> <h2> <a ng-href="{{ result.href }}" ng-bind-html="result.title | unsafeHtml"></a> </h2> <p>{{ result.description }}</p> </div>

Example 2: Building a newsletter form

We use ngModel on the inputs

And we submit a form normally

Then we style using CSS classes

And submit to a 3rd party API

Form Code

<form name="newsletterForm" class="newsletter-form row fade-block" data-ng-if="!ctrl.submitted" data-ng-submit="ctrl.submit(newsletterForm.$valid, data)"> <input data-ng-model="" required /> <input data-ng-model="" required /> <button class="submit-button button" ng-disabled="ctrl.loading"> Submit </button> </form>

Form Controller Code

.controller('NewsletterFormController', ['mcSignup', function(mcSignup) { var ctrl = this; this.submit = function(isValid, data) { if (!isValid) return; mcSignup(name[0], name[1], { ctrl.success = true; ctrl.message = message; ctrl.submitted = true; }).finally(function() { ctrl.loading = false; }); }; }]);

Example 3: Building a code editor

Custom hexo content tag creates an editor

Tag JS code builds HTML data

Angular then hops in

And renders out a component

Content Code

// in the post content My post does this and that .... {% code myExample %} More text ... // myExample.json { "files": [ { "file" : "some-file.html", "type" : "html" }, { "title" : "CSS Code", "file" : "some-file.css" } ] }

Helper JS Code

hexo.extend.tag.register('code', function(args, content, options){ var data = require(file); var html = "\n<div class=\"hexo-editor\">\n"; _.each(data.files, function(file) { html += "<pre class=\"" + file.type + " hexo-editor-slide\"" + " data-type=\"" + file.type + "\"" + " data-title=\"" + file.title + "\"><code>" + file.content + "</code></pre>\n"; }); html += "</div>\n"; return html; });

Angular Directive Code

.directive('hexoEditor', ['syntaxHighlight', function(syntaxHighlight) { return { templateUrl : '/ng-templates/code_editor_tpl.html', transclude: true, link : function(scope, element, attrs, editor) { var slides = element.find('.hexo-editor-slide'); angular.forEach(slides, function(slide) { var file = angular.element(elm).attr('data-title'); editor.files.push(file); }); // highlight and show editor.setCurrent = function(index) {}; } } }])

Angular Directive Template

<!-- /ng-templates/code_editor_tpl.html --> <div class="hexo-editor-nav"> <a ng-repeat="file in editor.files" class="hexo-editor-nav-item" ng-class="{active:editor.current == $index}" href="" ng-click="editor.setCurrent($index)"> {{ file }} </a> </div> <div class="hexo-editor-code" ng-transclude></div>

What About Page Changes?

This stuff requires some work

We capture all link requests

And then use HTML5 history

To keep the URL the same

We can optimize at build

Plainview Directive

// damn $location service won't give up .factory('$location', function() {}) .directive('plainview', ['$window', 'allowClick', 'hexoLocation', 'hexoPage', function($window, allowClick, hexoLocation, hexoPage) { return function(scope, element, attrs) { element.delegate('a', 'click', function(e) { var elm = $(this); var url = elm.attr('href'); if (allowClick(url, url.attr('target'), e) && !elm.hasClass('ignore')) { e.preventDefault(); hexoLocation(url); } }); $($window).on('popstate', function(e) { hexoPage($window.location); }); }; }])

Keeping it SEO friendly

Keep the original blog data the same

Use ng-bind instead of {{curly}}

Use empty directives to load content

Match up the URLs

Where to go from here?

Hexo + Angular is more hands on

But we can build really complex sites

That are super fast and efficient

Just put the time into it!

Slides & Code




Twitter: @yearofmoo


Email: matias [at] yearofmoo [dot] com