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