How to start a blog with Hexo on Ubuntu 14.04

Introduction

Hexo is a static blog framework based on Node.js. With Hexo, you can publish Markdown documents in the form of blog posts. Blog posts and content are processed and converted into HTML/CSS, which comes from default or custom template theme files (much like other static blog generators such as Jekyll and Ghost). All software in Hexo is modular, so you can install and set up exactly what you need.

This tutorial will set up Hexo and support deployments supported by GitHub and Nginx.

Preparation

To follow this tutorial, you need:

• An Ubuntu 14.04 Tencent Cloud CVM with a non-root user with sudo privileges. (You need an Ubuntu** server** with a non-root account that can use the sudo command and the firewall is turned on. Students who don’t have a server can buy it from here, but I personally recommend it You use the free Tencent Cloud [Developer Lab] (https://cloud.tencent.com/developer/labs?from=10680) to experiment, and then [buy the server] (https://cloud.tencent.com/product/cvm?from=10680) after learning to install.)
• Install Git on your server
• Install Node.js on your server
• Install Nginx on your server
• an account on GitHub, which is a Git repository host.

Step 1-Install and initialize Hexo

This initial part contains everything needed to get Hexo up and running on the server.

First, make sure that the system package is up to date.

sudo apt-get update && sudo apt-get upgrade

Several software packages and components make up the Hexo blog framework. Here, we will use the npmNode.js package manager to download the two most basic ones.

The first, hexo-cli is the most important and provides core Hexo commands.

npm install hexo-cli -g

The second hexo-server is a built-in server that can be used to preview and test your blog before deployment.

npm install hexo-server -g 

There are many more packages available; these are just the basic elements needed to get your Hexo blog up and running. You can browse more packages that can be used as part of the Hexo framework in npm search.

Next, we need to set up the basic files for your new blog. Fortunately, Hexo completed all the basic work with one command. All you need to do is provide the path or folder where you want the blog configuration file to reside.

The convenient option is the user's home directory.

hexo init ~/hexo_blog

You will get some output in a second or two:

Output
...
​
INFO  Copying data to ~/hexo_blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!
​
...

Next, go to the directory containing the configuration file.

cd ~/hexo_blog

Then run the above installation command.

npm install

You can ignore any optional dependency warning npm. After a few seconds of processing time, we will get the basic configuration file.

Step 2-Set up the main configuration file of Hexo

Let's take a look at the basic configuration files in the Hexo directory.

ls -l
Output
- rw-rw-r--1 sammy sammy 1483 Jan 1112:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 1112:31 node_modules
- rw-rw-r--1 sammy sammy  442 Jan 1112:30package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 1112:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 1112:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 1112:30 themes

Among all the existing files, the _config.yml file may be the most important. All core settings are stored here, which is the core of the blog. If you need to adjust something in the future, it may appear in this file.

Next, we will gradually carry out some basic customization through _config.yml. Open _config.yml using nano or your preferred text editor.

nano _config.yml 

At the top of the file, you should see the section labeled Site:

...
​
# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:
​
...

The first four lines are the name of your blog, appropriate subtitles, description and author name. You can choose any option you like. Please note that not all Hexo themes display this data, so it is mainly used as related site metadata.

The next two options are language and time zone. The language option uses only [2-letter ISO-639-1 code] (https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes?oldformat=true). By default, the time zone is set to the server's time zone and uses the ["tz database"] (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones?oldformat=true) format. If you decide to change any of them, make sure they use these formats.

Here are some example values:

...
​
# Site
title: DigitalOcean's Hexo Blog  
subtitle: Simple Cloud Hosting, Built for Developers.
description: Deploy an SSD cloud server in55 seconds.
author: Sammy Shark 
language: en 
timezone: America/New_York
​
...

The next section is the URL part. Here, we want to change the URL option. Because we currently don’t have the server’s domain name, we can enter the IP address instead of the url: setting here.

...
​
# URL
## If your site is put in a subdirectory,set url as'http://yoursite.com/child' and root as'/child/'
url: http://your_server_ip
root:/
permalink::year/:month/:day/:title/
permalink_defaults:
​
...

The last option we want to change is default_layout: further down in the writing section. This will create the new post as a draft, so it must be published before it can be displayed on the blog site.

Set it to what draft looks like now, we did the following:

...
​
# Writing
new_post_name::title.md # File name ofnewposts
default_layout: draft
titlecase:false # Transform title into titlecase
​
...

Save and exit the file immediately. At the end of this tutorial, we will briefly return to this file to understand the deployment phase.

Step 3-Create and publish a new post

The process of creating a post (or draft, as we configured earlier) first issues the following command, where first-post is the name of the post you want to publish.

hexo newfirst-post

You should see the following output:

INFO  Created:~/hexo_blog/source/_drafts/first-post.md

Open a new post for editing.

nano ~/hexo_blog/source/_drafts/first-post.md

Each post must set its [front-end content] (https://hexo.io/docs/front-matter.html). Front-matter is a small section of JSON or YAML, used to configure post title, release date, label and other settings. The end of the preceding substance is designated by the first --- or ;;; mark. After things happen, you can write blog posts using Markdown syntax.

Use the following example option of first-post.md in the file to replace the default content to start the post. You can customize them if you want.

title: DigitalOcean's First Post
tags:- Test
 - Blog
categories:- Hexo
comments:true
date:2015-12-3100:00:00---
​
## Markdown goes here.
​
**This is our first post!**

Save and exit the file.

Before we release, the Markdown file just created will remain in ~/hexo_blog/source/_drafts. Visitors on the website will not be able to see any posts in the _drafts folder.

Next, post the information so it will be accessed by visitors.

hexo publish first-post 

This leads to:

INFO  Published:~/hexo_blog/source/_posts/first-post.md

Once we start hosting the blog, the post will now be visible.

Step 4-Run the test server

Now that the previous configuration file is complete, we have prepared an example. Next, we will start the test server.

hexo server

The test server can be forced to render posts in the _drafts folder. To do this, include the -d option when issuing the last command.

Now that we have run the test server, you can visit http://your_server_ip:4000/ through your favorite browser to view your blog. You will see Hexo's predefined "Hello World" test post and the test post we just created.

Press CTRL+C terminal to exit the test server.

The test server is best for previewing changes and additions to the blog. Once you are satisfied with its appearance, you can deploy it on the network.

Step 5-Set up Git deployment

With Hexo, the work we have done so far can be deployed in many different ways. The method in this tutorial is to use Git to store static files, use hooks to forward them, and then use Nginx to host them. However, support for Heroku, Git, Rsync, OpenShift, FTPSync, etc. is provided through additional framework packages.

To continue, you need a Git repository to store the static HTML files generated by Hexo. For the sake of simplicity, we will use the public Git repository provided by GitHub.

Create a new repository named hexo_static (https://help.github.com/articles/creating-a-new-repository/) by following its repository creation steps, on GitHub. Make sure to select the "Public" option and check the "Use readme to initialize this repository" checkbox.

After creating the repository, open the main Hexo configuration file for editing.

nano _config.yml 

At the bottom of the file, there is a section labeled Deployment:

...
​
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type:

Fill in the deploy: option as shown below. Note that the repo line should contain the URL of the Git repository you just created, so make sure to replace your_github_username with your own GitHub account username.

deploy:
 type: git
 repo: https://github.com/your_github_username/hexo_static.git
 branch: master

Save and exit the file.

Because we choose to use Git for deployment, we need to send static tags to the Hexo package of the Git repository.

Use npm to install it.

npm install hexo-deployer-git --save 

You can now test the deployment to the hexo_static repository and provide it with the first Hexo automatic submission by:

hexo generate && hexo deploy

Enter your GitHub authentication details when prompted.

The following is the successful output (or similar) after using these commands. Minus file generation and Git insertion:

To https://github.com/username/hexo_static.git.*[newbranch]      master -> master
Branch master set up to track remote branch master from https://github.com/username/hexo_static.git.
INFO  Deploy done: git

Step 6-Set up Nginx

We will use the basic Nginx web server settings to serve the Hexo blog, because Nginx serves static content very well, and our blog will only contain static files. There are other viable options that can also work normally, such as GitHub pages or web servers such as Apache, but this option specifically ensures some efficiency and personal control over hosting.

First, create a system directory, we will tell Nginx to use for hosting.

sudo mkdir -p /var/www/hexo

Then provide your current Ubuntu users with ownership of these web server system directories.

sudo chown -R $USER:$USER /var/www/hexo

Update permissions based on ownership.

sudo chmod -R 755/var/www/hexo

Open the default Nginx server block for editing.

sudo nano /etc/nginx/sites-available/default

Ignore the areas and lines of the file that have been commented out, and change the active part of the configuration code so that the root directive points to the /var/www/hexo directory.

...

server {
 listen 80 default_server;
 listen [::]:80 default_server ipv6only=on;

 root /var/www/hexo;
 index index.html index.htm;...

Save and exit the file. If you set a domain name for this server in the future, please return to this file and server_name replace the entries in the same block with the new domain name.

Finally, restart the Nginx service for the changes to take effect.

sudo service nginx restart

Step 7-Create Git Hooks

In this step, we link the hexo_static repository to another Git repository, so we can send static HTML files to the web server directory (when triggered).

First, initialize a new empty Git repository (not on GitHub). The sole purpose of this repository is to forward the contents of the hexo_static repository to the web server directory.

git init --bare ~/hexo_bare

Create a new hook file in the hooks directory generated by Git:

nano ~/hexo_bare/hooks/post-receive 

Add the following two lines of code to the file. This specifies the Git working tree (with source code) and Git directory (with configuration settings, history, etc.).

#! /bin/bash

git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

Save and exit the file when finished.

Make this post-receive file executable.

chmod +x ~/hexo_bare/hooks/post-receive

We must now clone the hexo_static deployment repository we created in step 5 to our server. Make sure to replace the username of the next command with your own GitHub account username.

git clone https://github.com/username/hexo_static.git ~/hexo_static

Enter the cloned repository.

cd ~/hexo_static

Finally, add our previous bare repository as a Git remote named live.

git remote add live ~/hexo_bare

Step 8-Create a deployment script

A short shell script can be used to start and trigger the entire deployment process we set here. This means that we don't have to run several Hexo commands individually, nor do we need to use multiple commands to trigger Git hooks.

Go back to our original Hexo blog directory and create a file for the deployment script.

cd ~/hexo_blog 
nano hexo_git_deploy.sh

Paste the following code into the file:

#! /bin/bash
​
hexo clean
hexo generate 
hexo deploy
​( cd ~/hexo_static ; git pull ; git push live master )

Save and exit the file.

The script contains three hexo commands:

• clean deletes all previously generated static files in the public folder.
• generate creates static HTML files from markdown in public folders.
• deploy sends the newly generated static file as a commit to the "real-time" Git repository _config.yml that we defined earlier.

The last line, ( cd ~/hexo_static; git pull; git push live master ) triggers the Git hook and updates the web server hosting directory with our HTML static files.

Once filled out, be sure to save and exit the file.

Make the new deployment script executable to complete this step.

chmod +x hexo_git_deploy.sh

Step 9-Run the deployment script

Run the deployment script we created in the previous step to test the entire deployment process.

. /hexo_git_deploy.sh

Wait for the command and processing to complete, enter any GitHub authentication details during the process. Then, look at the files in the /var/www/hexo directory.

ls /var/www/hexo

20152016 archives  categories  css  fancybox  index.html  js  tags

Your web server directory should now be populated with the blog's website files, which means that accessing the web server through a browser will take you to the blog.

Visit http://your_server_ip/ with your favorite browser to view your blog directly (without using a test server).

To deploy new blog changes in the future, you only need to re-run the hexo_git_deploy.sh script. Remember to use the hexo server or hexo server -d command to test the new post for errors before deployment.

Step 10-Check Hexo's file system (optional)

This section is optional and provides some background knowledge of the rest of the Hexo file system. None of these files need to be changed or changed for this tutorial, but if you want to use them in the future, it is best to know the general purpose of each file.

The layout of files and directories is as follows:

Hexo files and directories├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
| └── _posts
└── themes

node_modules

In this directory, Hexo stores the module npm that you downloaded for use with your blog. At the end of this tutorial, there will be only the packages we downloaded in step 1.

Output
hexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

Some of these unfamiliar modules are bundled together as part of the core software package. There is usually no need to change or delete files here.

Package.json

This JSON file contains our Hexo package configuration and the version Hexo will use for your blog.

If you need to manually update, downgrade or delete packages, you can do it by changing the value here. Usually, if there is a conflict inside Hexo, you only need to perform this operation, which is relatively uncommon.

Bracket

When creating new posts, Hexo can base them on template files in the scaffolds folder.

You must first create template files and place them here to use them. This feature is optional and only needed if you want to repeat the layout of future Hexo posts.

Resources

Posts that you publish and want to be publicly displayed will remain in its _posts. Once generated, the _drafts folder and any other user-created pages will also take effect here.

Most of the Markdown content of your blog is placed in one of the subfolders by Hexo.

Subject

After downloading, the custom theme should remain here. Most themes have their own _config.yml file to save their equivalent configuration settings. For the purpose of this guide, we stick to the default theme.

in conclusion

Hexo is much more than covered in this guide, but it is a good start for building a new blog site. If you want to know more information, Hexo, the document is very concise. Consider installing a [custom theme] (https://hexo.io/themes/) available for Hexo as the next step in developing a blog.

For more Ubuntu tutorials, please go to [Tencent Cloud + Community] (https://cloud.tencent.com/developer?from=10680) to learn more.

Reference: "How to Create a Blog with Hexo On Ubuntu 14.04"