前言
在我进入前端开发岗位之后,就有了想搭建博客的想法,在里面记录自己的工作和生活,还可以自己写文章。但碍于工作时间和自己的基础还很薄弱,一拖再拖,终于在2022年初在网上了解资源后,决定采用 Hexo 博客框架搭配 Butterfly 主题,再经过一段时间摸索之后,博客已初现雌形,感觉还不错,有想法的伙伴可以参考这篇文章
搭建一个个人博客需要什么呢❓
唯一需要的就是:耐心、坚持,为什么呢❓
- 在你搭建博客的过程中,你会遇到很多问题,你需要自己在网上或者博客社区、QQ群等渠道去寻找答案,有时候一个问题就要查半天,最后还有可能没解决,但是当问题解决时的满足感令人愉悦。
- 你需要了解很多知识,比如 Git、Github、域名服务、前端三剑客:[JS、CSS、HTML]、你没接触过的文件格式、MD文件语法、博客优化知识等,当然了,这些收益都是相对的。
- 博客需要美化,你需要自己去设计自己的博客,怎样才能让网站看起来比较漂亮,文章需要搭配怎样的封面图,使用怎样的图标等等,都需要你自己去想,当然了,你也可以参考一些大佬的网站。
博客前置工作
搭建博客之前,你需要做以下准备工作:
💻电脑新建 Blog
文件夹,存放博客源文件
安装 Git
安装 Node.js
注册 Github 账号
购买个人域名,并完成备案
这些工作,可以自行百度准备好就行,不过我看玩博客的一般都是 程序员👨🏻💻
,这些对于大家应该都是小问题。
初始化 Hexo 博客
在创建的文件夹📂 Blog 下,鼠标右键打开
Git Bush Here
,输入 npm 命令安装 Hexo:1
npm install -g hexo-cli
安装完成后,输入 hexo init 命令初始化博客:
1
hexo init
再接着执行命令 hexo g 进行静态部署
1
hexo g
这时网页已经部署完成,接着输入命令 hexo s 即可:
1
hexo s
此时浏览器输入 http://localhost:4000 就可以打开新部署的网页了
将 Hexo 部署到 GitHub
我们回到文件夹📂 Blog 下,用编辑器打开文件
blog\_config.yml
,找到 deploy 配置项:1
2
3
4deploy:
type: git
repository: https://github.com/Cyan-Xmw/Cyan-Xmw.github.io.git #你的仓库地址
branch: master #绑定的仓库分支这里注意一下语法,每个
冒号:
后面都有一个空格你的仓库地址如下图:
然后回到
Blog
文件夹中,打开Git Bash
,安装 Git 部署插件,输入命令:1
npm install hexo-deployer-git --save
然后分别输入以下三条命令:
1
2
3hexo clean #清除缓存文件 db.json 和已生成的静态文件 public
hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)记住这三条命令,后面经常用到,还有一个部署命令 hexo s
完成以后,打开浏览器,输入 https://xxx.github.io 就可以打开你的网页了
现在虽然可以访问我们的网站,但是网址是GitHub提供的:http://xxxx.github.io 而我们想使用我们自己的个性化域名,这就需要绑定我们自己的域名。
解析个人博客域名
登录域名平台,这里以腾讯云为例,进入域名 控制台,进入到域名解析页面,增加两条解析记录:
那个
IPV4
地址可以通过ping
得到,具体方法是打开终端输入以下命令:1
ping Cyan-Xmw.github.io #ping + 你的GitHub的网址
打开
Blog\source
,添加 CNAME 文件,可以先创建一个 CNAME.txt 文件,打开后写上你的域名,不要加 www 否则每次访问都必须加 www,但如果不带有 www ,以后访问的时候带不带 www 都可以访问,保存后记得要重命名,将 .txt 删除回到
Blog
文件夹,右键打开 Git Bash,依次输入下面三条命令:1
2
3hexo clean
hexo g
hexo d打开 GitHub ,看看 CNAME 文件是否已经在你的项目中,点击 settings >- pages >- Custom Domain ,输入你解析的域名,不要带上 www
恭喜,这样就完成了,在浏览器输入你的域名就能看到部署的博客网站了!
由于本人博客配置了一些东西,一些操作无法截图,如果哪个步骤有问题,可以留言或者百度寻找答案!
安装 Butterfly 主题
穩定版【建議】
在你的 Hexo
根目錄裏
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
測試版
如果想要安裝比較新的 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 |
測試版
如果想要安裝比較新的 dev 分支,可以
1 | git clone -b dev https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly |
升級方法:在主題目錄下,運行 git pull
在你的 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 |
升级建议
為了減少升級主題後帶來的不便,請使用以下方法(建議,可以不做)。
在 hexo 的根目錄創建一個文件 _config.butterfly.yml,並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去。( 注意: 複製的是主題的 _config.yml ,而不是 hexo 的 _config.yml)
Hexo 會自動合併主題中的 _config.yml 和 _config.butterfly.yml 裏的配置,如果存在同名配置,會使用 _config.butterfly.yml 的配置,其優先度較高。
到这里,你的 Hexo 博客框架搭配 Butterfly 主题就已经完成,接下来,就可以把网站设计成你想要的样子了