使用Hexo+github pages搭建个人博客

发表于 更新于 分类于 本文字数： 2.6k 阅读时长 ≈ 2 分钟


使用Hexo在github pages服务上搭建简单个人博客

一、 安装Node.js

  • 安装Node.js
    在node官网 https://nodejs.org/zh-cn/ 下载最新维护版本的node即可，由于本人的老爷机还只能跑跑Win7-64bit的系统，所以只能下载Latest支持Win7的Node.js版本(https://nodejs.org/download/release/v13.14.0/), Windows上按照wizard指引一路安装过去就OK了。安装完之后（并且安装过程中默认将node添加到环境变量），打开powersell，查看node版本号得到以下回显即表示Node.js安装OK。
    Administrator@USER-20190806PD MINGW64 /e/Git_Trunk/My_Blog
$ node -v
v13.14.0
    由于npm仓库镜像源下载速度较慢，配置国内源1
    #配置淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org

#查看是否安装成功
cnpm -v

二、安装Hexo

其实前面一节埋了一个小坑，在使用以下命令安装Hexo的时候会报错

$ cnpm install hexo-cli -g
internal/modules/cjs/loader.js:965
  throw err;
  ^

Error: Cannot find module 'fs/promises'

主要原因是由于安装的cnpm的版本比npm的版本高（npm的版本是由于我这里用的Win7的系统导致的使用了历史版本的Node.js版本）
使用以下命令重新安装较低版本cnpm即可解决以上问题2

#删除已安装的cnpm版本：
npm uninstall -g cnpm
#安装低版本cnpm：
npm install cnpm@7.1.0 -g --registry=https://registry.npm.taobao.org

重新使用以下命令安装Hexo

$ cnpm install hexo-cli -g
....
All packages installed (58 packages installed from npm registry, used 3s(network 3s), speed 783.79KB/s, json 58(295.98KB), tarball 1.75MB, manifests cache hit 0, etag hit 0 / miss 0)

初始化Hexo

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 246 packages from 200 contributors in 42.808s

19 packages are looking for funding
  run `npm fund` for details

INFO  Start blogging with Hexo!

本地运行Hexo

#下面三条命令是常用的Hexo 命令
hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器，可以在localhost:4000查看网站修改效果

#运行以下命令
$ hexo clean; hexo g; hexo s
...
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

访问本地http://localhost:4000/ 可以看到以下默认Hexo内容

以上就完成了本地的Hexo环境的部署

三、 Deploy到Github上

本来考虑到访问速度是想Deploy到gitee上，没想到发布gitpage竟然还要审核，更为离谱的是:审核过了一个星期，然后通知我上传图片不清晰（自己限制了图片上传大小2MB），这波操作让人窒息。想想还是直接部署到Github上好了。部署个人主页github也没有那么复杂，首先github上创建一个Repository，并且开启pages服务3，然后配置Hexo根目录的下的_config.yml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:xxxx/xxxxx.github.io.git
  branch: master
  以上的repo填自己实际的repo就OK

然后本地执行下面命令就可以将本地代码push到github上了

hexo g --d

详细步骤可参考4中的三、码云配置，此处只需要将上传到gitee的地址改成上传到github的地址即可。

此处遇到一个问题就是部署的页面无法加载theme主题，原因是由于未配置_config.yml中合法的以下内容

## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
#此处必须按照以下类似格式进行拆分
url: https://username.github.io/
root: /project/

可参考文档5进行设置，此处一定要按照文档5中同时设置url和root，否则后续会遇到链接图片不对的问题（导致图片挂掉无法正常显示6），hexo根目录的_config.yml的配置可参考以下链接 https://hexo.io/zh-cn/docs/configuration.html。

四 使用Theme及相关设置

由于笔者不太喜欢把个人主页搞得太花里胡哨，所以这里就选取了极简风格的Next Theme，此处不再赘述相关配置细节，可参next的Github7，或者博主Devin_的相关文档8