在Gitee上免费搭建个人博客（GITEE+HEXO+FLUID）

文章未完成

博主原创文章，转载请说明出处，但是不说我也管不了你🏳️

前言

搭建一个个人博客网站相信是许多编程（特别是web编程）初学者都想过且十分想实现的一个目标，因为能够在网络上将自己经验心得分享给全世界本身就是一件很酷的事，就像微信朋友圈一样，不过这个不同的就是有可能在这个“朋友圈”里你发一个博客可能几年都不会有人看见，直接就石沉大海了[狗头]，但是贵在这个朋友圈个人定制性更强，想怎么炫酷就怎么炫酷😎，不是吗[狗头]。问题来了，怎么去搭建呢？肯定第一步得整个服务器呗，三种方式：

个人屋里整个服务器【富哥可以考虑考虑】
网上购买云服务器【阿里云举例，一般新用户100一年，可以99连续续杯两年】
使用第三方的免费云空间【白嫖多是一件美事啊】

没错，接下来有请我们的主角：Gitee pages登场！本文主要是帮助小白学会如何利用Gitee pages搭建一个免费的个人博客网站，同时会推荐Hexo+Fluid博客模板的安装，并给出一些Gitee pages使用细节提醒。注意，在阅读此文章之前你需要掌握以下要求的知识或技能：

稍微了解html、css、js前端基础三件套，即差不多知道是个什么东西就行，能敲上几行更好【预计花费10分钟】
大概了解Git是什么，以及本地电脑已经安装了Git，并能够在本地简单使用Git操作，点击此处前往了解^[1]【预计花费30分钟】
大概了解Gitee是什么^[2]以及Git与Gitee两者之间的关系^[3]【大概花费10分钟】
(可选项)了解Markdown语法，点击此处了解^[4]【大概花费10分钟】

本教程适用于Windows系统

正文

一、Gitee pages简介

前面如果已经了解过Gitee 是什么后，应该就知道可以使用Gitee创建一个仓库，这个仓库(500M空间)就像相当于Gitee给你的一个云盘，只不过这个云盘支持Git服务，Gitee pages服务就是建立在Gitee 仓库上的扩展服务。

先看官方给的说明：Gitee Pages 是一个免费的静态网页托管服务，可以使用 Gitee Pages 托管博客、项目官网等静态网页（和 Github Pages 类似）。目前 Gitee Pages 支持 Jekyll、Hugo、Hexo编译静态资源。【简单来说就是把你的仓库当成静态网页解析，如果有个index.html在仓库一级目录里，直接就可以解析为一个网页展示出来】

关键词：免费、静态网页托管，虽然只能托管静态网页，但是对于博客来说正好合适，并且可以通过一些现成的项目工具使其动起来（一丢丢），Gitee pages博客示例：putik的博客

二、开始搭建一个简单的个人博客页面

2.1 注册Gitee pages账号

如果要使用Gitee pages服务首先得注册一个Gitee pages账号，点此前往注册：https://gitee.com/

2.2 创建代码仓库并开启Gitee pages服务

①注册完账号，登录并进入个人首页，按如图进入创建代码仓库页面

②填写仓库必要信息，仓库名称与路径均为必填项（如何填见③）

③填写完仓库信息后，点击创建完成仓库创建

④创建后会自动进入仓库页面

⑤开启Gitee pages服务

在仓库页面前往：服务-->Gitee pages，到达Gitee pages服务页面，如图，部署分支默认即可，部署目录部分不用填，然后强制使用HTTPS可选可不选，然后选择开启即可：

部署成功后会出现如图一个更新按钮，每次点击更新按钮时，会重新解析你的仓库代码，更新Gitee pages服务为该仓库生成的对应的静态页面(在下面就统称你的博客页面，博客页面地址就是篮圈里面的那个地址)。【注意：即时每次你的仓库代码更新了，但是博客页面并不会自动更新，需要你去服务页面手动更新】【再注：即你的博客页面内容虽然与你的代码内容是对应的，但是你的代码更新了，你的博客页面并不会自动更新，得手动去更新】

2.3 生成一个简单的个人博客页面

点击</>代码回到仓库代码页首页，点击初始化readme文件，正式将仓库初始化为一个支持Git服务的文件夹，初始化成功后仓库代码页变为如下页面：

可以看到多了许多东西，但主要是多了一行操作栏，选择文件-->新建文件，开始创建一个index.html文件(代码见下示例)：

按如图把文件写好，并写好代码后，直接点击提交即可，代码示例：

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>  
  <title>putik-663的博客</title>
</head>
<body>
    <script>
        alert("哈喽沃德！")
    </script>
    <h1>
        哈喽沃德
    </h1>
</body>
</html>

提交成功后再点击</>代码回到仓库代码页首页，可以看到已经多了一个index.html文件：

此时再前往Gitee pages服务页面点击更新按钮，等待完成更新后，直接访问博客地址，出现哈喽沃德即成功部署一个最简答的静态网页。

2.4 通过本地Git更新Gitee仓库

首先确保你已经安装了Git（Git介绍、安装与是使用教程），任意新建一个文件夹，进入文件夹进行Git初始化，若未设置用户名与邮箱使用以下命令设置：

BASH

# git config --list 可以查看是否创建成功
$ git config --global user.name "Your Name"
$ git config --global user.email "[email protected]"
# 把Your Name改成你的昵称；
# 把[email protected]改成邮箱的格式，只要格式正确即可。

2.4.1 Git生成SSH公钥(注意替换邮箱)

BASH

1	`ssh-keygen -t rsa -C [email protected]`

执行命令后按提示输入文件名、密码，密码可以不用填直接enter键跳过也可以：

注意标红处为公钥和私钥文件生成的文件夹地址。

2.4.2 在Gitee中添加公钥

以记事本格式打开pub公钥文件，将其中的公钥复制出来：

在Gitee个人主页-->个人设置-->安全设置-->SSH公钥处，将这段公钥粘贴进去,完成添加：

2.4.3 使用Git操作Gitee^[5]

1)Pull项目【pull意为拉取】 Gitee中打开某个想Pull的仓库，点击克隆/下载，随后在其下的选项中选择SSH，点击网址右侧的复制。回到本地在Git中输入如下指令

BASH

1	`git clone 复制过来的网址`

2)上传项目 在想上传的文件夹根目录右键打开Git Bash Here，输入指令，将文件存入暂存区(注意，add后有个’.’

BASH

1	`git add .`

3)将文件存入本地git仓库

BASH

1	`git commit -m “消息”`

4)查看状态

BASH

1	`git status`

5)上传至云端

BASH

1	`git push -u origin master`

到此即完成了一个简单静态页面的创建与更新，如果想要更复杂美观的页面，也可以通过上传自己编写的前端代码到仓库。较为复杂的博客页面也可以通过这种方式部署，而更新博客页面就可以通过更新仓库代码文件实现。显然，对于一个博客页面其核心是博客文章内容，此刻如何快捷地只更新博客内容是大家都关心的问题。最原始的方式就是在本地先慢慢修改好自己的代码文件，再使用原生的Git命令从本地远程更新Gitee代码仓库，这样做首先是博客代码方面，自己可能会懒得写博客页面的代码，大多数人只关心最核心的博客文章内容产出，不想去关心源码层面；其次是Git操作方面，各式各样的源码文件提交实在是太繁琐。所以，怎么办呢？肯定是用一些现成的、成熟的框架去搭建呗，让我们只用关心文章内容产出，源码什么的或者是怎么更新仓库代码等种种问题都别去操心了，此刻，Hexo他不就来了吗[狗头]✌️。

三、进阶1：使用优秀的博客模板【Hexo】

3.1 什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页^[6]。(Hexo官方文档地址)

3.2 Hexo的安装^[7]

安装Hexo前需要安装Node.js，未安装点此查看教程。

3.2.1 安装 cnpm

当您安装 Node.js 之后，便可以在命令行中通过 node install 命令安装您想要的程序了。但本文推荐使用 cnpm 安装 Hexo，所以需要先通过 npm install 安装 cnpm。

命令: npm install -g cnpm --registry==https://registry.npm.taobao.org 说明: -g 表示进行全局安装，--registry==https://registry.npm.taobao.org 表示使用淘宝镜像安装 cnpm
安装后验证: 在 cmd 中输入命令 cnpm -v, 可查看 cnpm 版本

3.2.2 安装 Hexo

命令: cnpm install -g hexo-cli 说明: -g 表示全局安装，hexo-cli 为所安装的包
安装后验证: 在 cmd 中输入命令 hexo -v, 可查看 hexo 版本

3.2.3 注意事项

建议永远安装最新版本的 Hexo，以及推荐的 Node.js 版本。

Hexo 版本	最低兼容 Node.js 版本
6.0+	12.13.0
5.0+	10.13.0
4.1 - 4.2	8.10
4.0	8.6
3.3 - 3.9	6.9
3.2 - 3.3	0.12
3.0 - 3.1	0.10 or iojs
0.0.1 - 2.8	0.10

3.3 初始化一个Hexo博客

新建一个文件夹，例如blog，在blog文件夹右键Gitee Bash Here：

使用以下命令初始化一个Hexo博客，命名为test：

BASH

1	`hexo init 文件夹名`

等待一会儿，如图生成了一个test文件夹：

进入test文件夹，打开Git窗口(即右键Git bash here)，输入命令hexo g后再输入命令hexo server -port 端口号 ，这里我使用的端口号是5000 ：

浏览器打开http://localhost:5000/，出现Hexo的Hello World页面即代表成功：

3.4 Hexo博客各初始文件说明

见官方文档，我这懒得写了。

3.5 Hexo命令说明

这里指介绍几个重要的，其余可以见Hexo官方文档：

①新建博客文章：

BASH

1	`hexo new [layout] <title>`

[]代表可选项，layout意为选中使用哪个模板，title为文章的题目，例如假如新建了一个diary模板，则hexo new diary "我以diary为模板初始化"意为以diary模板生成一个md博客文件，此时这个模板由于不是三个默认模板之一，生成的文件会放到_post文件夹下。不过大多数我们写文章的时候肯定是先打个草稿，不希望他直接就去_post文件夹里面发布了，所以可以先把文章放到草稿文件夹_draft里，写完了再把它放进_post文件夹里：

BASH

1	`hexo new draft <title>`

BASH

1	`hexo publish draft <title>`

②清除Hexo生成博客文件：

BASH

1	`hexo clear`

这个命令应该是为这种情况服务的：有时手动删除了多个博客源文件（即source文件夹下的文件），又手动新增了多个，这个时候如果使用hexo generate可能会报错，因为内容对不上了，所以此时可以手动删除所有发布用的博客文件，删除后重新生成就行了。

③生成Hexo博客文件：

BASH

1	`hexo generate`

借用source下的博客源文件在public下生成发布博客文件。

④启动本地Hexo博客服务器：

BASH

1	`hexo server --port=4000`

启动本地的Hexo服务器，可以在本地预览自己写的博客，默认端口就是4000。

⑤发布Hexo博客文件到git仓库：

BASH

1	`hexo deploy`

四、进阶2：使用Hexo主题——Fluid

注意，本教程只介绍Fluid的基本配置，更多配置信息请前往Fluid官网查看用户配置手册

4.1 Fluid与Hexo

Fluid是基于Hexo的一款 Material Design 风格的博客主题^[8]，相当于Android里的MIUI，又深度定制了一下，目前本博客就是用的Fluid主题。

4.2 Fluid的安装与更新

①安装方式一：npm安装

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：

1	`npm install --save hexo-theme-fluid`

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml内容复制过去。

②安装方式二：直接解压安装

下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

文件安装完成后，如下修改 Hexo 博客目录中的 _config.yml：

YAML

1 2	`theme: fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改`

③更新：同安装方式，npm就npm update --save hexo-theme-fluid，解压缩也一样的，不过如果自己修改了一些代码的话，那就需要自己手动解决了。

4.3 Fluid的配置

全局页面：博客标题、顶部大图、网页统计

文章页：首页封面图、顶部大图、日期、评论

关于页：创建、关于信息

五、进阶3：细节优化

5.1 博客的自动部署

github action

5.2 开通博客文章评论区

valine+leancloud无后端评论系统

5.3 设置博客访问量统计

busuanzi

六、注意事项

七、常见问题

生成博客文章时，时间总是慢几个小时

参考文献

杨根杰，Git是什么？可以用来做什么？如何使用？[EB/OL]，https://zhuanlan.zhihu.com/p/99313784，2019-12-25 ↩︎
Gitee，Gitee帮助中心[EB/OL]，https://gitee.com/help/articles/4105 ↩︎
有没有人告诉你，git、gitee、github、gitlab 区别以及功能[EB/OL]，https://blog.csdn.net/ios_xumin/article/details/118361335，2021-06-30 ↩︎
码农充电站，如何使用Markdown 编写文档[EB/OL]，https://zhuanlan.zhihu.com/p/136440613，2020-04-26 ↩︎
M870 RUSH RUSH，Git连接Gitee的环境配置及使用方法[EB/OL]，https://blog.csdn.net/weixin_43736652/article/details/116028009，2021-04-22 ↩︎
Hexo官网，Hexo文档[EB/OL]，https://hexo.io/zh-cn/docs/ ↩︎
codingpath，2022 Hexo 博客搭建和使用教程(Windows)[EB/OL]，https://zhuanlan.zhihu.com/p/547520780，2022-07-30 ↩︎
Fluid，Hexo Fluid用户手册[EB/OL]，https://hexo.fluid-dev.com/docs/ ↩︎

计算机杂项 > 工具的安装、配置或使用

#原创 #待完成 #免费 #博客搭建 #Gitee Pages #教程

虎牙自动送每日礼物(虎粮) 上一篇

Gitee，还是算了下一篇

在Gitee上免费搭建个人博客（GITEE+HEXO+FLUID）

前言

正文

一、Gitee pages简介

二、开始搭建一个简单的个人博客页面

2.1 注册Gitee pages账号

2.2 创建代码仓库并开启Gitee pages服务

2.3 生成一个简单的个人博客页面

2.4 通过本地Git更新Gitee仓库

2.4.1 Git生成SSH公钥(注意替换邮箱)

2.4.2 在Gitee中添加公钥

2.4.3 使用Git操作Gitee[5]

三、进阶1：使用优秀的博客模板【Hexo】

3.1 什么是Hexo

3.2 Hexo的安装[7]

3.2.1 安装 cnpm

3.2.2 安装 Hexo

3.2.3 注意事项

3.3 初始化一个Hexo博客

3.4 Hexo博客各初始文件说明

3.5 Hexo命令说明

四、进阶2：使用Hexo主题——Fluid

4.1 Fluid与Hexo

4.2 Fluid的安装与更新

4.3 Fluid的配置

五、进阶3：细节优化

5.1 博客的自动部署

5.2 开通博客文章评论区

5.3 设置博客访问量统计

六、注意事项

七、常见问题

参考文献

2.4.3 使用Git操作Gitee^[5]

3.2 Hexo的安装^[7]