Jocodoma

Joco's Tech Blog

0%

Setup Hexo on GitLab

Posted on Edited on In , Disqus:
Symbols count in article: 7.7k Reading time ≈ 7 mins.

Previously in Setup Blog using Hexo on GitHub, I talked about how to setup Hexo on GitHub. Today, I’m going to do the same but on GitLab. One of the main reasons for GitLab is because that Continuous Integration (CI) is built-in to GitLab. Therefore, the only thing I need to do for deployment is just push the code to GitLab, and then everything else will be magically done by GitLab and CI. The rest of the post will show how I setup Hexo and CI on GitLab.

References:
StaticGen: https://www.staticgen.com
Hexo: https://hexo.io
Hexo Docs: https://hexo.io/docs/
NexT theme: https://github.com/theme-next/hexo-theme-next
Introduction | Hexo - Static Site Generator | Tutorial
GitLab: https://about.gitlab.com/
GitLab Pages: https://about.gitlab.com/product/pages/
部署 HEXO 到 GitLab Page
HEXO 搭配主題 next 基礎配置教學

Requirements

My Environment

Setup Node.js

  • Install Node Version Manager (NVM)
    The way I installed Node.js on MacBook is to use Node Version Manager (NVM).

    1
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

    To verify that nvm has been installed, do:

    1
    command -v nvm

  • Install Node.js and NPM

    npm (originally short for Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.


    In order to install hexo-cli, we will need npm.

    1
    2
    nvm install --lts=carbon
    nvm install-latest-npm

References:

GitLab Page

It should be fairly easy to setup your GitLab Pages by following their instructions. They also have an example for setting up Hexo on GitLab.

Hexo

Setup Hexo

Install Hexo

1
npm install -g hexo-cli

Setup Hexo and Your Site

1
2
3
4
cd <YOUR_WORKSPACE>
hexo init <YOUR_HEXO_SITE>
cd <YOUR_HEXO_SITE>
npm install

Setup Git

After Hexo site is initialized locally, let’s setup the git for the Hexo site. In my case, the URL of Hexo repo is https://gitlab.com/jocodoma/site-hexo.

1
2
3
4
5
6
cd <YOUR_HEXO_SITE>
git init
git remote add origin https://gitlab.com/jocodoma/site-hexo.git
git add .
git commit -m "initial hexo commit"
git push -u origin master

Setup NexT Theme

We will checkout the latest version (v7.2.0 as of 2019/06/05) of NexT theme as a git submodule. The reason we do this way as a git submodule is because that by doing this we don’t have to do version control of the NexT source code and also it will be easier for us to update the version of NexT later. In case if there’s any change we want to make in NexT source, we can easily do so by creating git patch files and apply the custom changes to the NexT source. Therefore, we don’t have to check in the entire source of NexT to the repository, but just git submodule with the patch files.

1
2
3
4
5
cd <YOUR_HEXO_SITE>
git submodule add https://github.com/theme-next/hexo-theme-next themes/next
cd themes/next/
git checkout tags/v7.2.0
cd ../../

To update NexT theme later, please refer to Update NexT Theme.

After installed NexT, you may add NexT options in site’s _config.yml.

References:

Changes for Google Adsense

In order to have Google Adsense working properly, some of the files need to be modified in NexT source code. I created a git patch file for the changes made for Google Adsense as here. This will be useful later when setting up .gitlab-ci.yml.

To create a git patch, stage all the files (do git add), and then run git diff --cached.

1
git diff --cached > 0001-google-adsense-files-NexT-v7.2.x.patch

To apply a git patach, do

1
git apply 0001-google-adsense-files-NexT-v7.2.x.patch

Reference: https://nithinbekal.com/posts/git-patch/

Modify Config File

You can find my full Hexo config settings with NexT options here. Below is just an example:

_config.yml
1
2
3
4
5
6
title: Jocodoma
author: Joseph Chen
timezone: America/Los_Angeles
url: https://blog.jocodoma.com
root: /
theme: next

Reference:
Hexo doc - Configuration: https://hexo.io/docs/configuration.html

Hexo Server

You can start a Hexo server on local machine to review your changes before publishing to the server.

1
2
cd <YOUR_HEXO_SITE>
hexo server

By default, your website will run at http://localhost:4000. The -p option can be used to set a different port.

1
hexo server -p 5432

Setup CI for Hexo Deployment

Unlike Hexo on GitHub, we do not need to install hexo-deployer-git mentioned in Setup Hexo Deployment. Instead, the Hexo deployment will be done by CI on GitLab.

Here’s my .gitlab-ci.yml. You can also find it here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
image: node:8.16.0

variables:
  GIT_SUBMODULE_STRATEGY: recursive

cache:
  paths:
    - node_modules/

before_script:
  - npm install hexo-cli -g
  - test -e package.json && npm install

pages:
  script:
    - ./apply_ads_patch.sh
    - hexo clean && hexo generate
    - cp ./ads.txt public/
    - cp ./robots.txt public/
  artifacts:
    paths:
      - public
  only:
    - master

Below is what happens in the apply_ads_patch.sh script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/usr/bin/env bash
# Joseph Chen

THEME_DIR="themes/next"
ADS_PATCH_FILE="0001-google-adsense-files-NexT-v7.x.patch"

# Apply the patch for Google Adsense
cd ${THEME_DIR}
cp ../../$ADS_PATCH_FILE ./

echo -e "[INFO]: Applying ads patch ..."
git apply $ADS_PATCH_FILE
rm $ADS_PATCH_FILE

cd ../../
echo -e "[INFO]: NexT theme and Google Adsense deployment is done !!!"

The final step is to make sure you commit the code and push back to remote repo. After few minutes, you should be able to see your Hexo blog on your GitLab page, which in my case is https://tech.jocodoma.com. Yay!!

Plugins

Here are some plugins that I use for Hexo blog.

Update

Update NVM

In case if you need to upgrade your NVM, you can do:

1
2
3
4
5
pushd "$NVM_DIR"
git fetch --tags origin
git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
. "$NVM_DIR/nvm.sh"
popd

References:

Update node

1
2
3
4
5
nvm ls  # check the installed version
nvm ls-remote --lts  # check available versions on remote server
nvm install --lts=carbon  # node v8.16.0
nvm uninstall OLD_VERSION  # optional
nvm install-latest-npm
1
2
3
4
5
# Some other options
nvm ls
nvm use node
nvm use node --version
nvm alias default node  # set the default node

Update Hexo Dependencies

1
2
cd <YOUR_HEXO_SITE>
npm update

Update NexT Theme

  1. List all available updates:
    1
    2
    3
    cd <YOUR_HEXO_SITE>/themes/next/
    git fetch
    git log --no-walk --pretty="%h %d %s" --tags --abbrev-commit --decorate=full
  2. Select the version you want to update:
    1
    git checkout tags/v6.x.x
    Here’s my script to check and update NexT theme.