前言

在我进入前端开发岗位之后，就有了想搭建博客的想法，在里面记录自己的工作和生活，还可以自己写文章。但碍于工作时间和自己的基础还很薄弱，一拖再拖，终于在2022年初在网上了解资源后，决定采用 Hexo 博客框架搭配 Butterfly 主题，再经过一段时间摸索之后，博客已初现雌形，感觉还不错，有想法的伙伴可以参考这篇文章

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

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

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

博客前置工作

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

💻电脑新建 Blog 文件夹，存放博客源文件

安装 Git

安装 Node.js

注册 Github 账号

购买个人域名，并完成备案

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

初始化 Hexo 博客

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

1652259757306.jpg

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

    1
    npm install -g hexo-cli

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

    1
    hexo init

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

    1
    hexo g

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

    1
    hexo s

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

将 Hexo 部署到 GitHub

  1. 我们回到文件夹📂 Blog 下,用编辑器打开文件 blog\_config.yml ,找到 deploy 配置项:

    1
    2
    3
    4
    deploy:
    type: git
    repository: https://github.com/Cyan-Xmw/Cyan-Xmw.github.io.git  #你的仓库地址
    branch: master #绑定的仓库分支

    这里注意一下语法，每个 冒号： 后面都有一个空格

    你的仓库地址如下图：

    1652260360463.jpg

  2. 然后回到 Blog 文件夹中，打开 Git Bash，安装 Git 部署插件，输入命令：

    1
    npm install hexo-deployer-git --save

    然后分别输入以下三条命令：

    1
    2
    3
    hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
    hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
    hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

    记住这三条命令，后面经常用到，还有一个部署命令 hexo s

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

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

解析个人博客域名

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

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

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

    1652261287080.jpg

  2. 打开 Blog\source，添加 CNAME 文件，可以先创建一个 CNAME.txt 文件，打开后写上你的域名，不要加 www 否则每次访问都必须加 www，但如果不带有 www ，以后访问的时候带不带 www 都可以访问，保存后记得要重命名，将 .txt 删除

  3. 回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    打开 GitHub ，看看 CNAME 文件是否已经在你的项目中，点击 settings >- pages >- Custom Domain ,输入你解析的域名，不要带上 www

  4. 恭喜，这样就完成了，在浏览器输入你的域名就能看到部署的博客网站了！

由于本人博客配置了一些东西，一些操作无法截图，如果哪个步骤有问题，可以留言或者百度寻找答案！

安装 Butterfly 主题

穩定版【建議】

在你的 Hexo 根目錄裏

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

測試版

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

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

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

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

穩定版【建議】

在你的 Hexo 根目錄裏

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

測試版

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

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

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

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

此方法只支持 Hexo 5.0.0 以上版本

通過 npm 安裝並不會在 themes 裏生成主題文件夾，而是在 node_modules 裏生成

在你的 Hexo 根目錄裏

1
npm i hexo-theme-butterfly

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

應用主題

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

1
theme: butterfly

安裝插件

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

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

升级建议

升級完成後，請到 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 主题就已经完成，接下来，就可以把网站设计成你想要的样子了

TO DO

ButterFly 主题美化日记