前言

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

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

唯一需要的就是:耐心坚持,为什么呢❓

  1. 在你搭建博客的过程中,你会遇到很多问题,你需要自己在网上或者博客社区、QQ群等渠道去寻找答案,有时候一个问题就要查半天,最后还有可能没解决,但是当问题解决时的满足感令人愉悦。
  2. 你需要了解很多知识,比如 GitGithub域名服务前端三剑客:[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

升级建议

升級完成後,請到 GithubReleases 界面 或者 文檔七 查看新版的更新內容。
裏面有標注 _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