hexo搭建博客

前言

若文章有误，欢迎读者留言反馈

hexo搭配butterfly主题搭建博客

一、hexo的安装

以下命令，我是在cmd窗口下输入的

全局安装hexo
1
npm install hexo -g
查看hexo版本，通过这个命令来判断hexo是否安装成功
1
hexo version
初始化你的博客文件夹
- 这里记得进入一个你要存放博客的目录
1
hexo init coding327.github.io
进入到你的博客文件夹下
1
cd 你的博客文件夹
安装依赖
1
npm install
运行你的博客，本地预览
1
hexo server
- 在你的浏览器输入localhost:4000，回车即可

注意：终端的位置，切换到对应的目录下

二、如何将博客发布到你的github

首先你需要准备一个github账户，这里不细说，直接从创建仓库开始
- 账户旁边加号点击，选择new repository，然后Repository name格式必须是你的github账户名.github.io，滑倒最下面，点击create repository

为你的博客配置一下git信息

在你的cmd窗口下输入命令

1 2	git config --global user.name "github账户名" git config --global user.email "注册github时你所使用的邮箱"

使用编辑器打开你的博客文件夹
- 进入根目录下的_config.yml下，滑倒最下面配置一下deploy，repo选择的是ssh,之前配过密钥
  1
  2
  3
  4
  deploy:
  type: 'git'
  repo: 'git@github.com:coding327/coding327.github.io.git'
  branch: main
- 安装一下插件 { % label 我是在cmd窗口下输入的 pink % }
  1
  npm install hexo-deployer-git --save
- 这时可以将你的博客文件夹上传到github的仓库上面了
  - 清除一下缓存
    1
    hexo cl 或者 hexo clean
  - 上传
    1
    hexo d
  - 刷新一下，你刚刚上传的代码就已经成功了，然后右边有个Settings点击，找到下面GitHub Pages，选择Check it out here,这样你的网站就已经发布出去了。

三、简单讲解一下博客目录（重点讲一下框架的配置文件及hexo命令）

根目录下有两个.yml文件
- _config.yml是框架的配置文件
- _config.landscape.yml是主题的配置文件
- source文章一般都放在这个文件夹里面
缩进问题？
- .yml文件里面尤其注意缩进，包裹的是两个空格，而冒号后面是一个空格，缩进错了，整个项目也会报错（导致博客无法运行）。

需要更改的配置

# Site
title: "black jack's blog"
subtitle: 'Welcome to my blog'
description: '有时正是无人看好之人，成就了无人敢想之事'
# 下面这个方便搜索引擎查找
keywords: 博客
author: black jack
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://coding327.github.io

hexo命令

1 2	# 新建一个文件夹，在source/_posts/下 hexo n "第一篇文章"

在这个md文件里随意输入一些内容

# 重新生成一下博客
hexo g
# 运行博客，进行预览
hexo s 或者 hexo server
# 上传到github仓库，注意一般是先清除缓存，生成，再预览没问题，就上传
hexo clean
hexo g
hexo s
hexo d

总结一下，框架配置文件只需要修改3处：
- site
- url
- deploy

四、主题配置-以butterfly为例

github上搜索butterfly，找到jerryc127/hexo-theme-butterfly，点击进去，往下滑，找到Docs: 📖 Butterfly Docs，阅读他的文档。
- 这里以npm安装为例
  - 此方法只支持 Hexo 5.0.0 以上版本，package.json可以查看hexo的版本
    
    通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成
  1
  2
  vscode的终端下输入
  npm i hexo-theme-butterfly
- 框架配置文件里面修改theme为butterfly
- 如果你没有 pug 以及 stylus 的渲染器，请安装下面这个插件
  1
  2
  3
  4
  5
  6
  npm install hexo-renderer-pug hexo-renderer-stylus --save
  
  # 清理一下缓存，生成一下，运行
  hexo clean
  hexo g
  hexo s

标签页

1	hexo new page tags

你会找到source/tags/index.md这个文件

---
title: 标签页
date: 2021-10-17 15:37:13
type: "tags"
top_img: https://z3.ax1x.com/2021/10/17/5tfpdJ.jpg
---

分类页

1	hexo new page categories

你会找到source/categories/index.md这个文件

---
title: 分类
date: 2021-10-18 20:05:51
type: "categories"
top_img: https://z3.ax1x.com/2021/10/17/5tfpdJ.jpg
---

友链

1	hexo new page link

你会找到source/link/index.md这个文件

---
title: 友链
date: 2021-10-18 20:13:18
type: "link"
top_img: https://z3.ax1x.com/2021/10/17/5tfpdJ.jpg
---

友情链接添加

在Hexo博客目录中的source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件link.yml

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

配置butterfly文件
- 根目录下创建_config.butterfly.yml文件，将在/node_modules/hexo-theme-butterfly/_config.yml里的内容全部copy，粘贴到_config.butterfly.yml文件里

404页面

在butterfly主题配置文件里面修改，ctrl+F键快捷查找error_404

# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:

五、结合git版本控制使用

为什么使用git?
- git能回滚，就算本地代码没了，利用git也可以恢复。
为什么新建私有仓库？
- 🚦现在，可以把hexo源代码放在私有仓库，把hexo生成的网站代码放在公共仓库里了。更牛逼的是，可以使用github action，就是推送到github仓库时，就触发部署，这样，就省去了本地hexo d -g的过程了。
  - 注意：新建一个私有仓库存放博客源码，而网站生成的网站代码存放到你的github账户名.github.io
- 个人搭建时没注意，博客源码和生成网站源码全部推送到github账户名.github.io，这不就是把源码也推送到公开仓库了吗？？？？后面也是报错error: failed to push some refs to ******，于是网上查了一下输入git pull --rebase origin main，就成功解决了，意思就是分开的分支都合并到属于同级的节点上（注意是main分支），然后重新推送git push -u origin main，利用hexo g重新生成网站文件，hexo d部署到博客仓库上面
  - 百度查找主要是来源于：网上说是README.md这个文件不在本地仓库，但是我创建仓库都不带创建这个的，执行上面命令，本地仓库也找不到该文件，说明不是这个问题，远程仓库也只有一个main，那就是本地仓库可能出现一个分支，分支推送到main，出现了报错，使用git branch查看所有分支，✳标示当前分支，切换分支使用git checkout 某个分支名
  - 个人分析原因：因为我把生成网站源码和博客源码全部放在一个仓库，由于前面最开始使用了hexo d部署到远程仓库，然后又用git一系列命令，造成本地仓库文件发生变更，而远程仓库里的文件肯定是和现在本地仓库文件有异，于是没有办法只能pull（拉取）远程仓库里本地没有的文件再将他们全部合并，一起推送到远程仓库！！
  - 先git推送到远程私有仓库，再hexo部署到github的博客仓库上面去，有时候可能网络原因推送、部署有一定延迟，访问博客网址可能会出现你刚修改的样式依旧不显示，你可以尝试多部署几次就🆗了！

git的使用

创建一个.gitignore文件上传时过滤掉以下文件

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.vscode/
/.idea/
.deploy_git*/
.idea
themes/butterfly/.git

初始化本地仓库
1
git init
添加所有文件到暂存区
1
git add .
提交到本地仓库
1
git commit -m "feat: 初始化仓库"
创建一个主分支
1
git branch -M main

本地仓库连接远程仓库

1	git remote add origin 私有仓库ssh地址

推送到远程仓库

git push -u origin main
# 这里突然报错
error: failed to push some refs to '私有仓库地址'
# 解决方案如下
git pull --rebase origin main
# 再次推送
git push -u origin main

假设本地磁盘坏了，怎么使用git恢复我们的博客

1	git clone https://github.com/coding327/Myblog.git 【备注：我是单独又开了一个私人仓库存放博客源码！！】

clone完之后，由于私人仓库名和咱们部署的仓库名不一致，所以这里根据需要进行更改
【Myblog => coding327.github.io】
个人习惯在vscode下操作，所以直接使用vscode打开该文件，然后打开终端来安装依赖(注意目录必须是项目根目录)
【也可以使用cmd窗口进入该文件夹，安装一下依赖】

npm install
# 最开始是不用清除缓存的【注意生成之后会有缓存每次提交暂存区记得清除一下，修改了文件必须放到hexo g之前执行】
# hexo clean
# 修改完文件注意先推送到远程私人仓库，再进行生成和部署
# 提交到暂存区
git add .
# 提交到本地仓库
git commit -m "feat: xxx"
# 如果没有连接过远程仓库就需要连接一下远程仓库【可以直接推送，不过需要验证，有魔法还是很方便！！(origin只是远程仓库在本地的一个别名)】
git remote add origin 私有仓库ssh地址
#补充一下怎么查看当前仓库远程连接地址，更换可以通过设置覆盖或删除再添加或修改.git目录下的config里面的url：git remote -v
# 推送到远程仓库即可
【若使用了 -u 选项[强制的意思]，后续的 git push 指令默认 repoName 与 currentBranchName，可省略指令和参数】
git push -u origin main
# 生成
hexo g
# 运行一下预览【非必要】
hexo s
# 部署到github仓库
hexo d