How does Alibaba Cloud Server build a Hexo personal blog?

1. Blog structure

To understand the structure of the Hexo blog from building to automatic publishing, we can better understand the operations we perform at each step.
Otherwise, just follow the steps once, but don't know why.

First look at this architecture diagram:

The whole process is to *.md render into a static file locally  , and then push Git to the server, repositoryand the server  git-hooks synchronizes the root directory of the website.

2. The whole construction process

Prerequisite: Alibaba Cloud Server

The first part : server environment construction, including installation  Git , Nginxconfiguration, and git user creation  .

Part 2 : Local Hexoinitialization, including installation  NodeJS , hexo-cliand generating local static website

Part 3 : Use Git to automate deployment and publish blog

3. Server environment setup

3-1. Install Git and NodeJS (CentOS environment)

yum install git
#安装NodeJS
curl --silent --location https://rpm.nodesource.com/setup_5.x | bash -

NodeJS installation can refer to:  Linux install NodeJS

3-2. Create a git user

adduser git
chmod 740 /etc/sudoers
vim /etc/sudoers

Find the following

## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL

Add a line below

git ALL=(ALL) ALL

Change back to permissions after saving and exit

chmod 400 /etc/sudoers

Then set the password of the Git user,

#需要root权限
sudo passwd git

Switch to the git user, create  ~/.ssh folders and  ~/.ssh/authorized_keys files, and give the appropriate permissions

su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys
#然后将电脑中执行 cat ~/.ssh/id_rsa.pub | pbcopy ,将公钥复制粘贴到authorized_keys
chmod 600 ~/.ssh/authorzied_keys
chmod 700 ~/.ssh

Then you can execute the ssh command to test whether you can log in without password

ssh -v git@SERVER

At this point, the Git user has been added

3-3. Nginx installation and configuration

I use the lnmp one-click installation package. There are a lot of nginx installation tutorials, so I won’t go into it. Mainly depends on the nginx configuration.
Find the nginx configuration file and modify the configuration as follows:

server
{
    listen 80;
    #listen [::]:80;
    server_name www.seekbetter.me seekbetter.me;
    index index.html index.htm index.php default.html default.htm default.php;
    #这里要改成网站的根目录
    root  /path/to/www;  

    include other.conf;
    #error_page   404   /404.html;
    location ~ .*\.(ico|gif|jpg|jpeg|png|bmp|swf)$
    {
        access_log   off;
        expires      1d;
    }

    location ~ .*\.(js|css|txt|xml)?$
    {
        access_log   off;
        expires      12h;
    }

    location / {
        try_files $uri $uri/ =404;
    }

    access_log  /home/wwwlogs/blog.log  access;
}

4. Local Hexo program

4-1: Initialize the Hexo blog

First of all to install  hexo-cli, installation hexo-cli requires root privileges, use  sudo run

sudo npm install -g hexo-cli

Then initialize the Hexo program

cd ~/Documents/code
hexo init blog

After the execution is successful, install two plug-ins,  hexo-deployer-git and  hexo-server the functions of these two plug-ins are to use Git to automatically deploy, and a local simple server.

hexo-deployer-git help document
hexo-server help document

cd blog
npm install hexo-deployer-git --save
npm install hero-server

4-2. Generate your first article hello world!

Use  hexo new <文章名称> to create a new article, the command will be .mdplaced in the sources/_postsfolder as a  file  .

hexo new "hello Hexo"
vim sources/_posts/hello-hexo.md

After editing, use hexo gto .mdrender the  file into a static file, and then start hexo-server:

hexo g
hexo server

Now you can open the browser and visit  http://localhost:4000 to view our blog!

5. Automated deployment

5-1: Establish a bare git repository on the server

Create a bare warehouse. The bare warehouse only saves gitinformation Repository. First, switch to the gituser to ensure that the gituser has the ownership of the warehouse. It
must be added  --bare, so that it is a bare warehouse.

su git
cd ~
git init --bare blog.git

5-2. Use git-hooks to synchronize the website root directory

Here we are using  post-receivethis hook, which will be called when git is sending and receiving. In the  ~/blog.git bare library  hooksfolder,
create a new post-receivefile.

vim ~/blog.git/hooks/post-receive

#!/bin/sh
git --work-tree=/path/to/www --git-dir=~/blog.git checkout -f

After saving, give the file executable permissions

chmod +x post-receive

5-3. Configuration _config.yml, complete automated deployment

Then open it  _config.ymland find deploy

deploy:
    type: git
    repo: git@SERVER:/home/git/blog.git    //<repository url>
    branch: master            //这里填写分支   [branch]
    message: 提交的信息         //自定义提交信息 (默认为 Site updated: {
   
   { now('YYYY-MM-DD HH:mm:ss') }})

After saving, try to deploy the "hello hexo" we just wrote to the server

hexo clean
hexo generate --deploy

Visit the server address, you can see the article we wrote "Hello hexo", you only need to write an article later:

hexo new "Blog article name"
···写文章
hexo clean && hexo generate --deploy

The blog will be updated! ~