Generate Static Site With Hexo

2017-05-21
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

About

Why fear those copying you, if you are doing good they will do the same to the world.

Optimize Your Website!

Is your WordPress site running slowly? I offer a comprehensive service that includes needs assessments and performance optimizations. Get your site running at its best!

Check Out My Fiverr Gig!

Elsewhere

  1. YouTube
  2. Twitter
  3. GitHub