One, foreword

Hexo is a NodeJs based blog framework that allows us to quickly build a blog system. Hexo uses Markdown (MD) to parse articles and generate static web pages with beautiful subjects in seconds.

Hexo is recommended for three reasons:

  • There are a large number of subjects to choose from
  • Parse articles using MD, which is now the dominant article format
  • Can quickly generate static web pages, low requirements for system performance

This article will cover:

  • Hexo installation
  • Background mode starts Hexo
  • Hexo theme change
  • Build the Hexo category list page
  • Add comments
  • The hexo-admin plugin makes it easier to publish articles

Practice environment of this paper:

  • Ubuntu 16.04

Hexo installation

Setp1: Install the NodeJs environment

  • Download the installation package for the corresponding platform

Enter the url: nodejs.org/en/download… For Windows, you can use XXx. msi to install the software. For Linux, you need to download the installation package and upload it to the corresponding server for subsequent operations.

  • Unpack the

The tar XVF – node – v8.11.4 – Linux – x64. Tar. Xz

  • Setting global variables

Sudo ln/user Node decompression package address /bin/node /usr/local/bin/node

Sudo ln/user Node decompression package address /bin/node /usr/local/bin/npm

After the above configuration, the nodeJS environment is installed, use the command to view the nodeJS version

node -v

Setp2: Install Hexo scaffolding

npm install hexo-cli -g

The so-called “scaffolding” is the installation of the corresponding client, so that it has the ability to operate its own. It might be a bit convoluted to say that, for example, Hexo scaffolding is used to create Hexo framework projects, create new pages, compile Hexo projects, publish and run Hexo project pairs, and scaffolding is used to give them the ability to manipulate themselves.

Setp3: Initialize Hexo

Use the following command:

hexo init blog

cd blog

npm install

Setp4: Start Hexo

hexo s

Hexo S is short for Hexo Server. After normal startup, enter http://localhost:4000/ in the browser

At this point, we can see the Hexo blog we have set up.

Start Hexo in background mode

The above blog has been set up, but when we exit the console, we find that the access cannot be accessed. This is because the command to start Hexo access has been terminated. At this point, we need to start Hexo in background mode.

As with background NodeJs, there are two ways to implement background mode startup:

  1. Run the nohup command of Linux to start it.
  2. Start using a third-party daemon thread, such as PM2.

Let’s implement these two approaches separately.

3.1 Start in NOHUP mode

  • Nohup startup command:

nohup hexo s -p 80 &

exit

-p 80 is the specified port number.

  • Stop command:

killall hexo

3.2 Startup using PM2

Setp1: Install PM2

npm i pm2 -g

Setp2: Write the startup script

Create app.js and place it in the root directory of your blog as follows:

//run
const { exec } = require('child_process')
exec('hexo server -p 80',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})
Copy the code

Setp3: Start the project

Go to the blog root directory and type:

pm2 start app.js

More PM2 commands

pm2 stop all # Stop all apps
pm2 restart all # Restart all applications
pm2 delete all # Delete all apps
pm2 list # View all apps
Copy the code

3.3 summarize

Differences between NOHUP and PM2:

  • Nohup is simpler to use than PM2
  • The PM2 is more powerful than noHUP and provides complete log information to view detailed running status
  • The PM2 provides a management view to facilitate the management and operation of multiple applications
  • Pm2 can set up multiple instances to run NodeJS programs, which can make full use of system resources

Four, theme change

Another great thing about Hexo is that it has a number of themes to use, with the address hexo. IO /themes/

Select a topic you like, take “MaterialFlow” as an example, and the replacement steps are as follows:

Setp1: Download the theme

Access: github.com/stkevintan/… Click Clone or Download => Download ZIP to download the file to the local PC.

Setp2: Copy the theme to the server

Unzip the downloaded file and copy it to the Hexo\ Themes directory.

Setp3: Modifies the configuration file

Find the _config.yml modification in the Hexo root directory:

theme: landscape

for

theme: material-flow

To change the _config.yml file in the root directory to its own information, such as title, author, etc., you can refer to this configuration file:

Github.com/stkevintan/…

Yml file. This file is used to configure the process used, such as classification, tag name order, etc. Find the configuration file:

Github.com/stkevintan/…

Setp4: Restart the project

So far the theme has been changed. If you are using nohup, use “killall hexo” to stop and start the project. If you are using PM2, use “pm2 restart all” to check the new theme.

Build the Hexo category list page

There is no category collection page for Hexo, which requires users to create by themselves. The steps are as follows:

Setp1: Create a category page

hexo new page “categories”

Setp2: Configures navigation by category

Open _config.yml in the theme, not _config.yml in the root directory, and configure it as follows:

Menu: -name: home slug: home URL: / -name: category slug: categories URL: /categoriesCopy the code

Display the categories in the second navigation, as shown below:

Setp3: Modify a template

Open the file Layout /_partial/article.ejs and find

replaces all the contents of the div with the following code: 
<div class="article-entry" itemprop="articleBody"> < %if (page.type === "tags") { %>
		<div class="tag-cloud">
			<div class="tag-cloud-title">
				<%- _p('counter.tag_cloud', site.tags.length) %>
			</div>
			<div class="tag-cloud-tags">
				<%- tagcloud({
					min_font: 12,
					max_font: 30,
					amount: 200,
					color: true,
					start_color: '#ccc',
					end_color: '# 111'
					}) %>
			</div>
		</div>
		<% } else if (page.type === 'categories') { %>
			<div class="category-all-page">
				<div class="category-all-title">
					<%- _p('All categories', site.categories.length) %>
				</div>
				<div class="category-all">
					<%- list_categories() %>
				</div>
			</div>
			<% } else{% > < %if (post.excerpt && index){ %>
					<%- post.excerpt %>
						<% } else { %>
							<%- post.content %>
								<% } %>
									<% } %>
</div>
Copy the code

Setp4: Modify styles

Take the “material-flow” theme as an example, open the file “themes/material-flow/source/less/_article. Less” and add the following styles to the bottom of the file:

/*tag-cloud*/
.tag-cloud {
  text-align: center;
  margin-top: 50px;
}
.tag-cloud a {
  display: inline-block;
  margin: 10px;
}
.tag-cloud-title {
  font-weight: 700;
  font-size: 24px;
}
.tag-cloud-tags {
  margin-top: 15px;
  a {
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: 10px;
    color: #fff;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: relative;
    border-radius: 0 5px 5px 0;
    font-family: Menlo, Monaco, "Andale Mono"."lucida console"."Courier New", monospace; & : hover {opacity: 0.8; } &:before { content:"";
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: -18px;
      border: 9px solid transparent;
    }
    &:after {
      content: "";
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
      position: absolute;
      top: 7px;
      left: 2px;
    }
  }
  a.color1 {
    background: #FF945C;
    &:before {
      border-right-color: #FF945C;
    }
  }
  a.color2 {
    background: #F5C7B7;
    &:before {
      border-right-color: #F5C7B7;
    }
  }
  a.color3 {
    background: #BA8F6C;
    &:before {
      border-right-color: #BA8F6C;
    }
  }
  a.color4 {
    background: #CFB7C4;
    &:before {
      border-right-color: #CFB7C4;
    }
  }
  a.color5 {
    background: #7B5D5F;
    &:before {
      border-right-color: #7B5D5F;
    }
  }
}

/*category-all-page*/
.category-all-page {
  margin-top: 50px;
  .category-all-title {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
  }
  .category-list-item:after {
    content: ' ';
    clear: both;
    display: table;
  }
  .category-list-count {
    float: right;
    margin-left: 5px;
  }
  .category-list-count:before {
    content: 'total';
  }
  .category-list-count:after {
    content: 'Article'; }}Copy the code

The effect is shown below:

After the above configuration is set, there is still a step to set the classification of the article, will be displayed.

Setp5: Sets the article properties

Add the following attributes to the beginning of MD:

-- Title: RabbitMQ on Ubuntu"rabbitmq"
categories:
  - [Java]
  - [MQ]
---
Copy the code

Among them:

  • Title Article title
  • Date Date when the article is published
  • Tag Article tag
  • Categories article categories, multiple independent categories using the format of the code above

Once the article categories are set, all article categories are automatically displayed.

Add comments

This article docking comments for chearsay, chearsay micro SOHU produced, in the industry is widely used, such as 17173, People’s Daily online, China News network call chearsay, the advantage is simple docking, domestic speed is fast, do not need FQ, the disadvantage is that the nested domain name needs to record.

Setp1: Register an open voice account

Visit: changyan.kuaizhan.com/ to register an account, install the Chatterbox bootloader registration app, get the comment installation code, each app is different, where appID and conf are independent, copy the chatterbox comment installation code.

Setp2: Modify the theme configuration

Find the theme under _config.yml and add at the bottom:

changyan:
  on: true
Copy the code

Setp3: Modify the code

Open the file “material-flow\layout_partial\article.ejs”

The < %if (post.comments && config.disqus_shortname){ %>
		<section id="comments">
			<div id="disqus_thread"></div>
		</section>
	<% } %>
Copy the code

To:

The < %if (post.comments && theme.changyan.on){ %>
	<%- partial('comments/changyan', {}) %> <%} %>Copy the code

After making the changes, restart the project.

The comments are as follows:

7. Hexo-admin makes it easier to publish articles

It is fast to use Hexo, but one problem is that every time you publish an article, you have to manually publish it to the server and restart the server. Is there an easy way to input and publish an article directly through the background?

That’s what the hexo-Admin plugin does. It allows you to add posts directly from the background.

Setp1: Install the hexo-admin plugin

npm install –save hexo-admin

Setp2: Start the plug-in

The hexo-admin installation has been completed. Just restart the project and visit http://localhost/admin/ to see the admin background, as shown below:

Setp3: Sets the password

We found that the first login did not have a password, this is not possible, next we need to set a password, click the admin background Settings, as shown below:

After entering the page, enter the user name and password, save the generated account information and copy it to the bottom of the _config.yml file in the root directory, and configure the account information, as shown below:

Restart the service. At this time, we re-visit http://localhost/admin/ and find that it takes effect. We can only enter a normal user name or password to enter the system.

The addition and modification of the article and Jane book is very similar, here is not more description, more details of the use of the user slowly study it.

Eight, summary

So far, we have set up the whole blog system, including interaction with the user a message, if need to reward function, in the article. The ejs article below labeled own WeChat or pay treasure to qr code can, of course, nice blog search function, is also directly support Hexo, need not too much user configuration, So the blogging system has been set up.