hexo-app-connect

It lets you use hexo as a route in your main express/connect app

!!! DEPRECATED !!!

Notice: Use x-hexo-app-connect Package, Instead.

Getting Started

Do these steps below, one by one to have a clean blog using this package + hexo. These steps are just about a sample project. You can use this information to develop your blog in any shapes.

1. Installation

1.1 - Make a sub-directory in wherever you want inside of your project directory. e.g. if we wanted to make it in the root path of our project, use this command:

$ mkdir blog

1.2 - Enter this command to install hexo-cli globally.

$ sudo npm i hexo-cli -g

1.3 - Go to your blog's directory you made (in step 1.1) and enter this in terminal to initialize hexo, there:

$ hexo init

and after that, the blog directory tree should be something like this:

./
├── _config.yml
├── node_modules
│   └── ...
├── package.json
├── package-lock.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
│       └── hello-world.md
└── themes
    └── landscape
        ├── _config.yml
        ├── Gruntfile.js
        ├── languages
        │   ├── default.yml
        │   ├── de.yml
        │   ├── es.yml
        │   ├── fr.yml
        │   ├── ja.yml
        │   ├── ko.yml
        │   ├── nl.yml
        │   ├── no.yml
        │   ├── pt.yml
        │   ├── ru.yml
        │   ├── zh-CN.yml
        │   └── zh-TW.yml
        ├── layout
        │   ├── archive.ejs
        │   ├── category.ejs
        │   ├── index.ejs
        │   ├── layout.ejs
        │   ├── page.ejs
        │   ├── _partial
        │   │   ├── after-footer.ejs
        │   │   ├── archive.ejs
        │   │   ├── archive-post.ejs
        │   │   ├── article.ejs
        │   │   ├── footer.ejs
        │   │   ├── gauges-analytics.ejs
        │   │   ├── google-analytics.ejs
        │   │   ├── head.ejs
        │   │   ├── header.ejs
        │   │   ├── mobile-nav.ejs
        │   │   ├── post
        │   │   │   ├── category.ejs
        │   │   │   ├── date.ejs
        │   │   │   ├── gallery.ejs
        │   │   │   ├── nav.ejs
        │   │   │   ├── tag.ejs
        │   │   │   └── title.ejs
        │   │   └── sidebar.ejs
        │   ├── post.ejs
        │   ├── tag.ejs
        │   └── _widget
        │       ├── archive.ejs
        │       ├── category.ejs
        │       ├── recent_posts.ejs
        │       ├── tagcloud.ejs
        │       └── tag.ejs
        ├── LICENSE
        ├── package.json
        ├── README.md
        ├── scripts
        │   └── fancybox.js
        └── source
            ├── css
            │   ├── _extend.styl
            │   ├── fonts
            │   │   ├── FontAwesome.otf
            │   │   ├── fontawesome-webfont.eot
            │   │   ├── fontawesome-webfont.svg
            │   │   ├── fontawesome-webfont.ttf
            │   │   └── fontawesome-webfont.woff
            │   ├── images
            │   │   └── banner.jpg
            │   ├── _partial
            │   │   ├── archive.styl
            │   │   ├── article.styl
            │   │   ├── comment.styl
            │   │   ├── footer.styl
            │   │   ├── header.styl
            │   │   ├── highlight.styl
            │   │   ├── mobile.styl
            │   │   ├── sidebar-aside.styl
            │   │   ├── sidebar-bottom.styl
            │   │   └── sidebar.styl
            │   ├── style.styl
            │   ├── _util
            │   │   ├── grid.styl
            │   │   └── mixin.styl
            │   └── _variables.styl
            ├── fancybox
            │   ├── blank.gif
            │   ├── [email protected]
            │   ├── fancybox_loading.gif
            │   ├── fancybox_overlay.png
            │   ├── [email protected]
            │   ├── fancybox_sprite.png
            │   ├── helpers
            │   │   ├── fancybox_buttons.png
            │   │   ├── jquery.fancybox-buttons.css
            │   │   ├── jquery.fancybox-buttons.js
            │   │   ├── jquery.fancybox-media.js
            │   │   ├── jquery.fancybox-thumbs.css
            │   │   └── jquery.fancybox-thumbs.js
            │   ├── jquery.fancybox.css
            │   ├── jquery.fancybox.js
            │   └── jquery.fancybox.pack.js
            └── js
                └── script.js

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

$ npm i hexo-app-connect --save

1.5 - Configure your blog according to The Configurations Section.

1.6 - Create a index.js file in your blog's root directory. e.g. if you want to make it using a bash terminal, enter this command below:

$ touch index.js

1.7 - Fill index.js file (inside of your blog's directory) with this scripts:

var blogDirPath = "/absolute/path/to/your/blog's/root/directory";
var Hexo = global.Hexo = require("hexo");
var hexo = global.hexo = new Hexo(blogDirPath, {});

var hexoAppConnect = require('hexo-app-connect');
var hexoApp = hexoAppConnect.hexoApp;
var hexoRunPromise = hexoAppConnect.hexoRunPromise;

exports = module.exports = {
    hexoApp: hexoApp,
    hexoRunPromise: hexoRunPromise
};

1.8 - Open the file which you want to use hexo-app-connect in your (connect|express|...) application. Then, use these scripts to use hexo as a route in your application:

// some of your codes ...
var hexoAppConnect = require("./relative/path/to/your/blog's/root/directory");
var hexoApp = hexoAppConnect.hexoApp;
var hexoRunPromise = hexoAppConnect.hexoRunPromise;

hexoRunPromise
    .then(function(hexoAppConfigs){
        
        // e.g. 'app' is your (connect|express|...) application
        app.use(hexoAppConfigs.route, hexoApp);
        
    });
// some of your codes ...

or you can use a shorter code (but not safer) like this:

// some of your codes ...
var hexoApp = require("./relative/path/to/your/blog\'s/root/directory").hexoApp;

// e.g. 'app' is your (connect|express|...) application
app.use("/hexo/blog/route", hexoApp);
// some of your codes ...

1.9 - After all previous steps, it's time to run your main application which you added hexo-app-connect to one of it's routes. e.g. if hexo worked well, after running; it should log something like this in your app's terminal:

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

and you have simply succeed; Congratulations !!!

I suggest you read The 'Using Hexo Themes' Section after being succeed.

2. Configurations

There is a _configs.yml file inside of your blog's directory. Add these configuration lines to _configs.yml content:

# Hexo-app-connect
app:
    log: false,
    compress: false,
    header: true,
    serveStatic: false
    route: /

The configs above are default configs, too.

Config Explanations

log : logs some information about hexo state.

compress : whether use the compression package or not.

header : whether set header 'X-Powered-By': 'Hexo' or not.

serveStatic : whether use hexo.load() or hexo.watch() for serving blog.

route : determines that hexo runs on which route of your (connect|express|...) application.

Note: Determining the route in it's configs is SO IMPORTANT; because it can cause your app to not load pages correctly. so be careful about it.

Note: Use the complete route string which hexo-app-connect connects to your (connect|express|...) app in it.

3. Using Hexo Themes

In hexo themes be careful when you use paths to blog's public sources, routes and ...

For Example:

There is a problem in the archive link of hexo's landscape theme.

If you faced a problem like that, use the url_for() helper and the helpers which use url_for, like:

• css()
• js()
• link_to()

to solve that.

Relative Packages

• hexo-app-express
• hexo-server-express

Made with ❤️ for hexo