Hexo+Gitee(码云)搭建静态博客网站

本文最后更新于:2024年3月25日 中午

直接注册和使用当下比较流行的博客网站比如csdn, oschina, 博客园等等,觉得不是自己专属,而且还有很多广告。选择一款开源或免费的CMS(内容管理系统),自己买云主机和域名搭建博客,费钱又费时。有时我们只是希望有一个功能不太复杂,自己专属的或者看起来自己专属的(至少没有一堆广告)博客网站来写写和分享自己的文章。不需要花费太多的时间和钱,除非你的博客和文章已经足够热门。基于以上的期望,本文将介绍如何使用Hexo搭建静态博客网站,并将其发布到GITEE(码云)免费提供的静态网页空间里。

Hexo是什么

Hexo是一款免费的用来快速搭建静态博客网站的框架。支持插件机制,简单又不失强大。Hexo是基于Node.js开发的,提供了一组命令用来创建和管理博客应用,创建和管理博客文章,将博客应用和文章发布成静态博客网站。Hexo使用Markdown语言来写博客,方便、快捷,不需要什么额外的排版工具就能使你的文章布局看起来很美观。下图是Hexo博客网站的结构:

Gitee是什么

Gitee(码云 gitee.com)是国内的一款基于Git的代码托管和协作开发平台,和GitHub, GitLab属于同一类型的产品。同GitHub和GitLab相比,Gitee具有以下几点优势:

  • 支持免费的私有Git代码仓库
  • 在国内,不需要科学上网,访问速度快

Gitee平台也提供了免费的静态页面托管服务“码云Pages”,可以用来托管博客,项目官网等静态网页。“码云Pages Pro”是这个服务的高阶收费版,支持发布代码仓库中的某个目录,支持自定义域名。

要详细了解Gitee的概念和使用,可以参考Gitee的官方在线帮助文档:https://gitee.com/help

本文将会在Gitee上创建Git代码仓库管理Hexo博客应用的代码和静态博客网站,同时将静态博客网页托管到“码云Pages”。

从零开始搭建专属博客

介绍完Hexo和Gitee后,明白了它们的概念和用途。下面我们就从零开始完整地搭建一个自己专属的博客。

安装必备的软件

  • 安装Node.js
    • Mac上安装
    • Linux上安装
    • Windows上安装
  • 安装Git客户端
    • Mac上安装
    • Linux上安装
    • Windows上安装

安装Hexo

运行以下命令安装Hexo(Hexo命令行)到Node.js的全局空间:

1
npm install -g hexo-cli

Hexo是用Node.js开发的,所以它以npm包格式发布。

创建一个新的博客应用

  1. 依次执行以下shell命令创建一个缺省的博客应用:

    1
    2
    3
    hexo init hexo-test-blog
    cd hexo-test-blog
    npm install

    博客应用的文件结构:
    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    │   ├── draft.md
    │   ├── page.md
    │   └── post.md
    ├── source
    │   └── _posts
    │   └── _drafts
    └── themes
    │ └── landscape

    • _config.yml
      博客站点配置文件。
    • package.json
      博客应用引用的第三方Node.js包。
    • scaffolds
      脚手架是用来快速创建博客页面的模板。有三类模板,“文章”,“草稿”和“页面”。脚手架不是最终博客页面显示的模板,显示是由当前主题的layout文件夹中的模板负责。
    • source
      博客文章的存放目录。分为“_posts”和“_drafts”两个子目录,分别存放正式文章和草稿文章。
    • themes
      Hexo博客的主题。缺省安装的主题是“landscape”。
  2. 执行以下命令构建博客应用,生成静态博客网站

    1
    2
    npm intall
    hexo generate
  3. 执行以下命令启动一个本地http服务查看静态博客网站

    1
    hexo server

    在浏览器中输入http://localhost:4000打开博客网站。

  4. 设置一些“应用配置”(_config.yml)

    这里将根目录下的配置文件”_config.yml“称为”应用配置“以便与后面的“主题配置”区分看来。”主题配置“是位于博客应用的主题根目录下的配置文件,名字也是”_config.yml“。

    • title: 若一拾得

    • subtitle: 若一不一,知之不知

    • description:

    • keywords: DevOps, Infrastructure As Code(IAC), CI/CD, Operation, Monitor, Python

    • author: 若一

    • language: zh-Hans

    • timezone: Asia/Shanghai

    • url: http://www.ruokiy.com

    • root: /

    • permalink: :year/:month/:day/:title/ => 文章页面的永久链接

    • permalink_defaults:

      可以参考Hexo的官方文档了解更多的Hexo命令。

为博客应用安装新的主题

Hexo自带的主题“landscape”看起来平平,不够简洁也不够富丽,所以大部分人安装和初始化完Hexo博客应用后,接下来的一步就是安装配置自己喜欢的主题。下面就以以简洁著称的“NexT”主题为例,介绍安装和配置主题的步骤。

“NexT”主题在GitHub上,地址为https://github.com/theme-next/hexo-theme-next

注意:GitHub上还有很多“NexT”的fork版, 上面的地址是官方最新的版本。https://github.com/iissnan/hexo-theme-next是“NexT”的一个老版本。

安装步骤

  1. 克隆“NexT”主题到博客应用的themes目录

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  2. 修改“应用配置”使用“NexT”主题

    • theme: next

对“NexT”主题的一些配置

这个段落加上后面的对接第三发系统部分将介绍一些常用的配置。如果需要更多的设置,可详细浏览“应用配置”和“主题配置”中的每一个可更改的配置,并参考对应的文档,或者Google、Baidu来了解配置的作用,分析是否能满足你的要求。

  • 去除页脚中的有关“NexT”的信息和链接

    编辑“主题配置”,将“footer|powered|enable”,“footer|powerer|version”,“footer|theme|enable”以及“footer|theme|version”都设成“false”。

  • 添加“about”和“tags”页
    Hexo缺省支持这两个类型的页面。
    (1) 执行下面的命令,在根目录下的source目录中分别创建“about”和“tags”文件夹

    1
    2
    hexo new page about
    hexo new page tags

    (2) 编辑“根目录/source/tags/index.md”,在头部加上“type: tags”

    1
    2
    3
    4
    5
    6
    ---
    title: tags
    date: 2018-08-17 14:57:19
    type: tags
    comments: false
    ---

    (3) 编辑“主题配置”,将“menu|about”和“menu|tags”打开

  • 设置博客版面样式
    也就是博客网站的样式,比如一列或者两列。可以通过“主题配置”中的“scheme”来设置。

  • 开启博客首页文章自动摘录,以及摘录字数限制
    编辑“主题配置”,将“auto_excerpt|enable”设成“true”,设置“auto_excerpt|length”为指定的摘录字数。

    根据描述,你也可以用符号“<!-- more -->”来精确控制自动摘录的结束点。

对接第三发系统完善博客应用

由于Hexo产生的是静态博客网站,没有自己的独立数据库,所以很多功能需要利用第三方服务或者插件来完成。

评论系统

如果不能科学上网的话,基本上不太可能使用国外的评论系统比如Disqus,Hypercomments,LiveRe等,要么访问速度慢,要么被墙。而国内可用的第三方评论系统也不是很多,多说和网易云跟帖已经关闭,畅言需要提供你的网站ICP备案号,否则只有15天的试用期。经过比较,发现Valine是一个比较轻量级的评论系统,速度快,不需要网站备案(说不定以后需要,先用着再说!)。

如果非要尝试畅言的话,可以参考这个博客文章https://blog.csdn.net/qq_32518231/article/details/78080184

给你的博客应用设置Valine评论系统的步骤:
(1) 在LeanCloudhttps://www.leancloud.cn上注册一个账号;

博客的评论将存储在LeadCloud中。

(2) 进入控制台,创建一个开发版的应用;

(3) 点击进入这个应用,并进入设置|应用key页面获取APP ID和APP KEY;

(4) 修改主题配置,将valine|enable设为true,valine|appid设为上一步获取的APP ID,valine|appkey设为上一步获取的APP KEY。

需要将你的静态博客发布到线上才会看到文章末尾的valine评论模块

文章统计

  • 添加“文章字数”和“文章平均阅读时间”统计。

    (1) 在博客应用的根目录执行以下命令安装“hexo-sysmbols-count-time”插件

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

    (2) 修改应用配置添加以下配置加载“hexo-symbols-count-time”插件

    1
    2
    3
    4
    5
    symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true

    (3) 修改主题配置中的以下配置

    1
    2
    3
    4
    5
    6
    symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: true
    awl: 4
    wpm: 275

社交分享

添加模块https://github.com/theme-next/theme-next-needmoreshare2获得博客文章社交分享的功能。

(1) 执行以下命令安装needmoreshare模块

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
注意,这里一定得是克隆到“source/lib/needsharebutton”目录,名字不能错。

(2) 修改“主题配置”“needmoreshare2”的子选项开启社交分享功能

博客搜索

(1) 在博客应用的根目录安装插件https://github.com/theme-next/hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

(2) 在“应用配置”中添加以下配置开启博客搜索功能

1
2
3
4
5
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

部署静态博客网站到码云(Gitee)静态页面空间

  1. 在码云上创建一个与你账号同名的Git代码仓库,比如”ruokiy”;

    在创建时选择用README初始化仓库,这样创建出来的代码仓库缺省会带有master分支

  2. 安装插件hexo-deployer-git

    1
    npm install hexo-deployer-git --save
  3. 在“应用配置”中添加一下配置

    1
    2
    3
    4
    deploy:
    - type: git
    repo: https://gitee.com/ruokiy/ruokiy.git
    branch: master

    注意,最终deploy过程是将产生的静态博客网站文件提交到新创建的Git代码仓库的master分支上,所以做deploy的机子上需要能够写访问Git代码仓库。这里是通过https协议访问Git代码仓库的,所以你需要在deploy的机子上,也就是装有Git客户端的机子上设置以下的Git配置:
    git config –global credential.helper store
    尝试手动克隆一次代码仓库,根据提示输入用户名和密码,这样你的用户名和密码就会被缓存到机子上了。之后的访问都不要用户名和密码了。

  4. 在博客应用的根目录执行以下命令完成静态博客文件的上传

    1
    2
    hexo clean
    hexo deploy
  5. 如下图,在码云上点击刚创建的代码仓库页面,点击菜单“Service|Gitee Pages”,在左侧选择“master”分支,点击“create”按钮

不到一分钟,你的静态博客网站就生成了。可以拷贝生成的网址输入到浏览器打开你的博客了,同时你也可以把这个网址分享给你的朋友,或者放在你的个人简介中。

最后一公里 - 将博客应用的代码托管到码云

这里会用到Git submodule的概念。


Hexo+Gitee(码云)搭建静态博客网站
https://www.mikesay.com/2018/08/17/setup-blog-hexo-gitee/
作者
Mike
发布于
2018年8月17日
更新于
2024年3月25日
许可协议