我使用Hexo和Gitee搭建了自己的博客，以下是我的搭建过程。

准备工作

默认在Win10-64位系统以上工作，如果是Win7系统可能出现不支持新版的node.js等诸多问题，如果你的系统是Win7的，那么建议使用旧版本的node.js（最后一个支持win7的nodejs版本是13.14）和Hexo，此外，下文提到的maupassant主题是基于新版本的node.js开发的，所以该主题不支持旧版本的node.js，如果需要使用主题请下载与自己node.js版本合适的主题，查看对应主题手册进行配置。

安装node.js

  • nodejs，建议安装长期支持版，安装过程直接选择默认选项，点击下一步直至安装完成

安装Git

下载Git安装包，按默认选项一直点击下一步直至安装完成即可。

安装好Git后，选择一个合适的位置创建一个文件夹如D:\Projects ，打开刚刚创建好的文件夹，在空白地方点击鼠标右键选择”Git Bash Here”打开Git Bash命令窗口
下面使用Git Bash安装和初始化Hexo

安装Hexo

下面按顺序一条条执行命令：

1
2
3
4
5
6
7
8
9
10
# 全局安装
npm install hexo-cli -g
# 查看hexo版本
hexo -v
# 初始化一个Hexo项目
hexo init hexoBlog #hexoBlog为自定义名称
# 打开项目
cd hexoBlog #hexoBlog就是刚刚的名称
# 安装项目依赖
npm install

安装完成后文件夹下会多出一个hexoBlog（刚刚自定义的名称）的文件夹，该文件夹就是Hexo博客的项目文件夹。
如果以上命令没有出错，那么下面就可以运行Hexo服务打开Hello World页面了

1
2
# 启动Hexo服务
hexo server

此时Git Bash窗口会提示“Hexo is running at http://localhost:4000”

注册码云账号并进行实名验证

如果想要使用码云的静态网页功能来搭建自己博客就必须通过实名认证才能访问，当然也可以使用github，github是不需要认证的，不过github的访问并不稳定，很多地区甚至无法访问，所以我这里使用了码云。

  1. 注册码云账号Gitee
  2. 点击右上角个人头像，点击账号设置，在账号信息旁点击实名认证
  3. 实名认证要求拍摄上传四张照片，分别是：身份证人像面、身份证国徽面、手持身份证人像面、手持身份证国徽面。

    身份证照片一般没问题，不过手持身份证照片不容易通过

    1. 手臂必须在镜头内 2.拍摄时手指不能遮挡身份证信息（最好用拇指和食指捏住身份证上下边缘） 3.身份证信息必须清晰可见（身份证可以离镜头近点，对焦对在身份证上）

码云仓库配置

  1. 码云主页点击右上角头像旁边的加号，新建仓库
  2. 输入仓库名称（建议与用户名一致，是用户名不是昵称，用户名可以在个人页面昵称下方查看@xxx，xxx就是自己的用户名）
  3. 输入路径，也与用户名一致
  4. 点击创建
  5. 创建完成后将仓库设置成开源

如果你想你的博客首页访问地址不带二级目录，如ipvb.gitee.io，你需要建立一个与自己个性地址同名的仓库，如 https://gitee.com/ipvb 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后，就可以以 https://ipvb.gitee.io 进行访问了。

使用Git连接码云Gitee

设置全局用户名和邮箱：

1
2
3
4
5
6
git config --global user.name "yourname" # yourname是自己的Gitee用户名
git config --global user.email "youremail" # email是注册时填的邮箱

# 查看设置的用户名和邮箱是否正确
git config user.name
git config user.email

创建SSH密钥，以下命令会基于你的邮箱生成一对私钥和公钥，将私钥填入Github或Giee就可以不用密码访问Github或Giee仓库。

1
ssh-keygen -t rsa -C "youremail"

如果你的系统是win7的，执行该命令大概率会出错，此时需要去下载安装OpenSSH，一般win10以上会自带OpenSSH

如果命令执行成功，那么在C:\Users\用户名\.ssh 文件夹下会生成两个文件分别是id_rsa和id_rsa.pub，用记事本打开id_rsa.pub。
打开Gitee，点击右上角头像，点击设置进入设置页面，在侧边栏中的安全设置里点击SSH公钥，自定义输入标题，将id_rsa.pub中的文本全部复制到公钥中点击确定。
回到Git Bash，输入以下命令查看是否能正常连接到Gitee：

1
ssh -T [email protected]

修改Hexo配置

打开项目根目录下的配置文件\hexoBlog\_config.yml，填入博客地址和推送仓库地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#......省略

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://username.gitee.io #这是Gitee中给的地址，username为自己的用户名
root: /

#......省略

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://gitee.com/username/username.git #这是Gitee中仓库的地址，username为自己的用户名
  branch: master

将博客项目推送到Gitee

当你在本地修改配置、更换主题、发布文章后都需要执行下面的命令来将本地的项目推送到Gitee远程仓库中

1
2
3
4
5
6
# 清空已经存在的hexo网站文件
hexo clean
# 重新生成hexo网站文件
hexo generate
# 推送到Gitee仓库
hexo deploy
  • 如果出现ERROR Deployer not found: git的错误，这是由于缺少hexo-deployer-git插件造成的，执行下面的命令安装后重新推送即可
1
npm install hexo-deployer-git --save

更新静态页面

推送完成后你会发现你的Gitee仓库出现了一些新的文件和推送的提示信息。

此时点击进入仓库，点击“服务”下拉菜单，选择”Gitee Pages“，部署分支选择master，部署目录不填，点击启动即可。

启动后会提示已开启 Gitee Pages 服务，后面的链接即是你的博客链接。

更换主题

如果以上配置都完成了，那么可以尝试换一个自己喜欢的主题，这里是Hexo官方推荐的主题，下面以maupassant为例：

  • 下载主题并安装主题所依赖的插件
1
2
3
4
5
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
# 如果上面克隆主题仓库的代码出错，也可以下载zip后解压到Hexo项目根目录下的themes中，将主题文件夹名称改为maupassant
npm install hexo-renderer-pug --save  
npm install hexo-renderer-sass --save  
#以上代码在Hexo项目的根目录中执行

  • 修改Hexo配置_config.yaml使主题生效

    将theme项改为对应的主题文件夹名称，我使用maupassant

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: maupassant

  • 配置主题

    在主题文件夹下有一个_config.yaml的文件，该文件是主题的配置文件

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
google_search: false ## 使用谷歌搜索, true/false.
baidu_search: true ##使用百度sou's, true/false.
swiftype: ## swiftype是一个站内搜索工具，可以不填
self_search: false ## 使用基于jQuery的本地搜索引擎, true/false.
google_analytics: ## 谷歌跟踪id, e.g. UA-42425684-2
baidu_analytics: ## 百度跟踪id, e.g. 8006843039519956000
microsoft_clarity: ## 微软跟踪id, e.g. zg2ctuea9j
fancybox: true ## 是否启用fancybox图片灯箱效果，true/false.
show_category_count: false ## 是否显示侧边栏分类数目.
toc_number: true ## 是否显示文章中目录列表自动编号.
shareto: false ## 是否使用分享按鈕，需要安装hexo-helper-qrcode插件使用.
busuanzi: false ## 是否使用不蒜子页面访问计数
wordcount: false ## 是否使用hexo-wordcount文章字数统计
widgets_on_small_screens: false ## 是否在移动设备屏幕底部显示侧边栏.
canvas_nest:
  enable: true ## 是否使用canvas_nest.js动态背景
  color: "46, 204, 113" ## RGB颜色, e.g. "100,99,98"
  opacity: "0.3" ## 背景透明度, e.g. "0.7"
  zIndex: "-1" ## 背景叠层, e.g. "-1"
  count: "150" ## 背景效果数量, e.g. "150"
donate:
  enable: false ## 是否启用捐赠按钮.
  github: ## GitHub 链接, e.g. https://github.com/Kaiyuan/donate-page
  alipay_qr: ## 阿里云支付二维码图片链接, e.g. /img/AliPayQR.png
  wechat_qr: ## 微信支付二维码图片链接, e.g. /img/WeChatQR.png
  btc_qr: ## 比特币支付二维码图片链接, e.g. /img/BTCQR.png
  btc_key: ## 比特币key, e.g. 1KuK5eK2BLsqpsFVXXSBG5wbSAwZVadt6L
  paypal_url: ## Paypal支付链接, e.g. https://www.paypal.me/tufu9441
post_copyright:
  enable: false ## 是否在每篇文章后显示版权信息.
  author: ## 作者名称, e.g. tufu9441
  copyright_text: ## 版权信息, e.g. The author owns the copyright, please indicate the source reproduced.
love: false ## 是否在任意点击处出现桃心
plantuml: ## 是否使用PlantUML生成UML图表, 必须安装 hexo-filter-plantuml.
  render: "PlantUMLServer" ## 本地或PlantUML服务器
  outputFormat: "svg" ## 输出格式: svg/png
copycode: true ## 是否为代码块启用一键复制功能.
dark: false ## 是否使用夜间模式切换功能
totop: true ## 是否使用返回顶部小火箭图标
external_css: false ## 是否加载外部CSS文件, 如果是需要在主题文件夹source/css下创建"external.css"文件
post_content_length: 180 ## Set the length of the post summary displayed on home page when no description written.

# 自定义页面及菜单，依照已有格式填写。填写后请在Hexo项目根目录下的source目录下建立相应名称的文件夹，并包含index.md文件。
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: tags
    directory: tags/
    icon: fa-tags
  - page: history
    directory: history/
    icon: fa-book

widgets: ## 选择和排列希望使用的侧边栏小工具: search, info, category, tag, recent_posts, recent_comments and links.
  - search
  - info
  - category
  - tag
  - recent_posts
# 侧边栏关于博主的一些信息
info:
  avatar: /img/avatar.jpg #头像
  discription: 好久不见。 #简介
  # 相关链接
  outlinkitem:
    - name: envelope
      outlink: mailto:[email protected]
      message: Email
    - name: github
      outlink: https://gitee.com/dianwind
      message: Gitee
    - name: rss
      outlink: /atom.xml
      message: RSS
# 工具栏中的友情链接
links:
  - title: site-name1
    url: http://www.example1.com/
    src: https://www.example1.com/favicon.ico
    desc: XXX's Blog
  - title: site-name2
    url: http://www.example2.com/
    src: https://www.example1.com/favicon.ico
    desc: YYY's Blog
  - title: site-name3
    url: http://www.example3.com/
    src: https://www.example3.com/favicon.ico
    desc: ZZZ's Blog
# 工具栏中的重要历史时间点
timeline:
  - num: 1
    word: 2023/04/16-博客搭建完成

  • 设置网站图标

    将favicon.ico放在主题目录的source文件夹下，建议的大小：32px*32px，可以使用pngico转换图标格式。

  • 文章摘要

    首页默认显示文章摘要而非全文，可以在文章的front-matter中填写一项description:来设置你想显示的摘要，未设置自动截取文章第一段作为摘要。下面这些放在文章mk文件开头的就是front-matter

1
2
3
4
5
6
7
---
title: 标题
date: 时间
tags: 标签
categories: 分类
description: 摘要
---

  • 添加页面

    在Hexo根目录下的source目录下建立相应名称的文件夹，然后在文件夹中建立index.md文件，并在index.md的front-matter中设置layout为layout: page。如果设置的是标签页面，将页面的layout设置为layout: tagcloud即可。若需要单栏页面，就将layout设置为 layout: single-column。

  • 文章目录

    在文章的front-matter中添加toc: true即可让该篇文章显示目录。

  • 语法高亮

    要启用代码高亮，请在Hexo目录的_config.yml中将highlight选项按照如下设置：

    1
    2
    3
    4
    5
    6
    7
    highlight:
      enable: true
      line_number: true
      auto_detect: true
      tab_replace: ''
      wrap: true
      hljs: false

  • 数学公式

    要启用数学公式支持，请在Hexo根目录的_config.yml中添加：

    1
    mathjax: true

    并在相应文章的front-matter中添加mathjax: true，例如：

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 何为向量？
    date: 2023-04-16
    tags: 向量
    categories: 数学
    description: 摘要。
    mathjax: true  
    ---

    数学公式的默认定界符是$$...$$和\\[...\\]（对于块级公式），以及$...$和\\(...\\)（对于行内公式）。

    但是，如果你的文章内容中经常出现美元符号“$”, 或者说你想将“$”用作美元符号而非行内公式的定界符，请在Hexo目录的_config.yml中添加：

    1
    mathjax2: true

    而不是mathjax: true。 相应地，在需要使用数学公式的文章的front-matter中也添加mathjax2: true。