How to build this blog

Posted on In Views: Word count in article: 4.6k Reading time ≈ 4 mins.

OS

Ubuntu 22.04.3 LTS

Install Gitea

See How to deploy Gitea

Install Hexo on local and server

I am using Mac so the process is similar on local and server.

  1. Install Git

  2. Install nodejs and npm using nvm

    1
    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

    Then restart your terminal and verify nvm command using command -v nvm

    Download the latest nodejs and npm by:

    1
    2
    nvm install node # "node" is an alias for the latest version
    nvm use node # using the latest version node in all shell

  3. Install Hexo

    1
    npm install -g hexo-cli

The following config only need set in local as the git will sync them.

Get start on Hexo

1
2
3
mkdir blog
cd blog
hexo init

Install nexT theme

1
2
3
npm install hexo-theme-next
cp node_modules/hexo-theme-next/_config.yml _config.next.yml # make a copy of next config so that you can have a reference.
vim _config.yml # edit the global config
1
2
3
4
5
6
7
theme: next # set the theme. And also there are a lot of things need to set.
theme_config: # this is the best way to edit theme config in which way can avoid config lose when upgrade.
  cache:
    enable: false
  scheme: Pisces
  darkmode: false
  ...

Install sitemap

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
vim _config.yml
1
2
3
4
5
6
7
8
plugins: 
  hexo-generator-baidu-sitemap
  hexo-generator-sitemap

baidusitemap:
    path: baidusitemap.xml
sitemap:
    path: sitemap.xml

Enable visitors and reading counting

1
vim _config.yml
1
2
3
4
5
6
7
8
9
theme_config:
  busuanzi_count:
    enable: true
    total_visitors: true
    total_visitors_icon: fa fa-user
    total_views: true
    total_views_icon: fa fa-eye
    post_views: true
    post_views_icon: far fa-eye

Enable image click to zoom

1
vim _config.yml
1
2
theme_config:
  fancybox: true

Initiate some new page

1
2
3
4
hexo new page tags 
hexo new page categories
vim source/tags/index.md
vim source/categories/index.md

Both of them are like:

1
2
3
4
5
6
7
---
layout: page
date: 2023-09-19 11:01:24
type: "tags"
comment: "false"
---

Edit the template

All of your template are storaged in ~/blog/scaffolds

1
2
cd scaffolds
vim post.md # create your post template
1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
comments: false
categories: 
tags: 
excerpt: 
lang: en
---

Start your writing

1
2
cd blog
hexo new post "your post name"

Deploy your blog on server automatically via Gitea and hooks

  1. create a new repository on your gitea and link it in your local directory.

    1
    2
    cd blog
    git remote add origin your_username@your_gitea_server:your_usernaem/Hexo.git # change the url to your git repo url

  2. create a sh script in local for git hook to run.

    1
    2
    cd blog
    vim deploy.sh
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    #!/bin/bash

    file_log=deploy.log
    file_fifo=run.fifo
    rm -f "$file_log" "$file_fifo"
    mkfifo $file_fifo
    cat $file_fifo | tee -a $file_log &
    exec 3>&1
    exec 4>&2
    exec 1>$file_fifo
    exec 2>&1

    gbError="\033[1;31m[ERROR]\033[0m"
    gbWarning="\033[1;33m[WARNING]\033[0m"
    gbInfo="\033[1;32m[INFO]\033[0m"
    gbGood="\033[1;32m[GOOD]\033[0m"

    current_time=$(date "+%Y-%m-%d %H:%M:%S")
    echo -e "\n <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< $current_time >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> \n"
    echo -e "$gbInfo Start to build and deploy hexo blog...\n"

    hexo clean
    hexo generate
    # hexo deploy

    if [ $? -eq 0 ]; then
        echo -e "\n$gbGood Successfully built and deployed hexo blog!"
    else
        echo -e "\n$gbError Faild to deploy hexo blog, please check it!"
    fi

    printf "\015"
    exec 1>&3
    exec 2>&4
    rm -f "$file_fifo"

  3. log into your sever and change work path to your git repository hook directory.

    1
    2
    3
    cd /var/lib/gitea/data/gitea-repositories/doublefire.chen/hexo.git/hooks/
    cd post-receive.d/
    vim post-receive
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    #!/bin/bash

    gbError="\033[1;31m[ERROR]\033[0m"
    gbWarning="\033[1;33m[WARNING]\033[0m"
    gbInfo="\033[1;32m[INFO]\033[0m"
    gbGood="\033[1;32m[GOOD]\033[0m"

    echo -e "\n$gbInfo Hexo blog post-receive git hook is running...\n"

    bare_repo=/var/lib/gitea/data/gitea-repositories/doublefire.chen/hexo.git # your git location
    cloned_repo=/home/git/hexo # your temp clone location
    blog_dir=/var/www/blog # your blog location

    rm -rf $cloned_repo
    git clone $bare_repo $cloned_repo

    cd $cloned_repo
    chmod +x deploy.sh
    ./deploy.sh

    if [ $? -eq 0 ]; then
        rm -rf ${blog_dir}/*
        cp -rf public/* ${blog_dir}/
    fi

  4. After writing, commit and push your changes.

    1
    2
    3
    git add .
    git commit -m "make some commit"
    git push origin main

Install needed plugin manually

Though config file contains many function, some of them are usable only after installing essential plugin.

Install symbols count plugin

1
npm install hexo-symbols-count-time --save

Install search tool plugin

1
npm install hexo-generator-searchdb --save

Reference:

  1. 使用 Gitea + Git Hook 实现 Hexo 博客源码托管与持续集成

  2. Hexo official document