HexoPress

A multi-platform client that offers a user-friendly article editing interface and content management system for Hexo-based blogs. 为基于 Hexo 的博客,提供友好易用的文章编辑界面和内容管理系统的,开源博客软件。

36
2
Vue
logo

HexoPress

license
last-commit
Electron.js
vue
NodeJS
npm
vite
Fastify
downloads

An open-source blogging software that offers a user-friendly article editing interface and content management system for Hexo-based blogs.

English | 简体中文

I. Introduction

Hexo is a fast, simple, and efficient blogging framework. It compiles and renders articles on the server, generating static pages that are then published to the internet, providing a smooth reading experience for visitors. However, Hexo’s content management approach, based on configuration and text files, is not particularly user-friendly for blog authors. For example, metadata used to organize blog content, such as categories and tags, is scattered at the beginning of each article, making it impossible to offer a real-time and global management interface. Editing metadata for a single article, such as categories, tags, update times, and publication statuses, requires manual editing in Yaml or JSON formats, which are different from Markdown syntax. This presents a significant mental burden for authors unfamiliar with Yaml/JSON syntax and the Front Matter organization format, including professional programmers.

To address these challenges, I designed HexoPress. Its core principle leverages cache files generated by Hexo’s own generators to display metadata information like categories and tags in a tree directory format on the editing interface in real-time. This allows authors to set categories and tags with a simple click and avoid the distraction of handling Front Matter data while editing articles, as the system organizes content automatically upon saving according to syntax. Additionally, HexoPress features a user-friendly Markdown editor that supports the Vim editing mode, favored by many programmers, making the writing process more enjoyable.

I used popular web development technologies such as Vue 3, Element Plus, and Vite 5, and packaged them into a desktop application with Electron, allowing it to run on multiple platforms including Windows, MacOS, and Linux. I hope this open-source software enhances your blogging experience. If you like this project, please recommend it to your friends and star us on GitHub. Your support is a great encouragement to us, thank you ❤️!

Features List


  • [x] 📝 Article list shows all posts and allows filtering by “Published” or “Draft”;
  • [x] 📅 Filter or search the article list by published month;
  • [x] 🗂️ Filter or search the article list by category;
  • [x] 🔍 Filter or search the article list by key-words;
  • [x] 🌳 Tree view for categories list with article count statistics;
  • [x] 🏷️ List view for tags list with article count statistics;
  • [x] 🖼️ Display of media resources list such as images;
  • [x] ✍️ Article editor with Markdown preview support;
  • [x] 📋 Editor supports an Outline panel for navigation;
  • [x] ⌨️ Editor supports Vim key bindings;
  • [x] 📊 Editor supports dropdown selection for categories and tag search;
  • [ ] 🔖 Batch edit the categories and tags for articles;
  • [x] ⚙️ Support for quickly editing metadata (FrontMatter) without opening the article.

⭐ Star us on GitHub — it motivates us a lot!

Acknowledgements

Special thanks to WordPress, from which HexoPress draws its design inspiration for the management and editing interfaces. WordPress is the world’s finest blogging platform/software and has been my personal choice for blogging software for many years.

II. Installation

0. Compatibility

The client internally uses the API of Hexo version 7.1.1. Hexo blog versions above v7.0.0 can be used, while other versions have not been tested. Before using, make sure the blog directory has been backed up with git.

1. Mac

Download for Apple Silicon: v1.2.0

Download for Intel Chip: v1.2.0

2. Windows

Download for Windows: v1.2.0

III. User Guides

  1. How to build a blog with Hexo?

IV. Screenshots

1. Dashboard

Dashboard

2. Posts List

Posts List

3. Editor

Editor

4. Categories Management

Categories Management

5. Tags Management

Tags Management

V. Getting Started from Source Code

1. Clone the source code

git clone https://github.com/charlestang/HexoPress.git

2. Running Environment

  • Node.js >= v20.8.1
  • npm >= v10.5.5
  • tcp port:5173 used by the internal webpage
  • tcp port:2357 HTTP service used to serve local images

3. Install Dependencies

npm install

4. Run

Run local dev server:

npm run dev

Run ESLint:

npm run lint

Run code format with prettier:

npm run format

Run tests:

npm run test

5. Package

npm run package
npm run make

VI. Contribution

1. Report Issues

Visit https://github.com/charlestang/HexoPress/issues to submit issues.

2. Contribute Code

  1. Fork this repository
  2. Create your feature branch: git checkout -b
  3. Commit your changes: git commit -am ‘Add some feature’
  4. Push to the branch: git push origin
  5. Submit a pull request