Integerate Hexo with Existing Express Server

I have a Express server and recently I would like to integrate Hexo blog framework into the existing Express.js site, for example, make the blog accessable on express_site/blog. While exploring the feasibility, I realise that it is hardly to find a thorough tutorial of how to achieve it. There are some information can be found on:
Hexo Github Issue 3644 and x-heco-app-connect middleware. However, none of them offer a complete guide of seamlessly integrating Hexo blog into an Express server. For example, following the instruction provided by x-heco-app-connect middleware, the app will generate issues regarding routing. Therefore, I decide to write this blog to offer a tutorial of integrating Hexo into Express, i.e. make a Hexo blog as a route of existing Express server.

My way of achieving it is based on x-hexo-app-connect and some of the steps describe blow are based on the instruction provided by x-hexo-app-connect.

Getting Started

1.1 Make a sub-directory under the express project directory. e.g. we make it under experss_proj/blog, use this command under the project directory:

1

$ mkdir blog

1.2 Enter the command to install hexo-cli globally

1

$ sudo npm i hexo-cli -g

1.3 Go to the blog’s directory (created in step 1.1) and enter the following command in terminal to init Hexo:

1

$ hexo init

1.4 In the blog directory, enter the command in terminal to install x-hexo-app-connect package:

1

$ npm i x-hexo-app-connect --save

1.5 Create a index.js file in the blog’s root directory. e.g. if you want to make it using a bash terminal (Mac platform), enter this command below:

1

$ touch index.js

1.6 Fill in the index.js with the following code:

• for the return part, it is to config the Hexo blog, the route is the most important, that is where you will configure how the Hexo blog should be visited from the original Express server. In my case, the blog will be visited via route express_site/blog

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  const Hexo = require('hexo'); module.exports = (app) => { const blogDirPath = __dirname; const hexo = new Hexo(blogDirPath, {}); // eslint-disable-next-line global-require return require('x-hexo-app-connect')(app, hexo, { // The Configs/Options log: false, compress: false, header: true, serveStatic: false, route: "/blog" }); };

  1.7 In the app.js (the home js file of Express), add the following to use the x-hexo-app-connect in Express

  1 2 3 4 5 6 7

  const app = express(); // Put it after app is initialized, as the app will be used as parameter const blogRouter = require('./blog/index')(app); ... app.use(blogRouter);

  1.8 This step is very important, it is to set “root” parameter in the _config.yml file under the root directory of Hexo. And set the root as /blog. If not set this root, the Hexo blog home page can be visited via express_site/blog, but when click the link of articles, categories, archives etc. the express will report 404 as the routes cannot be found

  1 2 3 4

  # URL ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project' url: http://localhost:3000/ root: /blog # for locating themes static files (.css etc)

• If do not set root as /blog, the following url will be generated as localhost:3000/all-categories which will lead to 404 error.

  

1.9 Apply themes. You can just following the set up instruction of each specific theme, then it should be okay.
1.10 After all the above steps, run the Express server, if the terminal showes the following, then it means you are good:)

1
2
3

INFO  Validating config
INFO  Start processing
INFO  [Hexo-App-Connect] is running on route /blog

Hope this blog helps you in some way :)

You are more then welcome to cite the content of this blog, but please do indicate the original reference link.

Comment and share