在gitlab上搭建hexo博客

发表于 | 分类于 |
字数统计: 1.8k | 阅读时长 ≈ 7

本文介绍了gitlab上搭建hexo博客的过程，包括利用submodule将主题和文章从hexo中独立出来，分别建立一个仓库，通过子模块的方式来管理文章和主题，并利用gitlab的hook 机制，对推送到文章和主题仓库内容及时编译部署。

在gitlab上搭建hexo博客

在使用了三个月的gitlab后, 因为它的无限私有仓库以及集成ci的特性决定把基地迁移到gitlab(gitlab.com)上. 本文记录了博主在gitlab上面重构hexo博客的过程以及当中遇到的几个坑.

阅读声明

以下是阅读本文的读者需要事先了解的知识:

初始化项目

  1. 安装好nodejs和hexo

  2. 在gitlab上新建username.gitlab.io空仓库

  3. 在本地新建博客目录

    1
    blog

    , 并初始化:

    1
    2
    $ cd blog
    $ hexo init

  4. 在博客目录中, 初始化git仓库并添加

    1
    gitlab

    远程仓库:

    1
    2
    $ git init
    $ git remote add origin [email protected]/username/username.gitlab.io.git

以子模块管理文章与主题

本部分作为博主使用git子模块管理的学习, 也可以将文章和主题的仓库直接克隆到blog目录下, 作为博客仓库代码的一部分管理起来.

获取主题并修改远程仓库信息

博主使用的是material主题, 从github上fork到gitlab1的步骤如下:

  1. 从github获取主题到blog/themes目录:

    目录:

    1
    2
    $ cd blog/themes
    $ git submodule add [email protected]/viosey/hexo-theme-material.git   # 以submodule的方式导入主题

  2. 在gitlab上创建主题远程仓库, 作为主题项目的私有分支

  3. 修改本地主题仓库的远程仓库信息:

    1
    2
    $ git remote rename origin upstream     # 设置为upstream方便更新主题
    $ git remote add origin [email protected]/username/your-hexo-theme.git

  4. 添加主题的私人配置文件_config.yml, 修改后推送到gitlab的主题仓库:

    1
    2
    3
    $ vim _config.yml
    $ git commit -am "add private configuration"
    $ git push orgin master

    设定主题的gitlab远程仓库的目的是要让gitlab ci能够追踪并从获取最新的提交内容. 设置文章的远程仓库也是这个道理.

获取文章仓库

因为文章原本就存了一份在gitlab上, 所以直接从gitlab添加子模块即可. 注意因为git的submodule在克隆的时候只会获取游离的HEAD指针(也就是本地提交的修改不会被追踪), 所以克隆完之后要checkout到文章仓库的主要分支, 理由同上.

1
2
3
4
5
$ cd blog
$ rm -rf source     # 删除原有的示例文件
$ git submodule add [email protected]/username/your-hexo-article.git source    # 子模块将克隆到source文件夹
$ cd source
$ git checkout master

修改.gitmodules

**这是博主用submodule后最坑的地方!**在设置gitlab ci后, 想要一直通过pipline却遇到了以下的报错:

1
2
3
4
5
Submodule 'source' (https://gitlab-ci-token:[email protected]/huangjj27/hexo-blog-articles.git) registered for path 'source'
Submodule 'themes/material' (https://gitlab-ci-token:[email protected]/huangjj27/hexo-theme-material) registered for path 'themes/material'
Cloning into '/builds/huangjj27/huangjj27.gitlab.io/source'...
error: no such remote ref ff9fe17c92b1bf3a6c4f279d39100b568ab983fc
Fetched in submodule path 'source', but it did not contain ff9fe17c92b1bf3a6c4f279d39100b568ab983fc. Direct fetching of that commit failed.

后来翻找了带submodule项目的gitlab-ci配置文档, 才发现漏了修改.gitmodules. 该文件的修改方法如下:

  1. 将与主项目在同一个gitlab服务器的项目设置为相对路径
  2. 与主项目不在同一个gitlab服务器的项目设置为使用https协议获取

因为博主的文章(source)与主题(theme/material)都和博客一样托管在gitlab.com上, 所以最后的submodules是这样子的:

1
2
3
4
5
6
[submodule "themes/material"]
path = themes/material
url = ../hexo-theme-material
[submodule "source"]
path = source
url = ../hexo-blog-articles.git

这里只提升一级目录是因为blog, hexo-theme-material, hexo-blog-articles三个仓库都在gitlab.com/huangjj27子域下.

提交更改到gitlab上

博客项目的配置到这里已经完成了一大半啦~ 接下来, 我们要将项目更改提交到我们的的远程仓库中即可~

1
2
$ git commit -am "useable blog"
$ git push -u origin master     # 远程仓库是空的呢~

配置gitlab ci实现(半)自动化部署博客

在项目目录中添加.gitlab-ci.yml文件, 内容如下:

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
image: node:14.17.0

cache:
  paths:
    - node_modules/

before_script:
  - git submodule update --remote # 获取submodule字库最新提交
  - npm install hexo-cli -g
  - test -e package.json && npm install
  - npm install hexo-renderer-swig
  - npm install hexo-generator-searchdb
  - npm install hexo-wordcount
  - hexo generate 
#  - npm ls --depth 1


variables:
  GIT_SUBMODULE_STRATEGY: recursive # 拉取 Submodule 内容
  
pages:
  script:
     - hexo generate # --debug
  artifacts:
    paths:
       - public
  rules:
     - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
     
after_script:
  - cp google2f6ba82e4695a73b.html public

然后在gitlab博客项目里面, 跑一下pipline, 即可部署成功!

配置搜索引擎索引

配置搜索引擎索引能够让博客的曝光度提升。对于技术人员来说，配置Google索引会让博客显得高大上，但对于国内大部分技术人员由于墙的原因仍然使用百度进行技术类搜索，配置百度的搜索索引也许能获得更大的曝光度。

google

  1. 在Google搜索中输入site:yourname.gitlab.io, 如下图所示：
    输入site:huangjj27.gitlab.io

  2. 点击第一个链接，进入到Google搜索控制台，添加属性，选择属性资源为网站，并填入站点域名：
    添加站点属性

  3. 下载验证文件, 并放到站点源码仓库目录下:
    下载验证文件
    放好验证文件

  4. 修改 .gitlab-ci.yml 文件, 提交并部署站点:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    pages:
        script:
            - hexo generate
            - cp googleXXXXX.html public    # add validation file to artifact file
        artifacts:
            paths:
                - public
        only:
            - master

  5. 继续完成验证的步骤. 完成后, 可以看到如下界面:
    完成验证

现在, 在谷歌搜索一下博客名字,那么就能看到自己的博客啦~
搜索站点

百度

步骤与上面类似, 只要将验证文件复制到输出目录public, 在部署站点后进行验证即可.

生成站点地图

站点地图用于让搜索引擎快速生成索引. 配置方法如下:

  1. 为hexo站点添加站点地图生成器插件依赖:

    1
    2
    3
    4
    5
    6
    // package.json
    {
        "dependencies": {
            "hexo-generator-sitemap": "^1.0.0"
        }
    }

  2. 添加插件配置到 _config.yml 中:

    1
    2
    3
    4
    plugins:
        hexo-generator-sitemap
    sitemap:
        path: sitemap.xml

  3. 更新依赖, 并生成站点, 测试`sitemap.xml是否有生成:

    1
    2
    3
    4
    $ npm install
    $ hexo generate
    $ ls public |grep sitemap.xml
    sitemap.xml

利用material主题

在material主题1.5版本中, 官方的配置模板增加了html标签配置搜索引擎的方式,

配置评论系统

这部分集成于material主题中, 最后采用了比较简单的gitment进行配置, 详细步骤请参考这里, 本文说一下大家都比较关心的gitment根据URL配置生成标签的问题, 只需要修改该主题配置, 使得博客在回调gitment数据的时候只采用path参数来生成标签:

1
2
3
4
5
6
7
8
9
// themes/material/layout/_widget/comment/gitcomment/enter.ejs

<script>
    var gitment = new Gitment({
        id: <%= theme.comment.gitment_post_id %>, // 可选。默认为 location.href
       // some other settings
    })
    gitment.render('container')
</script>

配置文件:

1
2
3
4
5
// themes/material/_config.yml

comment:
    # useable settings
    gitment_post_id: window.location.pathname

最后生成的标签效果如图:
生成标签效果