从零实现Github+Vercel部署hexo
如果希望将博客放到自己的云服务器可以浏览使用轻量级服务器部署Hexo | 七鳄の学习格 (gmcj0816.top)
我们需要做好的前期准备
1.一台系统不要太老的电脑
2.电脑上安装Github，NodeJS
3.最好有一把tz（因为github有的小伙伴可能无法访问到）
4.有Typora或者vs code来撰写自己的Markdown文章Hexo是什么？
Hexo 是一个快速、简洁且高效的静态博客框架，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。
安装Node.js
这里需要注意一点便是是否希望自己的豆瓣游戏，书籍，电影等也可以在博客里进行浏览，如果需要的话，暂时可以跳过这一步骤，直接选择进行下一步
查看在博客中显示豆瓣收藏效果请点击以下链接查看
这是链接哦==> 电影推荐 | 七鳄の学习格 (gmcj0816.top)
Node.js官网地址如下：（正常安装即可）
https://nodejs.org/zh-cn/因为要去豆瓣爬虫获取自己的电影，但是总是失败，获取不到，看到评论发现v12.18版本的可以实现，但是自己的开发需要版本是16版本的，所以在考虑是否可以多个版本来回切换呢，所以看了很多总算是可以了：nvm，可以让你在电脑上管理多个版本的nodejs
卸载已有node
为了降低后面的麻烦，免去不必要的问题和时间浪费，建议先删除自身已有的，后面在安装
下载nvm
这里可以选择以下两种方式下载：
- 可以选择GitHub下载 选择框选出的即可
安装
基本上下一步即可，双击exe文件傻瓜安装 需要注意的就是建议在你想安装的路径下，创建nvm文件夹，用来存放nvm的安装文件 例如我的
E:\RuanJianFile\NodeJS_File\nvm当安装完成后，可以用cmd输入nvm来进行测试，当出现以下信息说明安装OK
PS C:\Users\28138> nvm
Running version 1.1.10.
Usage:
nvm arch : Show if node is running in 32 or 64 bit mode.
nvm current : Display active version.
nvm install <version> [arch] : The version can be a specific version, "latest" for the latest current version, or "lts" for the
most recent LTS version. Optionally specify whether to install the 32 or 64 bit version (defaults
to system arch). Set [arch] to "all" to install 32 AND 64 bit versions.
Add --insecure to the end of this command to bypass SSL validation of the remote download server.
nvm list [available] : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls.
nvm on : Enable node.js version management.
nvm off : Disable node.js version management.
nvm proxy [url] : Set a proxy to use for downloads. Leave [url] blank to see the current proxy.
Set [url] to "none" to remove the proxy.
nvm node_mirror [url] : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.安装淘宝npm镜像
如果有安装淘宝镜像的需完成下载镜像的配置，没有可跳过
打开nvm文件夹下的settings.txt文件，在最后添加以下代码（不改，下载node可能会报错）
arch: 64
proxy:
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/🍓 简单解释
✅ 简单解释
- root：NVM 安装路径
- path：NodeJS 快捷方式路径
使用
- NVM 安装成功后，win + r 输入cmd 新开cmd窗口，可以通过
nvm -v命令查看所有可用的命令。【简单看一下即可，后面会列出常用的命令和解释】
C:\Users\28138>nvm
Running version 1.1.10.
Usage:
nvm arch : Show if node is running in 32 or 64 bit mode.
nvm current : Display active version.
nvm install <version> [arch] : The version can be a specific version, "latest" for the latest current version, or "lts" for the
most recent LTS version. Optionally specify whether to install the 32 or 64 bit version (defaults
to system arch). Set [arch] to "all" to install 32 AND 64 bit versions.
Add --insecure to the end of this command to bypass SSL validation of the remote download server.
nvm list [available] : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls.
nvm on : Enable node.js version management.
nvm off : Disable node.js version management.
nvm proxy [url] : Set a proxy to use for downloads. Leave [url] blank to see the current proxy.
Set [url] to "none" to remove the proxy.
nvm node_mirror [url] : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.
nvm npm_mirror [url] : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url.
nvm uninstall <version> : The version must be a specific version.
nvm use [version] [arch] : Switch to use the specified version. Optionally use "latest", "lts", or "newest".
"newest" is the latest installed version. Optionally specify 32/64bit architecture.
nvm use <arch> will continue using the selected version, but switch to 32/64 bit mode.
nvm root [path] : Set the directory where nvm should store different versions of node.js.
If <path> is not set, the current root will be displayed.
nvm [--]version : Displays the current running version of nvm for Windows. Aliased as v.- 使用
nvm install <版本号>命令安装指定版本的NodeJS
#这里以v12.18.1为例
nvm install v12.18.1注意：如果只有Downloading node.js version 12.18.1(64-bit)...一直持续如下，应该是没有安装成功npm，这是可以按上面设置淘宝镜像 找到nvm目录 在settings.txt文件 里添加两行配置 走一下淘宝镜像，即可成功解决
安装成功后在 nvm 安装目录下出现一个 v12.18.1 文件夹，这时可以尝试在上面使用 nvm list 命令查看已安装 NodeJS 列表。
# 这里因为自己有安装过需要的版本，所以有两个，正常到这里是一个
C:\Users\28138>nvm list
16.17.1
* 12.18.1 (Currently using 64-bit executable)剩下的大家可以根据自己的所需进行安装其他版本
运行中的问题
- 1.可能会出现乱码问题，例如如下情况
C:\>nvm use v12.18.2
exit status 1: ��û���㹻��Ȩ��ִ�д˲�����- 解决方案：重新打开并以管理员身份运行
切换使用的node版本
这个就比较简单了
C:\Users\28138>nvm use v12.18.1 #用nvm use v+您安装的Node版本号
Now using node v12.18.1 (64-bit) # 提示这句说明切换成功
C:\Users\28138>npm -v # 可以打印npm 的版本
6.14.5
C:\Users\28138>node -v # 打印node版本
v12.18.1
C:\Users\28138>nvm list # 通过命令也可以查看现在使用的 版本
16.17.1
* 12.18.1 (Currently using 64-bit executable)
# 以下是切换到另一个版本的，这里就不过多阐述了
C:\Users\28138>nvm use v16.17.1
Now using node v16.17.1 (64-bit)
C:\Users\28138>npm -v
8.15.0
C:\Users\28138>node -v
v16.17.1
C:\Users\28138>nvm list
* 16.17.1 (Currently using 64-bit executable)
12.18.1常用的nvm命令
nvm off // 禁用node.js版本管理(不卸载任何东西)
nvm on // 启用node.js版本管理
nvm install <version> // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall <version> // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls // 显示所有安装的node.js版本
nvm list available // 显示可以安装的所有node.js的版本
nvm use <version> // 切换到使用指定的nodejs版本
nvm v // 显示nvm版本
nvm install stable // 安装最新稳定版以上就可以在多个版本的node.js中进行切换了，这里在豆瓣爬取时记得选择12.x版本哦，如果高版本也可以的话，我后面会标注
安装Git
https://git-scm.com/downloads这里就直接正常安装，自定义安装路径，然后一路下一步即可，安装完之后，可以通过git —version查看版本（如果有版本号说明安装没问题）效果如下：
PS C:\Users\28138> git --version
git version 2.38.1.windows.1注册GitHub
使用邮箱注册 GitHub: Let’s build from here · GitHub账户，选择免费账户（Free），并完成邮件验证。
然后打开powershell或者选择Git Bash Here(这里列出了Git Bash Here)
设置用户名和邮箱
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"创建 SSH 密匙：
输入 ssh-keygen -t rsa -C "GitHub 邮箱"，然后一路回车。
进入 [C:\Users\用户名.ssh] 目录（要勾选显示“隐藏的项目”），用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。
登陆 GitHub ，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key。
(1)首先找到settings
(2)SSH and GPG keys—>选择New SSH key
（3）填写秘钥【这里的Title名字随意，key需要复制自己的公钥 id_rsa.pub 文件中的所有】
（4）验证连接，打开 Git Bash或者是powershell，输入 ssh -T git@github.com 出现 “Are you sure……”，输入 yes 回车确认，当显示显示 “Hi xxx! You’ve successfully……” 即连接成功。如下所示
PS C:\Users\28138> ssh -T git@github.com
Warning: Permanently added the ECDSA host key for IP address 'xx.xxx.xxx.xxx' to the list of known hosts.
Hi *******! You've successfully authenticated, but GitHub does not provide shell access.创建github仓库
（1）选择New responsitory
(2)填写信息，仓库名这里最好是用户名.github.io，其实自定义也是可以的，反正到时候也是放到vercel上
安装 本地Hexo 博客
创建hexo
使用powershell或者git bash输入一下命令【这里Mac 用户需要管理员权限】
npm install -g hexo-clihexo初始化并安装所需组件
hexo init myblog # 初始化，这里添加myblog是用来将生成的文件全都放到myblog文件中
npm install # 安装组件安装 hexo-deployer-git
这个组件主要是用来上传到github仓库用的【必需】
npm install hexo-deployer-git --save编辑hexo中的config.yml文件
deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git #这个信息可以复制仓库地址【如下图】
branch: master
部署到Github上
用powershell或者git bash依次输入以下命令【无需复制#后面的注释信息】
hexo clean # 清理缓存
hexo g # 转化为html页面
hexo deploy #部署 这一步最好用全称，因为后面如果用豆瓣爬虫插件时会导致重复Vercel部署
因为github如果不用tz的话，部分小伙伴无法使用，所以呢，可以将博客放到vercel上代理，这里建议用github注册
注册vercel
https://vercel.com/导入github仓库
（1）选择Add New Project 然后选择自己刚刚上传的仓库点击Import，最后选择deploy即可
（2）如果需要绑定域名的话，可以选择Settings中的Dimains添加域名
在域名解析出填写相应的CNAME值
- 记录主机：填写域名
- 记录值：填写vercel上你添加的域名给的CNAME值
- TTL:一般选择10分钟即可
这样你就拥有了一个属于自己的基本免费的博客网站了，可以给你的朋友浏览了
腾讯云开发者
