DOCSEARCHbyAlgolia
Submit Docs

Hexo Documentation

website·Indexed 43 days ago

https://hexo.io

A fast static site generator. Documentation covers setup, theme creation, tag plugins, and API usage, with release notes spanning from version 2.7 up to v8.1.0.

Tokens
43.6K
Snippets
308
Records
505
Agent score
72%

What's inside Hexo

  1. Overview of Hexo Static Site Generator

    Hexo is a static site generator written in JavaScript and TypeScript that runs on Node.js. It is primarily used by developers to build blogs and personal websites.

  2. Overview of Hexo

    Hexo is a fast, simple, and powerful blog framework that generates static files from Markdown (or other markup languages) using themes.

  3. Hexo 4.2 Performance Improvements Overview

    Hexo 4.2 introduced several architectural changes to improve generation speed by approximately 30% compared to Hexo 3.2 and resolve performance regressions seen in Hexo 3.8. Key improvements include the removal of heavy dependencies, optimization of HTML caching, and the implementation of utility function memoization.

  4. Hexo core features overview

    Hexo is a fast static site generator powered by Node.js. Key capabilities include:

    • Performance: Rapid generation of hundreds of files in seconds.
    • Markdown: Full support for GitHub Flavored Markdown and most Octopress plugins.
    • Deployment: One-command deployment to platforms like GitHub Pages and Heroku.
    • Extensibility: Powerful APIs for plugins and integration with NPM packages such as Babel, PostCSS, Less, and Sass. It supports multiple template engines including EJS, Pug, and Nunjucks.

  5. Use Hexo Box to process files in source or theme folders

    Box is a container used for processing files in a specified folder. Hexo provides two primary boxes: hexo.source for the source folder and hexo.theme for the theme folder. You can load files using process() to load all files once, or watch() to load files and monitor them for changes.
    // Load all files in the box
box.process().then(function () {
  // processing complete
});

// Load files and start watching for changes
box.watch().then(function () {
  // You can call box.unwatch() later to stop watching
});

  6. New features in Hexo v8.0.0

    Hexo v8.0.0 introduces several functional enhancements:

    • Helper Functions: The Hexo context is now bound to helper function callbacks.
    • Configuration: Added validation for url configuration.
    • Code Blocks: Backtick code blocks now support additional options.
    • Config Loading: Stricter extension checks are now enforced during load_config.

  7. Remove .html extension from URLs in Hexo

    In Hexo 4.1.1, you can remove the trailing .html extension from permalinks by adding the trailing_html: false option under the pretty_urls configuration. For example, this transforms https://example.com/page/about.html into https://example.com/page/about.
    # _config.yml
pretty_urls: 
  trailing_html: false

  8. Manage global assets in Hexo

    Assets are non-post files (such as images, CSS, or JavaScript) located in the source folder. For a small number of site-wide images, the simplest approach is to store them in a source/images directory. These files can be accessed using an absolute path from the site root.
    ![](/images/image.jpg)

  9. Include specific line ranges of code using the include_code tag

    The include_code tag now supports including specific ranged code lines, allowing developers to embed only a subset of a file's source code in their posts.

  10. Configure Relative Links in Hexo themes

    To support relative links in Hexo 2.7, replace manual root and path concatenation in templates with the url_for helper. The url_for helper automatically handles config.root and will generate a relative path if the relative_link setting is enabled.
    <%# Replace this: %>
<%- config.root %><%- path %>

<%# With this: %>
<%- url_for(path) %>

  11. Load partial templates and cache fragments

    Use partial to include other template files and fragment_cache to store the output of a function to improve performance.
    // Load a partial with optional locals and cache settings
<%- partial(layout, [locals], { cache: true, only: false }) %>

// Cache a specific fragment of HTML
<%- fragment_cache('header', function(){ return '<header></header>'; }) %>

  12. Automate SEO and link management

    Several plugins help with SEO and link health:

    • hexo-auto-canonical: Automatically generates canonical links.
    • hexo-autonofollow: Automatically adds rel="nofollow" to external links.
    • hexo-auto-link-checker: Detects broken links within the site.