Github + hexo 搭建博客过程

一、准备工作

1.1 下载安装

  • Node.js（LTS长期支持版）：https://nodejs.org/en/

    • 安装后包含两个组件：node 和 npm（包管理器）

  • git

1.2 验证

1
2
node -v
npm -v

1.3 安装国内镜像源 cnpm

1
2
3
4
npm install -g cnpm --registry=https://registry.npm.taobao.org # -g：global 全局安装 

# 验证，查看版本号 
cnpm -v

1.4 安装 hexo 框架

1
cnpm install -g hexo-cli # -g：全局安装

二、博客 初始化与启动

2.1 hexo init 初始化博客

  1. 新建一个存放博客资源的目录 blog
  2. 进入上述的 blog 目录，使用初始化命令：hexo init

初始化后，目录中生成了以下文件：

blog_dir

2.2 hexo s 启动博客

使用启动命令 hexo s 或者 hexo server 启动并预览博客。

启动后在本地的4000端口访问：

1
2
3
4
D:\blog>hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctr1+C to stop.

三、博客 新建与发布

3.1 hexo n 新建博文

使用 hexo n 或 hexo new 新建一篇博客文章：

1
hexo new 'neo-first-blog'

可见，在\blog\source\_posts\目录下生成了一个 .markdown 格式的文件。

然后就可以通过编辑该.md文件编辑博客内容。

3.2 hexo clean 清除缓存

1
hexo clean

清除缓存文件db.json和已生成的静态文件public。

网站显示异常时可以执行这条命令试试。

3.3 hexo g 生成

1
hexo g # generate

生成网站静态文件到默认设置的public文件夹。

  • 便于查看网站生成的静态文件或者手动部署网站；
  • 如果使用自动部署，不需要先执行该命令。

四、部署到远端仓库

4.1 新建仓库

仓库名必须遵循指定格式：owner.github.io，如：

repo

4.2 安装git部署插件

1
cnpm install --save hexo-deployer-git

4.3 添加配置

打开本地/blog/_config.yml配置文件，在底部添加配置：

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  # 你的仓库地址
  repo: git@github.com:boxpiggy/boxpiggy.github.io.git
  branch: main

4.4 部署到远程仓库

1
2
3
4
5
hexo d  # deploy
# 或
hexo clean     # 清除缓存
hexo generate  # 生成静态文件
hexo deploy    # 部署到Github

自动生成网站静态文件，并部署到设定的仓库。

需要输入目标仓库的用户名（boxpiggy）和密码（***）

据说部署前要先配置git全局用户：git config –global user.name “xxx”; git config –global user.email

每次修改完配置都要保存，然后hexo clean &

五、自定义主题与插件

Hexo具有很强的自定义能力，可以打开 Hexo的官网，顶栏上就有 Themes 和 Plugins 的入口。

安装主题

首先需要去 Themes 页面找到一款心仪的主题（可以通过点击图片来访问主题的演示站点），然后点击主题的名称进入主题的 GitHub 页面。

可以通过git clone命令将其克隆至博客根目录下的themes文件夹

1
git clone https://github.com/<username>/<reponame>

或者通过 GitHub 自带的下载，下载源码的zip包，将其解压缩至themes文件夹中。

详细安装流程查看主题的README.MD

个性化设置

每个主题文件夹中，都有着自己的_config.yml，管理着这个主题的一些配置，因此如果想要切换主题，在下载下来后，一定要到文件夹中去查看_config.yml的配置，并进行自己的个性化修改。

快速入门

本人使用了 Fluid 主题，官方文档。

安装（hexo 5.0.0 以上版本）

1
npm install --save hexo-theme-fluid

指定主题：修改 _config.yml 站点配置文件中的配置

1
theme: fluid

清除缓存并本地预览：

1
hexo c & hexo s

fluid

图片位于：node_modules\hexo-theme-fluid\source\img\目录下

插件

而如果是插件，那么就与主题的安装大不相同了。先找到需要的插件，然后再进入到插件的 GitHub 页面，一般在 README.md 中都会详细介绍如何安装。

六、常见问题

① hexo部署到gitee后无样式问题

参考

https://lin_daren.gitee.io/lindada-blog/2020/06/13/%E5%AE%8C%E7%BE%8E%E4%B8%80%E6%AD%A5%E6%AD%A5%E8%A7%A3%E5%86%B3hexo%E5%8D%9A%E5%AE%A2%E9%83%A8%E7%BD%B2%E5%88%B0gitee%E5%90%8E%E6%A0%B7%E5%BC%8Fbug/?_blank

  1. 修改 _config.yml 配置，添加 url 和 root 两个配置：
1
2
3
4
# URL
## Set your site url here. For example, ......
url: https://boxpiggy.gitee.io/kingshit
root: /kingshit/

url 为 Gitee Pages 上的网址

root 为”仓库名”

  1. 最后更新 Gitee Pages

参考教程

https://www.cnblogs.com/visugar/p/6821777.html

https://blog.csdn.net/sinat_37781304/article/details/82729029

https://zhuanlan.zhihu.com/p/102592286?tdsourcetag=s_pctim_aiomsg

https://www.bilibili.com/video/BV1Yb411a7ty/?spm_id_from=333.788.recommend_more_video.0&vd_source=8a4e439fa8e8c5283477bc164e9a7126

https://sspai.com/post/59337

折腾
#hexo #git
Github + hexo 搭建博客过程
https://blog-21n.pages.dev/2022/12/26/Github+hexo搭建博客过程/
作者
Neo
发布于
2022年12月26日
许可协议