Mac OS上搭建Hexo博客流程

Hexo 介绍

• https://hexo.io
• https://hexo.io/zh-cn/

环境准备

安装nodejs

• 下载地址：https://nodejs.org/en/
• 以：node-v14.17.1.pkg 为例

打开终端，切换root用户

比如：打开terminal或者iterms终端软件，执行以下命令

//切换到root用户
sudo su 

安装淘宝镜像

//使用npm安装相关依赖包，速度很慢，建议安装淘宝镜像，后续命令使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r4Yv94Tf-1640757035196)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_04.2spyb0ysy740.jpg)]

安装Hexo

//安装hexo
cnpm install -g hexo-cli 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zdxSMy0P-1640757035197)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_05.58i94pfret1c.jpg)]

Hexo安装成功

初始化博客网站

新建项目文件夹，并进入文件夹内

比如：Blog。后续如果项目出现问题，或者想重新创建，只需要删除此文件夹，即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsFfZOeF-1640757035198)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_07.4reuq9t9tri8.jpg)]

//初始化项目（必须进入到项目文件夹里面后，执行此命令）
sudo hexo init 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxPhwpMr-1640757035199)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_09.31dzh1zlzjwg.jpg)]

启动hexo

//启动hexo
hexo s 

浏览器打开博客网站

// 浏览器打开
http://localhost:4000 

创建博客，并写博客

• Vim命令的使用，可以参考这里

//创建文章
hexo n "我的第一篇博客文章" 
//编辑文章
vim 我的第一篇博客文章.md 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LOAlYeYq-1640757035202)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_12.l7we2eb24qo.jpg)]

项目管理执行

清理项目缓存

• 新增博客文章或者修改博客文章内容，需要执行此命令

// 清理之前生成的网站
hexo clean 

重新生成项目

// 重新生成博客项目
hexo g 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XRUm9vQz-1640757035204)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_15.4dssqjgeco00.jpg)]

再次启动项目

// 再次启动博客网站
hexo s 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKj0Hp4V-1640757035204)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_16.4xty5eytqbuo.jpg)]

修改主题

选择主题

大家可以按照自己的需要下载适合的主题。可以从官网下载
比如：选择 butterfly

下载主题代码

• 在项目根目录下，即"Blog“文件夹下执行以下命令

// clone主题代码到 themes/butterfly
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改项目配置文件，配置主题

// 修改配置文件，主题主题
vim _config.yml 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1D91ik9H-1640757035207)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_20.16yhp6c3fa68.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lTpQBmdX-1640757035207)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_21.3szs67w4bsw0.jpg)]

在项目目录下执行以下命令【非常重要，亲测有效】

此坑解决方案来源于这里：https://zhuanlan.zhihu.com/p/137946156

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

重新生成项目

• 具体操作过程，前面章节已经介绍

hexo clean
hexo g
hexo s

重新运行项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aX1pkLFQ-1640757035208)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_27.731s8khtqubk.jpg)]
新的主题界面

后续可以根据自己需求，修改主题界面，优化界面。

将博客部署到云端（GitHub上，需要有自己的账户）

新建仓库

登录：https://github.com
新建仓库，必须是【public】公共的仓库。

创建成功
此案例的仓库地址：

https://github.com/CodingDGSun/CodingDGSun.github.io.git

在项目目录下执行以下命令

cnpm install --save hexo-deployer-git

修改配置文件

// 修改配置
vim _config.yml 

修改文件最后位置
其中【repo】就填写刚刚新建的仓库地址。

type: git
repo: https://github.com/CodingDGSun/CodingDGSun.github.io.git
branch: master

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlmTkRkV-1640757035212)(https://cdn.jsdelivr.net/gh/CodingDGSun/images-db@master/Blog/02_33.3lyqa6vtlzls.jpg)]

部署项目到云端

// 执行部署命令
hexo d 部署

访问云端博客主页

访问地址，就是https://新建仓库的名称+.github.io
比如此案例是:https://CodingDGSun.github.io