Hexo+Butterfly 搭建个人博客
Hexo
前言
参考方向 | 原帖地址 |
---|---|
Jerry - Butterfly 主题配置 | https://butterfly.js.org/posts/4aa8abbe/ |
Github是一个面向开源及私有软件项目托管平台,因为之支持Git作为唯一的版本库格式进行托管,故名Github。
Github Pages 是在 github 上的静态网页托管平台,使用 Github Pages 可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。
Hexo 是一个快速、简洁且高效的博客框架,Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用指定的主题生成静态网页。
node.js
安装node.js
Git
安装Git
检验软件是否安装成功
同时按下 Win 和 R打开运行,输入 cmd
,然后输入以下命令,有相应版本信息显示则安装成功,若不正确可以卸载软件重新安装。
1 | git --version |
npm 源
1 | 淘宝镜像源 |
Hexo 安装
安装 Hexo 脚手架
新建一个文件夹,起一个好记的名字(以下简称[Blogroot]
),在文件夹下右键菜单点击Git shell Here
,输入以下命令安装 hexo 的脚手架(第一次可能会比较久)
1 | npm install hexo-cli -g |
初始化 Hexo
1 | hexo init |
如果出错了就再试一次
Hexo 安装完成后,将会在指定文件夹中新建所需要的文件,Hexo 文件夹下的目录如下:
本地查看
1 | hexo generate |
执行完即可打开 http://localhost:4000/ 查看效果
将博客部署到 Github Pages
到目前为止,我们的本地博客就成功搭建了,但是现在我们只能通过本地连接查看(当然也可以通过公网访问)。我们要做的是让其他人也能够访问我们的博客,这就需要我们将博客部署到 Github Pages 上。
前置步骤
一、注册 Github 账户:访问 Github 官网,点击 Sign Up 注册账户
二、创建项目代码库:点击 New repository 开始创建
三、配置 SSH
密钥:只有配置好 SSH
密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步。在[Blogroot]
内打开终端(Git shell Here
),输入以下命令:
1 | ssh-keygen -t rsa -C "你的邮箱" |
基本上一路回车就好了
接下来屏幕会显示:
1 | Your identification has been saved in /c/Users/you/.ssh/id_rsa. |
运行以下命令,将公钥的内容复制到系统粘贴板上
1 | clip < ~/.ssh/id_rsa.pub |
四、在 GitHub 账户中添加你的公钥
1.登陆 GitHub,进入 Settings
:
2.点击 SSH and GPG Keys
,选择New SSH key
3.粘贴密钥:
五、配置 Git 个人信息
Git 会根据用户的名字和邮箱来记录提交,GitHub 也是用这些信息来做权限的处理,输入以下命令进行个人信息的设置,把名称和邮箱替换成你自己的,名字可以不是 GitHub 的昵称,但为了方便记忆,建议与 GitHub 一致
1 | git config --global user.name "此处填你的用户名" |
到此为止 SSH Key 配置成功,本机已成功连接到 Github
将本地的Hexo文件更新到Github的库中
一、登录 Github 打开自己的项目(你的用户名.github.io)
二、复制 SSH
三、右键用记事本(或者其他编辑器)打开 [Blogroot]/_config.yml
四、滑到最下面,按下图修改 _config.yml
文件并保存
五、执行以下命令,把博客部署到 Github 上
1 | hexo cl //清除缓存 |
执行完之后会让你输入你的 Github 的账号和密码,如果此时报错(ERROR Deployer not found: git
),说明你的 deployer 没有安装成功
需要执行以下命令再安装一次:
1 | npm install hexo-deployer-git --save |
再执行
1 | hexo cl && hexo g && hexo d |
你的博客就会部署到 Github 上了
访问:https://你的用户名.github.io
比如(https://daiyu-233.github.io/)
以后每个人都可以通过此链接访问你的博客了
切换Butterfly主题
安装Butterfly主题
在[Blogroot]
运行以下命令
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
安装插件
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
新建配置文件
新建[Blogroot]/_config.butterfly.yml
,复制[Blogroot]/themes/butterfly/_config.yml
的内容,粘贴到[Blogroot]/_config.butterfly.yml
,这样两个文件的内容就一样了。
(如果同时存在[Blogroot]/themes/butterfly/_config.yml
和[Blogroot]/_config.butterfly.yml
,Hexo会优先使用[Blogroot]/_config.butterfly.yml
)
应用主题
修改 [Blogroot]/_config.yml
,把主题改为butterfly(大概在第100行)
1 | theme: butterfly |
Github Action 自动部署
Github Action 简介
Github Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务。
每次部署 Hexo
都需要运行指令三件套,随着文章越来越多,编译的时间也随之越来越长,通过 Github Action
,我们只需要在每次完成博客的编写或修改以后,将改动直接 push
到远程仓库,之后的编译部署的工作统统交给 CI
来完成即可。
Github Action 使用教程
Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->tokens (classic)
->generate new token
,然后输入你的账号密码。
创建的 Token 名称随意,但必须勾选 repo 项 和 workflows 项。
token 只会显示这一次,之后将无法查看,所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置。
创建源码私有仓库
这里之所以是私有仓库,是因为在接下来的配置中会用到 Token
,如果 Token
被盗用,别人可以肆意操作你的 github 仓库内容,为了避免这一风险,才选择的博客源码闭源。
创建完成后,需要把博客的源码 push 到这里。首先获取远程仓库地址,此处 SSH 和 HTTPS 都可以。前面我们绑定了ssh key,SSH 在绑定过 ssh key 的设备上无需再输入密码,HTTPS 则需要输入密码,但是 SSH 偶尔会遇到端口占用的情况,请自主选择。
- 新建
[Blogroot(博客根目录)]/.github/workflows/autodeploy.yml
里面输入
1 | name: 自动部署 |
把以上的token
和repository-name
改为你的token和仓库名称
可以直接在仓库中复制:
这里跪求大家点个starヾ(•ω•`)o
设置远程仓库和分支
1.先把[Blogroot]/themes/butterfly/.git
(这是一个隐藏文件夹)删除或者移动到非博客文件夹目录下,原因是主题文件夹下的.git
文件夹的存在会导致其被识别成子项目,从而无法被上传到源码仓库。
2.在[Blogroot]
运行指令
1 | git init #初始化 |
3.添加屏蔽项
打开[Blogroot]/.gitignore
,替换以下内容:
1 | .DS_Store |
4.再运行 git 提交指令,将博客源码提交到 github 上。
1 | git add . |
查看部署情况
此时,打开 GIthub 存放源码的私有仓库,找到 action。
等待转圈变成绿色对勾表示部署成功
红色叉叉则表示报错了
此时你就可以体验到 vs code 源代码管理的快感了
Butterfly
网站资料
修改[Blogroot]/_config.yml
导航菜单
修改[Blogroot]/_config.butterfly.yml
1 | Home: / || fas fa-home |
||
前面是跳转链接,后面是图标,如果不希望显示图标,图标名可不写。
在移动端等界面默认子目录是展开的,如果你想要隐藏,在子目录里添加 hide
,如:
1 | List||fas fa-list||hide: |
注意: 导航的文字、链接、图标都可自行更改,如:
1 | menu: |
文章链接转义字母数字
参考: https://github.com/rozbo/hexo-abbrlink
安装插件:
1 | npm install hexo-abbrlink --save |
修改_config.yml
1 | ## URL |
在_config.yml
插入:
1 | ## abbrlink config |
本地搜索依赖
参考:https://github.com/wzpan/hexo-generator-search
1 | npm install hexo-generator-search --save |
在_config.yml
插入:
1 | search: |
修改_config.butterfly.yml
1 | ## Local search |
社交图标
修改_config.butterfly.yml
1 | social: |
格式: 图标名:url || 描述性文字
代码框
修改_config.butterfly.yml
代码高亮主题
utterfly 支持6种代码高亮样式:
1 | highlight_theme: light |
代码复制
1 | highlight_copy: true |
代码框展开/关闭
在默认情况下,代码框自动展开,可设置是否所有代码框都关闭状态,点击>
可展开代码
- true 全部代码框不展开,需点击
>
打开 - false 代码框展开,有
>
点击按钮 - none 不显示
>
按钮
1 | highlight_shrink: true #代码框不展开,需点击 '>' 打开 |
代码换行
在默认情况下,Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话,那么你可以考虑开启这个功能。
1 | code_word_wrap: true |
右下角按钮
修改_config.butterfly.yml
简繁转换
简体繁体互换
1 | translate: |
夜间模式
1 | ## dark mode |
阅读模式
阅读模式下会去掉除文章外的内容,避免干扰阅读。
1 | readmode: true |
社交图标
书写格式 图标名:url || 描述性文字
1 | social: |
文章相关
文章相关
新建文章
执行以下命令:
1 | hexo n "文章标题" |
或者在[Blogroot]/source/_posts
新建.md
文件,但是以这种方式新建的文章不会自带文章信息:
1 |
|
md 全称 Markdown,纯文本格式的语法,非常的简单实用。(markdown语法)
.md 文件可以使用支持 Markdown 语法的编辑器编辑 (当然用Windows自带的记事本也没人管你)
主页文章描述
在文章头部信息添加:
1 | description: #描述 |
顶部图
在文章头部信息添加:
1 | top_img: #true/false |
当设置 top_img 为 false 时:https://pic.daiyu-233.top/pic/2022/12202212181721556.png
文章置顶
在文章头部信息添加:
1 | sticky: 1 #数值越大,置顶的优先级越大。 |
文章封面
在文章头部信息添加:
1 | cover: |
当配置多张图片时,会随机选择一张作为cover.此时写法应为:
1 | default_cover: |
文章meta显示
修改_config.butterfly.yml
1 | post_meta: |
美化/特效
美化/特效
主题色
修改_config.butterfly.yml
1 | theme_color: |
颜色值必须被双引号包裹,就像"#000"
而不是#000
。
背景
修改_config.butterfly.yml
1 | # 图片格式 url(http://xxxxxx.com/xxx.jpg) |
footer 背景
1 | # footer是否显示图片背景(与top_img一致) |
鼠标点击效果
修改_config.butterfly.yml
1 | fireworks: |
1 | # 点击出现爱心 |
1 | # 点击出现文字,文字可自行修改 |