Subscribe via RSS
Technical Articles & Tutorials
Search Sign up

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.

Archives

  1. AI & Automation
  2. AI Filtering for Web Content
  3. Web Fundamentals & Infrastructure
  4. Reclaiming Connection: Decentralized Social Networks
  5. Web Economics & Discovery
  6. The Broken Discovery Machine
  7. Evolution of Web Links
  8. Code & Frameworks
  9. Breaking the Tech Debt Avoidance Loop
  10. Evolution of Scaling & High Availability
  11. Evolution of Configuration & Environment
  12. Evolution of API Support
  13. Evolution of Browser & Client Support
  14. Evolution of Deployment & DevOps
  15. Evolution of Real-time Capabilities
  16. The Visual Basic Gap in Web Development
  17. Evolution of Testing & Monitoring
  18. Evolution of Internationalization & Localization
  19. Evolution of Form Processing
  20. Evolution of Security
  21. Evolution of Caching
  22. Evolution of Data Management
  23. Evolution of Response Generation
  24. Evolution of Request Routing & Handling
  25. Evolution of Session & State Management
  26. Web Framework Responsibilities
  27. Evolution of Internet Clients
  28. Evolution of Web Deployment
  29. The Missing Architectural Layer in Web Development
  30. Development Velocity Gap: WordPress vs. Modern Frameworks
  31. Data & Storage
  32. Evolution of Web Data Storage
  33. Information Management
  34. Managing Tasks Effectively: A Complete System
  35. Managing Appointments: Designing a Calendar System
  36. Building a Personal Knowledge Base
  37. Contact Management in the Digital Age
  38. Project Management for Individuals
  39. The Art of Response: Communicating with Purpose
  40. Strategic Deferral: Purposeful Postponement
  41. The Art of Delegation: Amplifying Impact
  42. Taking Action: Guide to Decisive Execution
  43. The Art of Deletion: Digital Decluttering
  44. Digital Filing: A Clutter-Free Life
  45. Managing Incoming Information
  46. Cloud & Infrastructure
  47. AWS Lightsail versus EC2
  48. WordPress on AWS Lightsail
  49. Migrating from Heroku to Dokku
  50. Storage & Media
  51. Vultr Object Storage on Django Wagtail
  52. Live Video Streaming with Nginx
  53. YI 4k Live Streaming
  54. Tools & Connectivity
  55. Multi Connection VPN
  56. Email Forms with AWS Lambda
  57. Static Sites with Hexo

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