本文章仅记录博主自己在使用Github+Hexo搭建个人Blog网站的整个过程和遇到问题的解决。

本博客所使用的主题为butterfly 5.0.0，如有遇到问题，请访问Butterfly官网查看详细的教程介绍。

梦想从这里启航！

准备工作

申请一个Github账号

安装Git

Git官网下载地址: https://git-scm.com/downloads/win

安装NodeJs和npm

nodejs官网下载地址：https://nodejs.org/zh-cn/download/package-manager

双击安装包，按照默认选项，一路点击Next即可，安装完成后，msi格式的安装包会自动添加环境变量。

在cmd窗口，执行node -v查看node版本。

在安装node的同时也安装了npm，执行npm -v查看npm版本。

到这就已经可以正常使用了，以下步骤是个人为了更好的管理，从而修改相关的一些环境配置，并不是必须的。

修改全局包路径

下载全局包默认保存在C盘下，可通过npm root -g命令查看当保存路径，我将这个路径设置到npm的安装路径下，一方面是节省C盘存储空间，另一方面便于个人管理。

在安装目录下创建两个文件夹，node_global全局包存储文件夹，node_cachenode缓存文件夹。

执行以下命令进行修改

1 2	npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"

修改环境变量

修改完npm全局模块的存储路径和cache路径后，还需要修改相应的环境变量。

修改用户变量Path，添加node_global和node_cache路径

添加系统变量NODE_PATH

创建Github存储库

登录Github，创建一个新的代码存储库用于保存Blog的源码文件。

登录Github账号，点击右上角用户个人头像，点击Your repositories，进入个人存储库页面。

点击New进入存储库创建页面。

填写存储库名称，格式必须为Github上的账户名，然后点击Create repository。

注：GitHub 不允许在不公开代码库（repository）的情况下直接展示博客内容。通常，GitHub Pages 是用来托管静态网站的，但前提是托管的 repository 必须是公开的。GitHub 没有直接支持私有仓库通过 Pages 展示内容的功能。

创建新文件，作为网站的主页，新文件的名字必须为index.html，码入内容随意后点击Commit changes...提交

访问blog链接，也就是存储库名称，https://0or1zo.github.io/

安装hexo

hexo是一个基于nodejs的静态博客网站生成器，详情访问hexo官网：https://hexo.io/zh-cn/

安装hexo

1	npm install -g hexo-cli

查看版本

hexo -v

创建一个项目Blog并初始化

1
2
3

hexo init Blog
cd Blog
npm install

本地启动

1 2	hexo g // 生成静态文件到public目录中 hexo s // 启动本地服务器

安装Butterfly主题

博主使用的主题是Butterfly主题，官网地址：https://butterfly.js.org/

下载主题

1 2	cd Blog git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改主题，打开根目录下的_config.yml文件，这个文件为站点的配置文件。

1	theme: butterfly

重新启动

1 2	hexo g hexo s

部署到Github Pages

方法一：安装hexo-deployer-git

1	npm install hexo-deployer-git --save

修改根目录下的_config.yml，配置Github相关信息。

deploy:
    type: git
    repo: https://github.com/0or1zo/0or1zo.github.io.git
    branch: main
    token:

token从Github的Personal access tokens获取，Settings -> Developer settings -> Personal access tokens -> Tokens(classic)

部署到Github

1	hexo g -d // -d 将项目进行部署

浏览器访问博客地址https://0or1zo.github.io/ ，部署成功。

方法二：将源码推送到Github上

直接将public目录下的所有文件推送至存储库中。

遇到的一些问题

Hexo+Butterfly启动页面显示extends includes/layout.pug block content include includes/recent-posts.pug include

Hexo更改主题后启动服务器，界面显如下字符:

1	extends includes/layout.pug block content include ./includes/mixins/indexPostUI.pug +indexPostUI

这是因为没有pug以及stylus的渲染器。

解决方案:

1 2	npm install hexo-renderer-pug hexo-renderer-stylus --save npm install hexo-deployer-git --save

清除缓存

1	hexo clean

生成静态文件即可

hexo g

梦！想从这里启航？