Generate Static Site with Hexo

2021-09-25 by Dan

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

Templates or markdown files are changed and then generated into static files.
Uses nginx only. Only needs a web server that serves static files.
Can be hosted in S3. Or virtually anywhere.
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

Install Hexo

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)

Install Git on Ubuntu/Debian

sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS)

Install Git on Fedora/RHEL/CentOS

sudo yum install git-core

Installing Node.js

Install NVM with curl

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

or with wget

Install NVM with wget

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

Restart terminal and then run

Install Node.js

nvm install stable

Create a new post

Create New Post

hexo new "New Post Title"

Hexo Setup

Initialize Hexo Project

hexo init quellhorst-static
cd quellhorst-static
npm install

Open _config.yml and change url, site title, author, description, etc.

Run Server

Start Hexo Server

hexo server

Then open http://localhost:4000/

Making A New Post

Create Post

hexo new "My New Post"

Generate Static Files

Generate Site

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.

Deploy to S3

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