如何使用Hexo框架构建个人博客

1. 安装环境依赖

部署框架需要安装Node.js和Git。

Node安装
Git安装

下载Node

通过CMD验证安装

1 2	# 检查 Node.js 版本如果输出node的版本号则证明下载成功 node -v

进行npm换源，然后运行

1	npm config set registry https://registry.npmmirror.com

下载Git

Git官网

通过CMD验证安装

1 2	# 检查 Node.js 版本如果输出git的版本号则证明下载成功 git --version

2. 安装Hexo

可以参考 Hexo官网来辅助安装

打开PowerShell安装hexo框架
1
npm install -g hexo-cli
安装之后查看版本检验是否安装成功
1
hexo -v
如果显示hexo版本则证明安装成功😘

3. 新建Hexo项目

在你的博客文件夹(最好不要在C盘)里打开CMD，输入以下指令

hexo init

等待指令运行完成再输入这段指令

1	hexo cl; hexo g; hexo s

等待运行完你就会发现你的Hexo框架安装成功了👌这时我们来看看项目结构

Blog/
├── .github/             # Github工作流文件        不用管
├── node_modules/        # Node的模块和库文件      不用管
├── .public/             # 静态文件                由框架自动生成
├── scaffolds/           # 项目脚手架              不用管
├── source/              # 最重要的资源文件夹       你博客中的所有代码在这里写
├── themes/              # 主题文件夹              安装的主题会存到这里
├── _config.yml/         # 配置文件夹              用来配置你项目的属性

这时访问http://localhost:4000 你就会发现你的网站成功部署到了本地😊

分析指令的作用

hexo init：自然是初始化你的Hexo框架，将项目结构生成出来。
hexo cl：cl即是clear，清除缓存文件和已生成的静态文件，你只需要知道是扫垃圾就行🤭。
hexo g：g即是generate,通过你的source文件在public中生成静态文件，也就是你博客中的文件
hexo s：s即是server，启动本地服务器。

4. Github部署

我们需要现在github上新建一个存储博客的库，因为我们需要让他变成网站，所以需要使用github自动托管。
- 注册后创建仓库名格式必须为：<用户名>.github.io
  - alt 博客搭建库
  - 例如这里我的库名必须为yin-bo-Final.github.io
然后点击该项目的Settings,在导航栏找到Pages选项，点击之后将该项目托管到线上
alt 使用GithubPages托管

5.托管到Github

修改 _config.yml文件deploy部分
其中repository就是你的库的URL，例如我的是https://github.com/yin-bo-Final/yin-bo-Final.github.io

deploy:
  type: git
  repository: 你的库的URL
  branch: main

然后输入以下指令

1	hexo cl; hexo g; hexo d

其中d即为deploy，托管，就是将你的静态文件托管到你的线上github库
如果出现Deploy done，则说明部署成功👏！
我们访问GitHubPages上的地址就能成功访问我们的博客了😊！

6. 将博客部署到Vercel上

什么是Vercel？
- 是一个专注于前端项目的云部署平台，特别适合静态网站的应用。
为什么要部署到Vercel？
- GitHub Pages 在国内访问较慢
- Vercel 有更好的 CDN 加速，国内访问体验更好
- 最重要的是，他是免费的吖(●ˇ∀ˇ●)

Vercel官网

使用 GitHub 注册并登录Vercel，选择 Add New > Project
找到之前创建的库，点后面的 Import，直接点 Deploy 等待部署完成
如果你有自己的域名的话，也可以通过ssh添加自己的域名哦
- 到 Project 页面 > Domains 添加自己的域名，在域名管理页解析即可通过域名访问了！

7. 主题搭建

我使用的是Redefine主题，具体搭建教程作者写的很详细，我就不写了
Redefine主题搭建教程

yin_bo_'s BLOG