Skip to content

Hexo static site generator

Hexo is a fast and efficient static site generator framework based on [[Node.js]]. It allows users to generate static websites from Markdown or other markup languages and provides a streamlined workflow for managing content and deployment^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

Core Commands

The fundamental workflow in Hexo involves three primary commands^[600-developer__blog__hexo-blog__create-blog-Hexo.md]:

  • Initialization: hexo init sets up the necessary directory structure and default files.
  • Generation: hexo generate compiles the source files into static HTML assets ready for publishing.
  • Server: hexo server starts a local web server, often used with flags like -w (watch), --debug, and --drafts for live preview during development.

Additional utility commands include hexo clean to remove cache files and generated assets^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

Project Structure

A standard Hexo project is organized into specific directories to separate configuration, content, and themes^[600-developer__blog__hexo-blog__create-blog-Hexo.md]:

  • _config.yml: The root configuration file containing site-wide settings such as URL, theme, and deployment parameters^[600-developer__blog__hexo-blog__create-blog-Hexo.md][600-developer__blog__hexo-blog__update-hexo.md].
  • source/: Contains the raw content, including _posts/ for articles and assets like images or uploads^[600-developer__blog__hexo-blog__create-blog-Hexo.md].
  • themes/: Stores the installed themes, each with its own _config.yml for specific theme customization^[600-developer__blog__hexo-blog__create-blog-Hexo.md].
  • public/: The output directory where the generated static site files are stored^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

Deployment

Git Deployment

Hexo supports automated deployment to Git repositories (such as [[GitHub]] Pages) using specific plugins^[600-developer__blog__hexo-blog__create-blog-Hexo.md][600-developer__blog__hexo-blog__update-hexo.md]. This typically requires installing the hexo-deployer-git package and configuring the deployment settings in _config.yml^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

GitHub Actions

For continuous integration, Hexo sites can be configured to auto-deploy using GitHub Actions. This is achieved by defining workflows in the .github/workflows/node.js.yml path^[600-developer__blog__hexo-blog__update-hexo.md].

Extensibility and Plugins

Hexo's functionality can be extended via plugins and themes managed through npm^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

  • Asset Management: Plugins like hexo-asset-image handle image paths, while hexo-renderer-marked ensures correct rendering of Markdown and images^[600-developer__blog__hexo-blog__create-blog-Hexo.md][600-developer__blog__hexo-blog__update-hexo.md].
  • Development Tools: hexo-browsersync enables automatic page refreshing during development^[600-developer__blog__hexo-blog__create-blog-Hexo.md].
  • Generators: Plugins such as hexo-generator-sitemap and hexo-generator-feed aid in SEO and content syndication^[600-developer__blog__hexo-blog__create-blog-Hexo.md].
  • Tag Clouds: Visual features like tag clouds can be added using packages like hexo-tag-cloud^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

Configuration

Language and Localization

Site language is configured in _config.yml by setting the language field (e.g., to zh-tw for Traditional Chinese)^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

File Exclusion

Users can configure specific files to be skipped during the generation process using the skip_render option in the configuration file^[600-developer__blog__hexo-blog__create-blog-Hexo.md].

Sources

  • 600-developer__blog__hexo-blog__create-blog-Hexo.md
  • 600-developer__blog__hexo-blog__update-hexo.md