Generate Static Site With Hexo

static-architecture

This article describes how to setup Hexo, a static site generator.

A Static Site generator is a program that takes a set of files and templates and generates HTML code. Commonly they are used for building blogs.

Compared to WordPress or Drupal

  • Both use nginx, php, and database.
  • Has to generate files on every request
  • Each plugin needs more processing.
  • Setting up cache is complex
  • More points of failure
  • Less secure, hacked sites common.
  • Must apply updates frequently
  • Manage Database

How Static Site Generators Work

  1. Templates or markdown files are changed and then generated into static files.
  2. Uses nginx only. Only needs a web server that serves static files.
  3. Can be hosted in S3. Or virtually anywhere.
  4. Nothing dynamic to be exploited in static generated site

Why Use A Static Site Generator.

  • Easy to Setup
  • Simple / simplicity
  • Make site updates faster
  • more iterations
  • Fast / fast to load / performant
  • Scalable / handle a lot of http requests / no need to setup lots of servers
  • Cheaper and simpler to host. Easy to change hosts
  • Deployments are faster, safer and easier
  • Reliable / fewer points of failure
  • More Secure and fewer vulnerabilities
  • longevity – static sites just work / less code rot
  • fits blogging pattern, few writes, many reads
  • Indexable by search engines

Why Hexo?

  • Uses Markdown
  • Uses Javascript & Node.js
  • No new framework to learn
  • Regenerates after save / Live Reloading

Installing

npm install hexo-cli -g

Prerequisites

Installing Git

Windows:
https://git-scm.com/download/win

Mac OS X:
Homebrew
MacPorts
Git OSX Installer

Linux (Ubuntu, Debian)

sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS)

sudo yum install git-core

Installing Node.js

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | sh

or with wget

wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | sh

restart terminal and then run

nvm install stable

Create a new post

hexo new "New Post Title"

Hexo Setup

hexo init quellhorst-static
cd quellhorst-static
npm install

Open _ config.yml

change url, site title, author, description, etc

Run Server

hexo server

then open http://localhost:4000/

Making A new Post

hexo new "My New Post"

Generate Static Files

hexo generate

Deploy to S3

The AWS sync command below will set a cache-control header for expiration of content in 5 minutes (300 seconds). Use a longer interval for less frequently changing content. By default CloudFront will cache content for 24 hours.

hexo generate
aws s3 sync public/ s3://your-bucket-name.com/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --cache-control max-age=300

Learn More About Hexo

Writing
Server
Generating
Deployment