使用hexo+gitee搭建个人博客网站

前言

作为一名刚入社会的小程序员，在学校的时候就经常看到前辈们推荐要搭建一个自己的个人博客，不管是对于自己技术的积累还是日后的面试都有着不错的效果。彼时的我并没有理解这个做法的意义，当然时至今日也不是很理解……此前的我遇到技术上的问题亦或是其他值得记录的内容，更加倾向于放到简书、CSDN这些网站上去，感觉这跟自己搭建一个博客网站并没有多大不同，反而更加的便捷，这次是因为家里有一些事情需要回来处理，趁此机会，花了两天时间，借鉴了很多前辈的经验，成功依靠hexo+gitee搭建了自己的个人博客，由于没有太过深入研究，也只是搭建了简单的功能，所以只能给朋友们说一下我的搭建过程，希望能对大家有所帮助。

后续会将之前的笔记整理慢慢搬到博客上，至于后续是多久，别问，问就是拖延症晚期。

背景

首先介绍下自己的技术选型，博客选择了hexo来搭建，我也不知道为什么，我看别人推荐的。反正又快又好看还支持markdown，对于我这种基础用户来讲，很够用。当前hexo的默认主题可能不是那么的美观，所以我们大多需要选择一个自己喜欢的主题再去进行配置，在此我选择的是ICARUS，当然这个看个人主观选择，还有其他热门的主题像是Next、Matery等，朋友们挑选自己喜欢的即可（不同主题的配置还是有差异的，后边我只会说下我选择的主题的配置）。

至于博客放在哪儿的问题，也是看个人选择，因为我没有准备买服务器和域名，所以我选择gitee而不是github的原因就是一个访问速度快（不过gitee免费版不能自动更新内容，每次博客更新了需要手动去gitee pages点更新很烦，土豪请忽略这个问题。）

接下来就正式开始吧！

安装Node

安装node直接官网下载一路Next就好，不会的朋友们可以自行百度一下。

安装完之后可以在终端输入node -v和npm -v测试一下是否安装成功。

后续通过npm进行其他包的安装时如果速度很慢，可以尝试安装cnpm或者添加淘宝镜像。

npm install cnpm

或者

npm config set registry https://registry.npm.taobao.org

安装git

把本地的网页文件上传到gitee或者github肯定少不了git的帮助。

还是一样这里只给出下载链接，安装过程不多介绍，安装成功后可以通过git --version测试是否安装成功

安装hexo

在我们准备存放博客的地方新建一个文件夹，用来存放所有的文件，为了避免一些意外的bug，建议不要使用中文路径。

在该目录下打开终端，windows可以在目录下右键Git Bash Here，mac可以在终端cd到该目录下，定位到该目录下之后，通过输入npm install hexo-cli -g全局安装Hexo，安装过程中可能会出现一些报错，大多都不影响，安装完成后我们通过输入hexo -v验证是否安装成功，如果成功则无视之前都报错即可。

此时已经成功安装了hexo，我们要开始准备初始化我们的博客网站并书写第一篇文章了。

首先输入hexo init初始化文件夹，注意此时文件夹内必须是空的，不能有任何内容。初始化完成之后就可以输入npm install安装必备的组件了，这一步是必不可少的。

接下来介绍几个常用的命令吧，后边会经常用得到：

hexo new post “文章名” 创建新文章

hexo clean 清除缓存

hexo g 生成静态网页

hexo s 打开本地服务器

hexo d 推送到远程服务器

我们安装完必备的组件之后，是有一个默认的Hello World文章的，此时我们依次执行hexo g 和hexo s就可以打开http://localhost:4000查看预览效果了。如果想关闭本地服务器则按下ctrl+C即可。

gitee创建仓库

打开gitee登录自己的账号，没有则自行注册。创建一个个人仓库，项目名字为yourname.gitee.io，注意名字一定不要写错了。创建之后进入仓库选择服务-Gitee Pages开启Pages服务，首次使用需要实名认证，认证完成后会出现自己的Gitee Pages地址，后续就在该地址访问自己的博客。

为了我们能顺利的把本地的文章推送到Gitee，还需要配置ssh公钥。不会的可以按照官方教程操作。

文章发布

文章发布到线上，还需要进行一些简单的配置才可以，我们必须配置好要推送的仓库和分支，hexo才能将文章准确的推送到线上服务器，我们打开博客根目录下的_config.yml文件并拖动到最后，然后进行如下配置即可：

deploy:
  type: git
  repo:
 	# 这里配置你的git仓库的ssh地址
    gitee: git@gitee.com:yourname/yourname.git  
  # 这里是使用的分支
  branch: master

现在本地与线上等环境都已经搭建好了，终于可以动手写自己的第一篇博客了。

输入hexo new post "文章名"会创建一个文章位于source/_posts/文章名.md，打开markdown文件就可以书写自己的第一篇文章了，文章最开始有一些配置项，大家可以先忽略它，后边主题中我们再学习那个是做什么的。接下来我们在markdown文件中书写一些内容，然后回到终端输入hexo g生成静态文件，如果此时想在本地进行预览则输入hexo s开启本地服务器，在http://lcoalhost:4000可以进行预览，如果想到线上去查看，则执行hexo d将静态文件推送到远程服务器上去，推送完成后，就可以去线上网站进行查看了。（前面说过，如果使用的是免费的GItee Pages则需要手动去更新一下线上页面。）

可能有朋友想问怎么让自己的文章在首页有阅读全文的按钮，其实只要在markdown文件中合适的位置添加一个<!-- more -->即可，大家自己尝试一下吧。

ICARUS主题

ICARUS现在也有完整的中文文档了，大家可以查看一下文档，很详细。首先说明，我只搭建了简单的博客内容，所以像是评论组件、分享组件、打赏组件都是被我给去掉的，如果大家有需要可以对其进行配置，看一下文档也比较简单，我就说一下我配置的过程吧。

首先安装ICARUS，大家可以clone一下源码来安装，我这里采用的是npm的方式进行安装的：

npm install -S hexo-theme-icarus

安装之后我们再配置文件中应用该主题，就是配置仓库时使用过的_config.yml文件

theme: icarus

我们可以先依次执行一下hexo g和hexo s查看一下有没有成功应用主题，如果有问题请朋友们细心检查一下有没有配置错误，没有问题则进行主题的相关配置了，主题的配置在_config.icarus.yml中完成。

官方给出的这个文档说明基本涵盖了所有的配置项，大家可以看一下详细的配置内容，我会简单说一下比较容易踩坑的部分。

在默认情况下navbar是英文的，如果想改成中文则手动更改即可。sidebar用于配置左右两侧的定位方式，为true则不会随博客内容的滚动而滚动，前端的小伙伴应该比较理解粘性布局，简单说就是当顶部滚动到浏览器顶端时就不会滚动了，而是固定在那里。

widgets用于配置所有的挂件，前面sidebar配置的左右两侧就是用于存放这些挂件的。每个挂件必有的两个属性是position和type，如果所有挂件的position值都一致则博客是两栏布局，如果不一致则是三栏布局。当前也可以定义新的配置文件做自定义配置，比如_config.post.yml的配置仅应用于所有的文章，不会影响其他的页面，其优先级比主题的配置文件要高。像我的博客就是通过在_config.post.yml配置三栏布局，在_config.icarus.yml配置两栏布局实现的。

说一下widgets中的挂件吧，第一个是profile用于配置个人信息，需要注意的一点是，如果头像是通过路径来配置的，路径是以source为起点的，比如配置的头像路径为/img/avatar.jpg，那么图片的路径应该是博客根目录/source/img/avatar.jpg。toc挂件是用于配置目录的，如果要使用目录挂件，那么在文章开头的配置项应该加上toc: true才可以，对，就是前边说到过的文章的配置项，文章的配置项是优先级最高的，但是只作用于当前的文章，也要注意的一点是，toc:与true中间必须要有一个空格，否则不能正常读取，应该是所有的配置项的值前面都要有一个空格，不知道这是yaml语法还是什么原因，我没有去深入探究。categories是文章所属的分类，分类可以有多级，也可以只有一级，比如我们的文章是处于前端/框架/React分类下，则在文章开头进行如下配置：

categories: 
  - 前端
  - 框架
  - React

还有一个需要说一下的挂件是tags标签，给文章添加标签也是在文章开头的配置项中进行的，如果给文章添加一个标签的话可以直接写：

tags: 一个标签

如果要添加多个标签的话可以拿列表进行包裹：

tags: ["第一个", "第二个"]

通过这些配置项基本可以完成一个简单博客的搭建了，像其他配置大家可以自行决定进行配置或将其注释掉即可。

跨设备书写博客

不可避免的我们会遇到博客写了一半，要更换设备继续书写的情况，我们可以在仓库新建一个分支用来存储博客的源文件，这样每次都把源文件也提交上去，我是新建了一个仓库用来存储源文件的，大家选择自己喜欢的方式即可。当我们提交源文件之后换到新设备上之后，通过如下方式即可继续博客：

1. pull博客源文件
2. 继续书写博客，书写完成后hexo d查看线上是否正常
3. 将源文件push到git仓库

每次换到新设备重复此步骤即可。

结语

看到这里，大家应该都已经成功搭建了一个基础的博客，内容比较简单，只希望能带大家入个门，少走一些弯路。

感谢大家看完我这又臭又长的文章，希望大家都好好维护自己的博客哦！

后续 -部署到github

2021年10月使用hexo搭建博客并部署到gitee pages，这一年来运行稳定，但是在2022年10月发现更新的时候gitee pages提示内容涉嫌违规，但是也没有提示具体哪里违规，考虑到国内的审核较为严格也就只能理解了。

所以这次准备迁移到github了，还可以免费解析域名，除了国内访问有时会抽风外一切都很美好。

基于此，在这里做一次教程的更新。

由于前边对部署到gitee已经做了比较多的描述，这里类似的就快速略过了。

• ssh一样需要配置，生成方式一样的，只是配置到github上。
• 还是更改_config.yml文件，把仓库改成github仓库即可。

这样操作完网站就可以访问了，可以自动更新，够香吧？

接下来说一下配置域名哦，在仓库的设置中找到pages目录下的Custom domain配置我们的域名。网上的教程可能很多是叫你配置一级域名，这里根据自己想配置成哪个域名就在这里输入，二级域名也是可以的。

配置完之后会自动在仓库里生成一个文件CNAME，里边是我们的域名，但是我们每次提交博客都会将其覆盖，所以更推荐把CNAME文件写在博客的源文件里，所以我们可以在博客的source目录下创建CNAME文件

xxx.xxx.com // 这里配置域名，不要有其他内容

然后就是去做一下域名解析，主机输入我们要解析的二级域名，记录类型为CNAME，记录值就是yourname.github.io.，最后要加一个.一定注意！！！

这样就可以通过域名访问我们的博客了。