Hexo+Github Pages+Vercel搭建博客(详细)
本篇文章主要写一些我搭建这个博客的详细过程以及一些踩坑记录。
持续更新中~~
一、前言
此博客是采用用Hexo博客框架搭建的。Hexo是一个由Node.js驱动的快速，简单且功能强大的静态博客框架。它能快速生成由MarkDown等渲染的文章，总有数百个主题和插件可供使用，并且支持一键部署到Github Pages上。
而本博客就是部署到Github Pages上并用Vercel加速国内访问的(后面会详细说明)，采用了Matery主题。
二、准备工作
1. Node.js环境配置
①首先去Node.js官网下载安装程序，一路默认即可(路径可根据自己的需求更改)，然后安装。
②测试是否安装成功及环境变量是否正确。在cmd命令行输入：
node -v查看效果。若出现：
则说明环境变量添加完成，进行下一步。如果报错，则需要手动添加环境变量：右击点击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，在系统变量下找到名为 path 的变量名，双击Path，点击添加，将node.js的安装复制进去即可。
③改npm的源(将npm的源改为国内镜像了提高访问和下载速度)
# 查看npm的配置 npm config list # 默认源 npm config set registry https://registry.npmjs.org # 临时改变镜像源 npm --registry=https://registry.npm.taobao.org # 永久设置为淘宝镜像源 npm config set registry https://registry.npm.taobao.org
2.Git的安装及配置
- ①首先去Git官网下载安装程序，一路默认Next(有特殊需求可改一些配置)，安装。
- ②安装完成后右键桌面会出现两个和Git相关的选项，表示安装成功。
3.Git连接Github以及配置SSH连接
①Git账户邮箱配置。在桌面点击鼠标右键，点击
Git Bash Here，并分别输入以下命令并回车：git config --global user.name "此处填写你Github的用户名" git config --global user.email "此处填写你Github的邮箱"②SSH连接。在桌面点击鼠标右键，点击
Git Bash Here。输入以下代码并一直回车：ssh-keygen -t rsa -C “your_email@example.com” # 引号里填你的Github注册邮箱③提交SSH私钥。在 C:/Users/[Windows用户名] 目录下找到名为.ssh 的文件夹，找到并用记事本打开
id_rsa.pub，复制里面的内容。然后到GitHub上点击右上角头像，进入settings：④新建SSH密钥：
⑤添加密钥：
4. 测试是否连成功
- 在
Git Bush或者cmd输入ssh -T git@github.com，如果出现以下语句则说明连接成功：
注意事项：
仓库名称尽量命名为**(example).github.io**(example)为GitHub账户名，方便Hexo部署；
建完仓库后如果分支不是master，则需新建master分支：
点击仓库的Settings，进入Pages：
将默认分支设置为master：
将Page指向master分支后save：
此时以及可以通过：
https://example.github.io(example为GitHub用户名)访问网页了，如果有readme文档则显示readme文档内容，否则显示404 File not found😂。至此，GitHub Pages页面创建完成。
三、开始搭建博客
1.建立本地博客站点文件夹
①选定一个磁盘，新建文件夹（如：example），在该文件夹所在目录（不是example文件夹里）右键
Git Bush Here,然后依次输入以下命令并等待执行完毕：# hexo框架的安装 npm install -g hexo-cli # 等上一个命令完成后，在输入下面的命令 hexo init example #（新建文件夹的名称）初始化文件夹 cd example #（新建文件夹的名称） npm install # 安装博客所需要的依赖文件②执行完毕后进入站点文件夹（example），此时已初始化完成，包含一些文件。右键
Git Bush Here,执行以下命令：hexo g hexo s然后打开浏览器，输入：
http://localhost:4000或127.0.0.1:4000即可看到博客在本地的运行。
2. 本地博客部署到GitHub上
①安装部署插件，在站点文件夹（example）中执行；
npm install hexo-deployer-git --save②修改配置文件。把
_config.yml用代码编辑器（如Vscode）打开，修改站点主要的属性：title: 你的博客名 subtitle: 博客的副标题，有些主题支持 description: 博客描述 keywords: 博客关键词 author: 作者，在文章中显示 language: 博客语言语种，简体中文为：zh-CN timezone: 时区（可不用填，hexo默认使用电脑时区）修改url：
拉到文件最底部，在 deploy 下面添加一个 repo 项：
③部署到GitHub 上。运行以下命令：
# Hexo会根据配置文件渲染出一套静态页面 hexo g # 将上一步渲染出的一系列文件上传至至Github Pages hexo d # 也可以直接输入此命令，直接完成渲染和上传 hexo g -d至此，已经可以通过
https://<用户名>.github.io访问博客啦！🎉