Hexo uses Jenkins to automatically deploy to Aliyun

Install Hexo locally

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
Copy the code

Deploy Hexo using the Github Pages service

The service we use to host blogs is called Github Pages. Github Pages are web Pages that Github provides to individuals, organizations, or projects by deploying to your Github Repository, pushing code and rendering it in real time.

First, you need to have a Github account. Then create a repository named.github. IO to host the web page.

For example, my Github user name is dumingcode, so create a repository named dumingcode.github. After the https://github.com/dumingcode/dumingcode.github.io.git created, we can temporarily don’t tube it, don’t need to warehouse push any of the contents.

Hexo deployment configuration

Next, let’s configure the local Hexo.

In the root directory of the blog, there is a file called _config.yml, which is the main configuration file for the blog. Let’s ignore the rest of the previous part and talk about it later, but let’s look at the final Deployment configuration item first:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:
Copy the code

According to the official documentation, Hexo supports Git, Heroku, Rsync, OpenShift, FTPSync, etc. To deploy Git, you need to install the hexo-deployer-git plugin first: CNPM install hexo-deployer-git –save and edit the configuration file above:

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]
Copy the code

By default, the branch and message fields are pushed to the master branch. I recommend using the sSH-encrypted repository address (see Github’s official document for configuring SSH encryption).

After saving the configuration file, we can deploy the blog to Github by typing hexo g-d into the blog’s directory. Now, everyone can access their blogs at http://.github.io.

Hexo uses third-party templates

After searching for the hexo-theme-bluelake theme, I found it very neat, so I used the following command to install it (go to the blog root directory and execute it).

git clone https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake
cnpm install [email protected] --save
cnpm install hexo-renderer-stylus --save
Copy the code

I have set up the Github personal homepage :dumingcode.github. IO /, welcome to visit.

Hexo is deployed to Aliyun

Although github Pages can be used to publish blogs, as a coder, I still want to have my own domain name blog, but I am too lazy to manually publish a blog. I wanted to automatically publish to both Github and personal websites. Therefore, WE decided to adopt the method of CICD. CICD tool uses open source Jenkins, and Jenkins is also built on aliyun personal server.

Download and run Jenkins

Note that the port uses 8081

mkdir /usr/local/jenkins
wget http://mirrors.jenkins.io/war-stable/latest/jenkins.war
nohup java -jar jenkins.war --ajp13Port=-1 --httpPort=8081 &
Copy the code

Install nginx

Install nginx dependencies

Yum -y install GCC zlib zlib - devel pcre - devel openssl wget openssl devel - http://nginx.org/download/nginx-1.13.10.tar.gz Tar XVF nginx-1.13.10.tar.gz. /configure --prefix=/usr/local/nginx
make
make install
cd /usr/local/nginx/sbin
./nginx -s reload
nginx: [error] open() "/usr/local/nginx/logs/nginx.pid"Failed (2: No such file or direc needed to set nginx.conf. /nginx -c /usr/local/nginx/conf/nginx.conf
Copy the code

Nginx. Conf configuration

Upstream Jenkins {server 127.0.0.1:8081; keepalive 64; } server { listen 80; server_name jenkins.buyasset.com; client_max_body_size 60M; client_body_buffer_size 512k; location / { port_in_redirect on; proxy_pass http://jenkins/; proxy_set_header Host$host:$server_port;
              proxy_set_header        X-Real-IP $remote_addr;
              proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header        X-Forwarded-Proto $scheme; }}Copy the code

You can enter the Jenkins management background by entering Jenkins. Buyasset. Club in the browser through the nginx reverse agent.

Configuration Jenkins

Find the default password in the Jenkins prompt directory, enter the Jenkis domain name, and log in to Jenkins.

Install the Jenkins community recommended plugins

Configuration making

Get sercret text

Log in to Github, go to Github ->Settings->Developer Settings-> Generate new Token, click on the secret text below. Keep secret text in mind. If you forget it, you can only regenerate it.

Making webhooks set

Go to the specified project (Hexo repository) on GitHub –> Setting –> WebHooks&Services –> Add webhook –> enter the IP of the server where Jenkins was just deployed

Github configuration in Jenkins

Configuration is making the Plugin

System Settings — GitHub — Add GitHub Sever

Credentials verified for user UUserName, rate limit: xxx

Create a Freestyle task

General Settings

Fill in the GitHub project URL, i.e. your project home page eg. https://github.com/your_name/your_repo_name
Configure source code management
Build triggers, build environments
build
Build script Replace the build script shown above with the following:

cd/var/www/blog git pull hexo clean hexo g-d
Copy the code

Post-build operation
Before construction, Clone Hexo and pull the hexo initial code into /var/www/blog directory. Later, Jenkins will monitor github push operation and update it automatically once push operation is found. cd /var/www git clone https://github.com/dumingcode/dumingcode.github.io.git blog

Nginx reverse proxy Hexo

Hexo is a static web site, so you can use the nginx reverse proxy as follows:

server
{
    listen 80;
    server_name blog.buyasset.club;
    index index.html index.htm index.php default.html default.htm default.php;
    root  /var/www/blog;  

    #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;
    }

}

Copy the code

Test CICD effect

Go to the local hexo directory, modify the published blog, and execute hexo G-d. Log in to Jenkins and find that Jenkins has obtained the push operation and executed the automatic build task. The following is the Jenkins change record

Site updated: 2018-04-21 13:35:51 (commit: 76f3c53) (details)
Commit 76f3c530d077782fd66a8ca375afaa17cd188286 by duming
Site updated: 2018-04-21 13:35:51
 (commit: 76f3c53)
Copy the code

Refer to the link

Jenkins+Github Continuous Integration Jenkins Best Practices Hexo Automatic Deployment Automatic blog build deployment system based on Hexo

Hexo uses Jenkins to automatically deploy to Aliyun