Gitee+Hexo搭建博客网站

Gitee+Hexo搭建博客网站

一、环境配置

安装前准备

• git
• VScode（个人建议）
• Nodejs
• 7z

二、Hexo安装

首先配置npm的淘宝源,安装完成后可通过npm info hexo查看是否配置淘宝源成功：

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

之后安装hexo：

npm install -g hexo

之后选择一个你想存放项目文件的位置进行创建hexo项目，并完成hexo所需文件的安装：

hexo init test  
cd test     
npm install

以上即可成功完成hexo的安装，接下来我们run一下测试是否成功：

hexo clean      #清除缓存
hexo g      #生成静态网页
hexo s      #启动本地服务

这样我们就可以看到我们的hexo项目的本地预览（这里我的网页已经更新，所以偷一下网图）

三、主题配置

由于作业要求使用目录页，所以不能使用将所有文章显示在首页的主题格式，所以这里需要更换主题

主题网站：https://hexo.io/themes/

我们在网站上选好喜欢的主题，之后将其下载到test的themes目录下。
这里我选用的是coder主题

按照github上的开发文档：

• 进入/test/themes目录下
• git clone [email protected]:Xunzhuo/hexo-theme-coder.git coder

即可在themes目录下成功安装coder包

修改配置

在完成安装包之后我们需要修改test目录中的"_config.yml"配置文件

首先将theme：改为coder，默认通常为landspace

theme: coder

language: en

四、生成gitee page

首先建立账户，创建一个仓库，之后复制仓库的URL到hexo配置文件_config.yml的对应部分中

 deploy:
    type: git
    repo: https://gitee.com/****/****   #你的仓库URL
    branch: master

## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url:        #你的url
root:           #你的root

完成配置后，要先安装hexo插件

npm install hexo-deployer-git --save # 安装git插件
git config --global user.email *********@qq.com # 设置gitee邮箱（gitee的注册邮箱）
git config --global user.name '****' # 设置用户名（git的注册昵称）
hexo deploy 

完成上传后仓库会更新文件：

之后选择gitee page进行网页解析服务

此时即可通过网站地址访问你的博客主页

五、常见问题

来自个人搭建博客中遇到的几个比较自闭的问题，帮其他同学踩踩坑QAQ

1. 在配置hexo目录文件配置时，要注意theme、deploy、language、url和root是否正确对应，url为你gitee page的网址，root为 /你的仓库名/
2. 每次编辑新的博客或者创建新的资源后，都要重新更新gitee page，因为是静态网页，所以要每次手动更新（自动更新貌似要会员，网上的插件等之后研究一下），每次编辑完之后记得要hexo clean，hexo g，hexo d
3. 配置主题或者更改网页后，你的电脑可能因为本地或者DNS服务器缓存导致显示的还是你的原有网页，所以可以用另一台机器查看是否更新成功（不要傻等）
4. 如果在配置完成hexo的目录页之后，发现登录主题是空白，并且使用F12控制台调试后发现，无法正确连接服务器，可以尝试取消掉gitee page的强制使用https的选项即可解决（貌似部分情况不支持https）