Hexo blog optimizes access speed with continuous integration and deployment practices

The original blog: weiyigeek. Top / 2019/9/3 78….

0 x00 preface

Recently, I read @Tualatrix Chou’s article about using jsDelivr to optimize website access speed. Inspired by this, I built a static blog using Hexo blog framework and hosted it using Github Page, although with Cloudflare’S CDN to speed it up. But in some cases it’s not as fast as direct access, so it’s better than nothing;

We first said that the optimization of the original ideal to improve the speed of access to the site, basically the entry point is nothing more than the optimization of the front and back end of the access performance, according to my actual situation, want to say that my blog is used in front of github page building problems do not go out of the back end;

To take a look at the site speed before I optimized it (really horrible), add the request load time using the Network panel tool of Chrome Developer Tools:

• DOMContentLoaded (6.21 s)

From the figure we can see that the loading of static resources is from github above all the speed is really, from which we need to solve the problem of image resources, font resources, CSS resources, JS resources and other access requests connection;

---

0x01 Optimization method

Common ways to optimize site speed (for access requests that include foreign resources)

• npmjs + jsDelivr
• github + jsDelivr

1.npmjs + jsDelivr

• 1) Create an NPMJS account: Static resources of the website can be put on the nPMjs.org website as a form of NPM package. If we need to register an account: nPMjs.org;
• 2) Create and publish a custom NPM package, create a directory, and place a file named package.json with two simple lines:

{
  "name": "imtx"."version": "1.0.0"
}
Copy the code

Put imtx.js and imtx.css in it, and then execute NPM publish to publish an NPM package named imtx.

• 3) Use jsDelivr to reference the package and wait until the NPM package is published and available online

The resource files for the # site are accessed via jsDelivr, a globally accelerated CDN
https://cdn.jsdelivr.net/npm/[email protected]/imtx.js
https://cdn.jsdelivr.net/npm/[email protected]/imtx.css
Copy the code

Github + jsDelivr we can also use this way, compared to NPMJS slightly more complex configuration, using the static resource files used in the blog can use jsDelivr CDN for accelerated use and very simple;

• 1. Create a project Blog on Github and store static resource files such as index.js and index.css
• 2. Assume the access path of the projecthttp://github.com/weiyigeek/blog
• 3. Use CDN to accelerate the path of accessing project resources on Github

https://cdn.jsdelivr.net/gh/weiyigeek/blog/index.js
https://cdn.jsdelivr.net/gh/weiyigeek/blog/index.css
Copy the code

3. Hexo Permalink_defaults allows you to set the default values of permalink_defaults for permalink_defaults, instead of a string of Chinese character urls.

Where to configure:

• hexo _config.yml

# notice :pageid key point
permalink: :year/:i_month/:pageid.html
permalink_defaults:
  pageid: en     
Copy the code

• The article head

---
  title: Hexo blog optimizes access speed with continuous integration and deployment practices
  pageid: 378
---
Copy the code

The batch persistent links shell script is executed in your source/ _POST directory:

# increment by number
export number=0
find /blog/source/_posts -name *.md > /tmp/all.md
while read line
do
  Insert on line 3
	sed -i "3i\  pageid: ${number}" $line
	let number++
done < /tmp/all.md
Copy the code

0x02 Optimized real operation

Our blog framework uses Hexo and is accessed via Github Page, so we need to modify the configuration and code locally. For example, we use Hexo Theme By Nayo Theme;

Add jsdeliVR CDN access to all static resources used in the blog, CSS/JS/ fonts/images;

#\themes\nayo\layout\_partial\head.ejs<! -- <%- css('nayo.min') %>  -->
<script src="https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/nayo.min.css"></script>   
  
#themes\nayo\layout\layout.ejs<! -- <%- js('nayo.bundle')%>            -->
<script src="https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/nayo.bundle.js"></script>    

#themes\nayo\source\nayo.min.css
@font-face {
font-family:iconfont;
src:url(https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/fonts/iconfont.6239.eot);
src:url(https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/fonts/iconfont.6239.eot?#iefix) format("embedded-opentype"),
url(https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/fonts/iconfont.e69a.woff) format("woff"),
url(https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/fonts/iconfont.7c23.ttf) format("truetype"),
url(https://cdn.jsdelivr.net/gh/WeiyiGeek/weiyigeek.github.io/fonts/iconfont.32d1.svg#iconfont) format("svg")
}

#themes\nayo\_config.yml
Copy the code

After deployment, check the access speed effect after modification:

[root@WeiyiGeek F:\blog]# hexo d -g
Copy the code

Additional Remarks :[23 April 2020 23:51:19]

• JsDelivr full site hosting conversion scripts

The rule is to replace github.com with cdn.jsdelivr.net/gh and remove /blob/master from the absolute path to the repo file
GitHub rul: https://github.com/ohmyzsh/ohmyzsh/blob/master/tools/install.sh
jsDelivr url: https://cdn.jsdelivr.net/gh/ohmyzsh/ohmyzsh/tools/install.sh

#! /bin/bash
#data: 2020-03-31
#author: muzi502
#GitHub rul: https://github.com/username/project/blob/master/tools/install.sh
#jsDelivr url: https://cdn.jsdelivr.net/gh/username/project/tools/install.sh
Set -xue #set -xue
if [ "$2" = "wget" ] || [ -z $2 ];then
echo -e "#DownURL : The $1"
wget $(echo The $1 | sed 's/raw.githubusercontent.com/cdn.jsdelivr.net\/gh/' \
               | sed 's/github.com/cdn.jsdelivr.net\/gh/' \
               | sed 's/\/master//' | sed 's/\/blob//' )
elif [ "$2" = "curl" ];then
echo -e "#DownURL : The $1"
curl $(echo The $1 | sed 's/raw.githubusercontent.com/cdn.jsdelivr.net\/gh/' \
               | sed 's/github.com/cdn.jsdelivr.net\/gh/' \
               | sed 's/\/master//' | sed 's/\/blob//' )
else
  echo -e "\e[33m#Usage: $0 github.com/WeiyiGeek/peoject [wget|curl]\e[0m"
fi
Copy the code

Reference sites:

• Imtx. Me/archives / 28…
• Chi. Miantiao. Me/make – a – CDN -…

---

0x03 Hexo CI/CD

Description: It is convenient to use Hexo to blog about your experience and problems, but after each change, you need to upload the modified files to Github or Gitee via Git. At the same time, you need to use hexo D-G to generate static files of the blog and then upload them to Github page. Since hexo needs to be used in accordance with the NPM environment on the machine, it is very inconvenient when the computer is changed. Therefore, WE built GitLab to realize the continuous integration and deployment of Hexo static pages.

Environment Description:

• Gitlab: 12.9.2
• Operating system: CentOS7
• System installed: Gitlab-runner (12.9.0)/docker-CE/docker-compose/git, etc

Main installation environment refer to this blog article:

• Gitlab installation process: Gitlab installation and basic use. Md
• Gitlab-runner (12.9.0): Configuration and use based on Gitlab Continuous integration foundation. Md

Step1. Open git on the local computer, add a new gitlab remote repository to the blog project and upload the code as follows (how to create a project in gitlab – refer to baidu);

#Blog Project -> e:\githubProject\blog
$ git remote add gitlab [email protected]:WeiyiGeek/blog.git
$ git add .
$ git commit -m "Init inner gitlab"
$ git push -u gitlab master
Enumerating objects: 5906, done.
Counting objects: 100% (5906/5906), done.
Delta compression using up to 4 threads
Compressing objects: 100% (5085/5085), done.
Writing objects: 100% (5906/5906), 16.27 MiB | 14.65 MiB/s, done.
Total 5906 (delta 3672), reused 1508 (delta 681)
remote: Resolving deltas: 100% (3672/3672), done.
remote:
remote: ========================================================================
remote:
remote:               Welcome To WeiyiGeek Gitlab Code Repository
remote:
remote: ========================================================================
remote:
To gitlab.weiyigeek.top:WeiyiGeek/blog.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'gitlab'.
Copy the code

Step2. Register Runner in gitlab-ci as described in detail in the above article, and add the project to Runner. Note that Excuter is the shell used here, of course, you can also use docker;

Step3. Install git and SSH on CentOS7 (gitlab-runner) to avoid entering yes when logging in to the service for the first time.

# Check git version[gitlab-runner@initiator blog]$git --version git version 2.22.0If the version is lower than 2.x.x, it is recommended to update itYum install http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-2.noarch.rpm sudo yum install - y git git --versionStrictHostKeyChecking can be changed to no
$vim /etc/ssh/ssh_config
Host *
        ......
        StrictHostKeyChecking no  # key

Reconfigure the SSHD service
systemctl restart sshd   


## [here is a docker deployment can be set for reference only]
## Write the key and configure the ~/.ssh/config file
# before_script:
# - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
# - eval $(ssh-agent -s)
# - ssh-add <(echo "$SSH_PRIVATE_KEY")
# - mkdir -p ~/.ssh
# - '[[ -f /.dockerenv ]] && echo -e "Host *\\n\\tStrictHostKeyChecking no\\n\\n" > ~/.ssh/config'
Copy the code

Step4. Copy the public key/key authenticated on Github and gitee to /home/gitlabp-runner/. SSH

Pay attention to permissions after uploading[gitlab-runner@initiator. SSH]$chmod +600 * [gitlab-runner@initiator. SSH]$ls-alh 8.0K drwxr-xr-x April 19 12:54. DRWX ------. 5 Gitlab-Runner Gitlab-Runner 140 April 19 14:47.. -rw-------. 1 gitlab-runner gitlab-runner 2.6K 4月 19 12:54 ID_RSA-rw -------. 1 gitlab-runner gitlab-runner 573 4月 19 12:54 id_rsa.pubCopy the code

Step5. Test whether you can connect to github and gitee warehouse;

[gitlab-runner@initiator .ssh]$ ssh -T [email protected]
Failed to add the host to the list of known hosts (/home/gitlab-runner/.ssh/known_hosts). # This error is because we did not create the known_hosts file (does not affect)
Hi WeiyiGeek! You've successfully authenticated, but GitHub does not provide shell access.'

[gitlab-runner@initiator .ssh]$ ssh -T [email protected]
Hi WeiyiGeek! You've successfully authenticated, but GITEE.COM does not provide shell access.'
Copy the code

Step6. Compile CI/CD hexo blog. Gitlab-ci. yaml and docker-comemage. yaml

#.gitlab-ci.yaml
#Author: WeiyiGeek
#Desc: Hexo Blog Continuous integration and deployment
stages:
  - build
  - deploy

# Use caching mechanism to cache node.js download dependent directory;
cache:
  untracked: true
  paths:
    - node_modules/

hexo_build:
  stage: build
  cache:
    untracked: true
    paths:
      - node_modules/
    policy: pull
  script:
   - docker stop blog
   - docker-compose -v
   - chmod +x ./startHexo.sh
   - docker-compose up -d

hexo_deploy:
  stage: deploy
  script:
    - sleep 70
    - cp db.json ./public/ && cd ./public
    - git init
    - git remote add origin [email protected]:WeiyiGeek/weiyigeek.github.io.git
    - git remote add gitee [email protected]:WeiyiGeek/WeiyiGeek.git
    - git add . && git commit -m "Gitlab-ci blog"
    - git push -f -u origin master
    - git push -f -u gitee master
    - docker stop blog
Copy the code

docker-compose.yaml

Alpine node mirroring is used here
version: "3.0"
services:
  blog:
    image: mhart/alpine-node:latest
    container_name: blog
    labels:
      - "com.example.author=weiyigeek"
      - "com.example.description=blog"
      - "com.example.department=IT"
      - = "com. Example. Release v1.0"
    ports: 
      - "8080:4000"
    volumes:
      - "$PWD:/opt/blog/"
    working_dir: /opt/blog/
    entrypoint: /opt/blog/startHexo.sh build 996
    command: /opt/blog/startHexo.sh start
Copy the code

startHexo.sh

#! /bin/sh
if [ The $1= ="build" ];then
  # Avoid permission issues Create a Gitlab-Runner user in alpine mirror as well
  addgroup -S gitlab-runner && echo -e "WeiyiGeek1\nWeiyiGeek1" | adduser gitlab-runner -u $2 -G gitlab-runner -D -S -s /bin/ash
  npm config set unsafe-perm true && npm config set registry https://registry.npm.taobao.org \
  && npm install -g hexo-cli --save \
  && npm install --save 
fi

pkill hexo && npm install hexo --save
hexo clean && chown -R gitlab-runner:gitlab-runner ./  && su gitlab-runner -c "hexo generate" && su gitlab-runner -c "hexo server"
Copy the code

Supplementary notes:

• Docker-comemage. yaml specifies the 996 parameter to the script. This parameter is the uid value of the gitlab-runner user on the gitlab-runner host. Since the gitlab-CI execution user is gitlab-runner, you need to modify it according to the value of gitlab-runner on your machine.

[gitlab-runner@initiator .ssh]$ grep "gitlab-runner" /etc/passwd
gitlab-runner:x:996:497:GitLab Runner:/home/gitlab-runner:/bin/bash
Copy the code

• In YAML we set onesleep 120 This prevents pipe blocking and build failures because the Deploy phase of the hexo Geneater may occur when the build is completed and the CI/CD fails before the environment is generated.
• Git command: local branch forces push to remote code base executiongit push -f origin masterDue to remotegithub|gitee PageWe don’t need the warehousegit pullOnly need togit pushSo here we force push to prevent the build from failing when running in Runner;
• Cache directory view:/home/gitlab-runner/cache/WeiyiGeek/blog/default-24/cache.zip

Step7. Verify that we write the gitlab-ci /CD file.gitlab-ci.yaml

Step8. Upload the changed file to Gitlab again, and then it will automatically trigger the CI/CD assembly line. We can also check it in Gitlab-CI.

Step9. Check the details of gitlab-runner execution and docker image execution in the job;

Terminal # 1
docker logs --tail 100 -f blog

# terminal 2
watch -x 'll'
Copy the code

Step10. At this point, the automated integration and deployment of Hexo based on Gitlab is complete. Of course, you can also remove the docker stop blog from deploy and directly access our Hexo blog.

---

Problem into the pit

Problem 1: The gitlab-runner failed to pull the Git repository

Running with gitlab-Runner 12.0.1 (0e5417A3) on autobuild-02 qyhAY53y Using Shell executor Running with gitlab-Runner 12.0.1 (0e5417A3) on autobuild-02 qyhAY53y Using Shell executor... Running on xxxxx.novalocal... Fetching changes with git depthset to 50...
Reinitialized existing Git repository in /home/gitlab-runner/builds/qyhAY53y/0/tangaoxiong/ci-hotupdate-demo/.git/
fatal: git fetch-pack: expected shallow list
fatal: The remote end hung up unexpectedly
ERROR: Job failed: exit status 1
Copy the code

Solution: Install a later version of Git. This section uses CentOS7 as an example.

Yum install http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-2.noarch.rpm sudo yum install - y git git --versionCopy the code

---

WeiyiGeek Blog – In order to reach the distance, every step must be taken.

This article source Blog site (friend chain exchange please mail me yo):

• Weiyigeek. Top # Domestic access is slow
• Blog. Weiyigeek. Top # updates frequently
• Weiyigeek.geitee. IO # Domestic access may not be updated in time

Please pay attention to WeiyiGeek public account for more study notes and articles.