利用vercel+github搭建属于自己的hexo博客，详细教程！
利用vercel+github部署属于自己的hexo博客
本教程为电脑版部署的教程，本教程还有后续，包括如何美化主题，如何开启评论系统，如何解决博客图片存储等问题。
准备工作
首先我们需要安装几个东西，我们需要先安装git还有node.js，然后再安装hexo到本地环境。
1.安装git
如果你不懂git怎么操作可以去看看廖雪峰大佬的博客教程。
Windows安装非常简单你只需要去git官网点击Download，然后找到自己电脑操作系统对应的版本下载即可！
linxu的话安装就更简单了，你只需要打开命令窗口执行以下代码即可:
sudo apt-get install git
安装好后用git –version查看版本。
2.安装node.js
hexo是基于nodejs编写的，所以需要安装一下nodejs和里面的npm工具。
Windows只需要下载nodejs官网下的LTS版本即可。
lixun则比较简单，执行以下两个命令即可:
sudo apt-get install nodejs
sudo apt-get install npm
安装完成后打开命令执行：
node -v
npm -v
检查一下是否安装成功。
3.安装hexo
前面git和nodejs安装好了就可以开始安装hexo了。
你可以先创建一个文件夹，随便取个纯英文的名字，只要你知道这个是你的博客就好，然后cd到你自己创建的这个目录。
或者你可以直接执行命令，不过直接执行命令的话博客文件夹会自动生成在c盘里面。
网上给出的教程是在目录下右键用git bash来执行命令，我的话比较推荐用cmd来执行，当然我自己用的是Windows，我也是用cmd来完成的搭建。
输入以下命令;
npm install -g hexo-cli
npm镜像是国外资源，如果你觉得太慢了可以使用淘宝团队制作的镜像cnpm。在win10环境下以管理员身份运行cmd，输入以下命令：
然后再执行上面安装hexo的命令。
安装完成后使用hexo -v检查一下版本，到这里就hexo全部安装完成了。
接下来初始化一下hexo
hexo init myblog(博客目录名字，随便起，用英文)
myblog=博客目录名字
安装依赖包
cd myblog //进入这个myblog文件夹，也就是博客目录
npm install
安装一些hexo的其他插件（比较推荐安装，这些都是比较常用的）
npm install hexo-server –save
npm install hexo-admin –save
npm install hexo-generator-archive –save
npm install hexo-generator-feed –save
npm install hexo-generator-search –save
npm install hexo-generator-tag –save
npm install hexo-deployer-git –save
npm install hexo-generator-sitemap –save
hexo本地环境运行测试
输入以下代码在本地环境使用，生成静态页面
hexo generate
#或者输入
hexo g
在本地环境运行则输入以下代码：
hexo s
稍等一会显示以下信息后在浏览器访问http://localhost:4000/
这样应该就可以在本地看见刚刚搭建好的博客了。
如果需要停止博客运行则只需要按ctrl+c就好了，千万别强行关闭git命令窗，这样会导致hexo环境损坏出现问题，别问为什么，问就是血泪史，我刚入门的时候因此重建了好几次博客。
如果你访问http://localhost:4000/没反应那可能是端口占用了，只需要ctrl+c中断本地服务，然后执行hexo s -p 6666重启本地服务，然后访问http://localhost:6666即可，这里的6666你可以换成任何可以使用的端口。
设置github
我们需要先注册github账号。
- GitHub注册页面
- 输入用户名，Email，密码，注册账号。
创建博客仓库
注意：仓库名应该为：用户名.github.io，当然其他的+github.io也可以，但是不能保证百分百的不重复，所以使用用户名.github.io比较好。
配置git的ssh
打开git bash终端
输入以下指令设置user.name和user.email。
2
git config --global user.email "你的GitHub注册邮箱"
生成ssh密钥
这个时候会在c盘的用户文件夹下生成一个新的.ssh文件夹，里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。
将公钥添加到github上面
详细教程自己百度以下哈，这里就不放截图了，大概的操作流程就是:
用户头像→Settings→SSH and GPG keys→New SSH key→将id_rsa.pub中的内容复制到Key文本框中，然后点击Add SSH key(添加SSH)按钮。
将hexo部署到github上面
修改配置文件blog/_config.yml，修改deploy项的内容，如下所示：
注意：type: git中的冒号后面由空格。
注意：将git@github.com:xuezhisd/xuezhisd.github.io.git中的用户名换成自己的用户名git@github.com:github_username/github_username.github.io.git。
(我用的md编辑器实在没法输入上面那种代码，所以从别人那边借了张图过来。)
部署hexo
输入下面命令将hexo博客部署到github中:
1 | # 清空静态页面 |
打开网页，输入http://用户名.github.io，打开github上托管的博客。
hexo命令缩写
1 | hexo g：hexo generate |
常见问题
hexo deploy没有反应？
修改配置文件：_config.yml时，冒号后面没加空格。
hexo s 网站打不开？
端口占用，换个端口就好了。执行命令hexo s -p 5000，并在浏览器地址栏输入http://localhost:5000，回车访问。
如何换主题？
将主题下载后，放到themes文件夹中即可。例如，下面命令安装next主题：git clone https://github.com/iissnan/hexo-theme-next themes/next。
将hexo部署到vercel
注册好vercel账号，也可以使用github直接登录。
到vercel面板后点击add new…那个按钮。
然后选择project
然后进入以下界面
1.点击图上1的位置，然后点击’Add GitHub Account’这个按钮，然后登录并绑定自己的github账号，基本上就是无脑的按确定，按同意即可。
2.绑定好GitHub以后下面的方框里面会出现你GitHub的仓库，你只要找到自己的博客仓库点击‘Import’按钮即可，然后他就会自己部署到vercel。
给博客添加自定义域名
如果你有自己的域名，可以添加一下比较好，如果你博客部署到了vercel的话GitHub那边就不用绑定自己的域名了。
GitHub博客绑定自定义域名
进入你自己GitHub仓库的页面，例如:https://github.com/用户名/用户名.github.io
然后依次点击
setting->pages
进入pages后找到上面那个选项，在框框里面输入自己的域名，然后点击save保存，最后再到自己域名的dns解析平台将域名解析cname记录到用户名.github.io就好了。
vercel自定义域名
在vercel后台进入project页面。
点击‘Domains’进入域名添加的页面。
在1处填写自己的域名，然后点击2指向的Add按钮。
然后自己去域名的dns解析平台解析cname记录就好了。
解析好后你只需要稍等片刻他就会解析好了。
到这里为止hexo博客的搭建和使用vercel加速的步骤全部已经弄好了，接下来只需要安装主题，美化网站即可。
美化主题那些的教程在后面我会更新。
hexo常见问题
- 修改了代码后输入hexo c+hexo g终端提示报错，出现这个问题如果代码没有错误那么请检查你的缩进。
- 出现以下代码报错
FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
at ChildProcess.(/Users/xiangxiangyongan/blog/node_modules/_hexo-util@1.5.0@hexo-util/lib/spawn.js:51:21)
at ChildProcess.emit (events.js:210:5)
at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
这个你可以试试删除博客目录下的.deploy_git目录，当然如果还是不行你试试可以访问GitHub吗，这种报错一般不是你的问题，而是网络问题，GitHub在国内访问速度感人随缘是众所周知的，所以你可以尝试使用加速，如果是使用了加速还无法部署，那么请尝试关闭加速，然后修改host文件对GitHub进行加速。
3.hexo博客部署发布成功帖子以后网页不显示新帖子，这个多半是缓存问题，你可以稍等片刻然后清空浏览器缓存再试试，如果还是没有你就去自己的仓库看看是否文件有更新，如果没有更新请重新部署。
结尾
本期教程就到这里了，教程有什么错误欢迎在评论区指出，如果觉得教程不错的话可以扫一下赞赏码请作者喝一杯咖啡如何？
微信
支付宝