从零开始搭建 Hexo 个人博客

搭建一个个人博客需要什么呢❓

唯一需要的就是：耐心、坚持，为什么呢❓

1.在你搭建博客的过程中，你会遇到很多问题，你需要自己在网上或者博客社区、QQ群等渠道去寻找答案，有时候一个问题就要查半天，最后还有可能没解决，但是当问题解决时的满足感令人愉悦。
2.你需要了解很多知识，比如 Git、Github、域名服务、前端三剑客:[JS、CSS、HTML]、你没接触过的文件格式、MD文件语法、博客优化知识等，当然了，这些收益都是相对的。
3.博客需要美化，你需要自己去设计自己的博客，怎样才能让网站看起来比较漂亮，文章需要搭配怎样的封面图，使用怎样的图标等等，都需要你自己去想，当然了，你也可以参考一些大佬的网站。

博客前置工作

搭建博客之前，你需要做以下准备工作：

• 💻电脑新建 Blog 文件夹，存放博客源文件
• 安装 Git
• 安装 Node.js
• 注册 Github 账号
• 购买个人域名，并完成备案

---

这些工作，可以自行百度准备好就行，不过我看玩博客的一般都是 程序员👨🏻‍💻 ，这些对于大家应该都是小问题。

初始化 Hexo 博客

1.Hexo 就是我们的个人博客框架，在安装之前，我们需要在 Github 上新建一个仓库：

2.在创建的文件夹📂 Blog 下，鼠标右键打开 Git Bush Here，输入 npm 命令安装 Hexo：

npm install -g hexo-cli 
1

3.安装完成后，输入 hexo init 命令初始化博客：

hexo init 
1

4.再接着执行命令 hexo g 进行静态部署

hexo g 
1

5.这时网页已经部署完成，接着输入命令 hexo s 即可：

hexo s 
1

此时浏览器输入 http://localhost:4000 就可以打开新部署的网页了

将 Hexo 部署到 GitHub

1.我们回到文件夹📂 Blog 下,用编辑器打开文件 blog\_config.yml ,找到 deploy 配置项:deploy:type: gitrepository: https://github.com/Cyan-Xmw/Cyan-Xmw.github.io.git#你的仓库地址branch: master #绑定的仓库分支 这里注意一下语法，每个 冒号： 后面都有一个空格你的仓库地址如下图：

3.完成以后，打开浏览器，输入 https://xxx.github.io 就可以打开你的网页了

现在虽然可以访问我们的网站，但是网址是GitHub提供的：xxxx.github.io 而我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。

解析个人博客域名

1.登录域名平台，这里以腾讯云为例，进入域名 控制台，进入到域名解析页面，增加两条解析记录:

那个 IPV4 地址可以通过 ping 得到，具体方法是打开终端输入以下命令：

ping Cyan-Xmw.github.io#ping + 你的GitHub的网址 
1

2.打开 Blog\source，添加 CNAME 文件，可以先创建一个 CNAME.txt 文件，打开后写上你的域名，不要加 www 否则每次访问都必须加 www，但如果不带有 www ，以后访问的时候带不带 www 都可以访问，保存后记得要重命名，将 .txt 删除3.回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：hexo cleanhexo ghexo d 打开 GitHub ，看看 CNAME 文件是否已经在你的项目中，点击 settings >- pages >- Custom Domain ,输入你解析的域名，不要带上 www4.恭喜，这样就完成了，在浏览器输入你的域名就能看到部署的博客网站了！> 由于本人博客配置了一些东西，一些操作无法截图，如果哪个步骤有问题，可以留言或者百度寻找答案！

安装 Butterfly 主题

Git安裝 (Github)

穩定版【建議】

在你的 Hexo 根目錄裏

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

測試版

測試版可能存在 bug，追求穩定的請安裝穩定版

如果想要安裝比較新的 dev 分支，可以

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

升級方法：在主題目錄下，運行 git pull

Git安裝 (Gitee)

穩定版【建議】

在你的 Hexo 根目錄裏

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 
1

測試版

測試版可能存在 bug，追求穩定的請安裝穩定版

如果想要安裝比較新的 dev 分支，可以

git clone -b dev https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 
1

升級方法：在主題目錄下，運行 git pull

npm安装

此方法只支持 Hexo 5.0.0 以上版本，通過 npm 安裝並不會在 themes 裏生成主題文件夾，而是在 node_modules 裏生成

在你的 Hexo 根目錄裏

npm i hexo-theme-butterfly 
1

升級方法：在 Hexo 根目錄下，運行 npm update hexo-theme-butterfly

應用主題

修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

theme: butterfly 
1

安裝插件

如果你沒有 pug 以及 stylus 的渲染器，請下載安裝：

npm install hexo-renderer-pug hexo-renderer-stylus --save 
1

升级建议

升級完成後，請到 Github 的 Releases 界面 或者 文檔七 查看新版的更新內容。裏面有標注 _config 文件的變更內容（如有），請根據實際情況更新你的配置內容。

為了減少升級主題後帶來的不便，請使用以下方法（建議，可以不做）。

在 hexo 的根目錄創建一個文件 _config.butterfly.yml，並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去。( 注意: 複製的是主題的 _config.yml ,而不是 hexo 的 _config.yml)

注意： 不要把主題目錄的 _config.yml 刪掉，以後只需要在 _config.butterfly.yml 進行配置就行。如果使用了 _config.butterfly.yml， 配置主題的 _config.yml 將不會有效果。

Hexo 會自動合併主題中的 _config.yml 和 _config.butterfly.yml 裏的配置，如果存在同名配置，會使用 _config.butterfly.yml 的配置，其優先度較高。

到这里，你的 Hexo 博客框架搭配 Butterfly 主题就已经完成，接下来，就可以把网站设计成你想要的样子了