欢迎来到TTRR个人博客,本篇分享的是我对于hexo搭建并部署到github的个人心得分享。
本站图床基于国外,流畅查看图片需要翻墙
# 博客心得
# 第一步下载node.js
安装 node.js
1、安装node.js的安装包根据自己搭建环境。(这边展示为windows)

- 安装目录推荐再C盘。(其实整个node.js占用也不大)

-
这里选择最后一个 Add to PATH 功能进行安装。
(因为接下来我们要用到这个PATH功能,这里不过多描述)

-
接下来安装就直接一路选择 Next 直到安装结束。
# 第二步下载Git
温馨提示:如果点击无法打开请安装一些步骤操作
Ⅰ. 将链接的lanzoui.com改成lanzous.com
Ⅱ. 删除www
你可以将Git安装再任意你喜欢的文件夹中(安装在哪都可以哦~)
-
1、接着一路点击Next(也没什么要我们配置选择的)
-
2、安装结束再桌面右击鼠标就可以看见Git

# 第三步配置环境
安装结束我们在桌面右键鼠标点击Git Bash Here,会出来一个终端,我们执行以下的命令来检查
code snippet
分别检查我们是否成功安装。(其实一般都不会出错不过以防万一)
成功例子展示: 
# 开始配置cnpm
- 安装cnpm,执行以下命令
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这个cnpm其实就是国内镜像为了就是让你访问变得更快
- 检查cnpm安装
$ cnpm -v
只要出现版本号就代表你安装没有出错(出错再来一次)
# 开始安装hexo并初始化
- 还是在 <u>git bash</u> 终端输入以下命令
$ cnpm install hexo-cli -g
# 初始化我们的blog
- 需要你建立一个文件夹(名字随便取)
- 例如建立一个在F盘的blog文件夹,就在当前这个文件夹打开Git bash

# 小提示打开之后这里会显示出你当前的文件夹

# 克隆文件
- 执行一下代码进行克隆(也可以叫初始化)
hexo init
因为这个克隆是从从外网克隆下来,所以会访问超时或出错,耐心等待即可,实在不行就使用梯子进行加速。(其实我感觉不用梯子其实也挺快,当然了可能是我的网速较好
- 直到终端窗口出现
Install dependencies,如果一直卡住就按Ctrl + c就可以结束。 - 接着执行以下命令进行部署
$ cnpm install
- 等待命令执行结束就完成了我们的博客克隆,我们可以运行以下命令进行暂时预览
$ hexo s

注意事项:不可以使用
Ctrl + c进行复制哦,请使用Shift + ins进行复制
<u>(如果一直无法访问就使用hexo server命令进行预览)</u>
# 这样子默认的主题就搭建完成啦~~

# 第四步选择中意的主题
# hexo 主题下载
你可以在里面找到所有hexo主题,可以选择一个你自己喜欢的主题
可以看到的里面网页有很多主题
里面包含了以下三个东东
- 预览地址
- 项目地址
- 配置地址
点击主题的图片可以打开预览地址,点击主题的标题可以打开项目地址,配置文档在项目地址找
小提示:大部分都是英文哦~ 可以使用google chrome 或者 edge 浏览器页面翻译
- 首先我们点击主题的项目地址进入
(这里拿主题NEXT默认举例)

我们可以看到 Clone or download 下有一个链接,我们先复制下来,等会克隆文件需要。

# 开始克隆主题
- 首先需要你在你的博客目录下打开我们的 Git bash
git clone 主题项目复制的地址 themes/主题名字
小提示:themes就是你博客的blog下的文件夹,至于主题名字其实你可以随便取,不过最好是英文,方便记忆
如果你一直无法通过Git bash克隆主题 你可以选择Clone or download 下的Download ZIP
下载完成后解压放到你的博客文件夹下的themes目录下就ok了

小提示:下载需要登录githu账号哦 ~ ~
# 开始配置主题
- 在博客目录下有一个名字叫:
_config.yml的文件,我们将他打开

- 然后滑到下面找到
theme进行修改,修改成你刚刚下载的到博客目录下的themes下的主题文件夹名字


- 改好就可以暂时预览你刚刚下载的主题了,在你的博客目录下打开
Git bash执行以下命令
hexo s
- 执行完你可以看到一个网址,切记不可以使用
ctrl + c进行复制哦~ ~ - 我们可以选择那串链接用鼠标右键选择
copy进行复制,使用ctrl + c会结束预览的哦
有些主题你更换后无法预览,但是会提示你说,你需要安装什么什么。你就需要去安装哦,一般来说大部分都是pug和其他的插件。具体需要根据你的主题到底是需要哪个再去下载哦。总的来说,你预览的时候一般都会给你一个下载的链接,告诉你需要去安装这个,安装结束就可以暂时预览你的博客效果了,如果不懂的话可以评论,我看见会帮助你。
# 开始修改主题
首先你会看见在你的博客根目录下有一个
_config.yml,然后你又在你的博客目录下的themes又看见一个一模一样的_config.yml。他们两个虽然名字是一样的,但是你千万千万别弄混了。
- 博客根目录下的
_config.yml - 主题themes下的
_config.yml
你要学会分清楚。

- 我们来看一下博客根目录下的
_config.yml里面有啥东东 - 首先映入眼帘的就是以下这个东西,我已经贴心为英语不好的宝打了注释。

- 再然后我们来看看主题themes下的
_config.yml里面又有啥东东 - 首先打开第一眼看到的就是以下可能会出现的东西,里面就是主题详细配置以及注释(虽然可能是英文,但是你可以用翻译)

是不是感觉一下子就能区分这两个
_config.yml(如果没有那就熟能生巧吧!)
-
具体的配置主题的话我就简单介绍,大部分都在主题themes下的
_config.yml进行修改 -
以下为简单的hexo命令
-
创建一个新文章
hexo new "我的第一个博客"
- 创建完每次生成的文章都固定在你的博客根目录下面的source/_posts下

小提示:生成的
.md文件就是你的博客,你可以在博客根目录下面的source/_posts下找到并打开编辑。
你打开之后不会弄咋办??看完我博客——————有手就行。

# 部署与发布
# 生成博客文章
- 我们生成的博客的文章
.md文件,稍微百度一下发现这个是 Markdown 那就去菜鸟教程学习一下Markdown
稍微学习一下就可以轻松发布博客了。
编写工具自行百度就可以轻松找到,我使用的是Visual Studio Code
# 使用github部署博客
这边我比较喜欢git部署,就以这个为例子吧,其他的gitee和glahub等其他部署也会陆续更新
- 登录我们的github账号
(没有就注册一个,因为是外网所以你可能访问有点慢)
- 新建一个仓库

- 仓库名必须是
用户名 + .github.io

# 创建git密钥
- 接下来我们需要创建
Git密钥,打开git bash(不要求在哪个目录),执行以下命令:
ssh-keygen -t rsa -C "你的邮箱"
执行上面那条命令不管出现什么都是确定即可,比如会提示你:【Y/N】,你需要输入Y,然后没有的直接回车确认
- 再执行以下命令
cat ~/.ssh/id_rsa.pub
会输出你密钥,你需要复制下来。
生成的地址在 .shh 中的 id_rsa.pub 中:


- 回到我们的github点击我们的头像进入,再点击左边
Settings--SSH和右边New SSH Key

title 随便取都可以,key 把你的密钥粘贴进去 然后点击Add SSH key 即可
如果你换电脑了 也是需要再重新生成密钥进行绑定哦~
# 链接git准备部署
- 接下来我们打开
Git bash执行以下命令:
ssh -T [email protected]
如果成功连接就会提示以下内容:
Are you sure you want to continue connecting (yes/no/[fingerprint])?
你输入 yes 即可
如果你一直连接报错 Error与time out,请你使用一下加速器或者梯子
当你成功时候会提示:helo TTRR,you are successful*******
- 打开我们的创建好的项目选择
ssh并复制下来等会会使用到

- 打开我们博客根目录的
_config.yml滑倒最底下就可以看到以下内容:
deploy:
type: git
repo: 你复制的地址
branch: mian
- 接下来我们再我们博客根目录下来执行以下命令:
git config --global user.name "你的github用户名"
git config --global user.email "你注册github的邮箱"
然后执行以下命令安装上传插件:
cnpm install hexo-deployer-git --save
一般安装上传插件都不会报错
Error,要是你报错了,再次执行即可,如果你反反复复都无法安装 或者一直报错就在加我TG群组,找我帮助你
# 部署博客
- 完成以上所有步骤后进行最后的部署上传,执行以下命令:
hexo g -d
# 配置github
# 生成博客链接
- 打开我们的博客项目点击
Settings - 往下滑找到
Github pages

- 选择分支为
main然后保存

# 最后我们就能得到我们的博客链接啦!!
有什么不懂的可以评论哦~