hexo + github + butterfly 搭建你的个人博客保姆级教程（无需云服务器）

文章目录 安装Node.js安装 git安装Hexo创建个人博客更换butterfly主题部署到 github写一篇博客其他

注意：此安装教程在Windows10 64位下进行

具体效果可参考我的主页：https://weijian-m.github.io/

安装Node.js

打开 Node.js官网，选择长期支持版本的安装包下载

这里我下载.msi文件，由于我的计算机是64位的，所以我选择了64位

双击安装

这里我装在了D盘






安装完成后会出现一个命令行窗口，不用管，退出就好

Win+R打开命令行窗口，依次输入node -v、npm - v，如果出现版本号，则说明安装成功

安装 git

打开 git官网，点击下图中的位置转到下载页面

根据系统类型下载，我是Windows系统

我下载了64位

双击安装

这里我安装在了D盘















取消勾选 View Release Notes

WIn + R打开命令行，输入git --version，如果出现系统版本则说明git安装成功

安装Hexo

在命令行窗口输入以下命令：

nmp install hexo-cli -g

如果报错就多试几次，可能因为网络问题。

创建个人博客

首先，在电脑的任意位置创建一个文件夹，这里我再F盘创建了名为blog的文件夹（也可以是其他名字），进入这个文件夹

在空白处右键，点击Git Bash Here

这时候会出现一个窗口，后面的所有命令都在这个窗口里进行。

输入hexo init 初始化博客

这时会看到，blog文件夹下出现了一堆文件

输入hexo g生成静态文件

输入hexo s部署到本地，红框框里是地址

在浏览器中输入上面的地址，可以看到Hexo博客已经在本地部署成功

在git命令窗口下按Ctrl+C可退出本地部署。

更换butterfly主题

本文用的是butterfly主题

首先，输入如下命令安装依赖：

npm install hexo-renderer-pug hexo-renderer-stylus

输入如下命令下载butterfly主题：

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

这时候，blog/themes目录下会出现一个butterfly文件夹，说明主题下载成功

打开blog目录下的_config.yml配置文件

更改主题为butterfly

theme: butterfly

下面我们在本地查看一下效果。

输入以下命令清除缓存：

hexo clean

生成静态文件

hexo g

部署到本地

hexo s

下图可以看到，主题已经更换成功

部署到 github

首先输入下面的命令安装插件：

npm install hexo-deployer-git --save

打开自己的 github 主页，没有账号的可以去注册一下。

新建一个仓库

输入仓库名，这里要特别注意，仓库名一定要按照以下格式：

你的github用户名.github.io

然后点击创建仓库即可

创建完之后，会自动进入下面的页面。复制下图中的地址

打开本地博客的配置文件_config.yml，在deploy下输入以下内容：

deploy:
  type: 'git'
  repo: 你刚刚复制的地址
  branch: master

在git命令行窗口依次输入以下命令，部署到GitHub

hexo clean
hexo g
hexo d

在浏览器中输入你的GitHub用户名.github.io即可看到刚刚部署的博客，如果没有看到也不要着急，github有一定的延迟，多刷新几次就好

写一篇博客

可以看到，可以看到，刚刚部署的博客网站中只有一篇初始文章，下面介绍一下怎么写自己的博客

首先，还是在git命令行窗口中，输入以下命令创建一篇博客，命名为demo（也可以是其他名字）

hexo new post "demo"

这时，在blog/source/_posts目录下就会多一个名为demo的.md文件，这就是我们刚刚创建的博客，在这个文件里，我们可以写自己的博客。

写完博客之后，保存，依次输入以下命令部署到 Github：

hexo clean
hexo g
hexo d

这里要注意，以后我们每次更新博客，都要输入者三条命令

可以看到，新文章已经发布成功。如果没有看到也不要着急，Github会有一定延迟，等一会就好了。

其他

对于butterfly主题的优化，可以看作者的文档https://butterfly.js.org/
当然，你也可以选择其他主题。