Generate Static Site With Hexo
2017-05-21This 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
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