vercel免费部署个人博客，并利用GitHub自动更新

参考：使用Vercel+GitHub快速构建Hexo博客 - 知乎 (zhihu.com)

如何使用 vercel + hexo 搭建博客_慕课手记 (imooc.com)

1. 介绍

vercel: Vercel 提供了一个云平台，可以优化整个项目开发和部署体验，它有很强大的功能值得去探索，个人使用是免费的，提供了域名访问，使用方便快捷。
img

hexo: Hexo 是一个基于 nodejs 的静态博客网站生成器，通过使用脚手架安装后，命令操作简单，直接开箱使用，支持丰富的主题，支持高度的自定义化，主要使用 markdown 语法。你可以自行开发插件，优化你的博客。
1

2.Vercel 一键部署原生 Hexo

去 https://vercel.com/ 网站用 GitHub 注册一个账号后并登陆。

然后重新输入网址 https://vercel.com/ 并访问

img

这大概就是大家看到的页面，点击 New Project 按钮，然后点击 Browse All Templates → 按钮，在第 4 行的第 1 个就是 Hexo

img

点击进去，可以看到图片所示的内容。

img

选择灰框勾选的内容，也就是你的 GitHub，然后点击 Select 按钮，然后点击 GitHub 在 GIT SCOPE 处选择你想要储存 Hexo 的用户，在 REPOSITORY NAME 处填上你想要储存 Hexo 的仓库，并勾选 Create private Git Repository 选项，这个选项是将该仓库设为私有仓库，对他人不可见。然后点击 Continue 按钮，然后什么都不需要修改，直接点击 Deploy，等待它自动完成构建，3 分钟之内完成，并分发一个免费的二级域名，可以暂时用于使用（不会回收，但不建议使用）

img

img

部署完成后，它就和你刚刚所填写的仓库绑定了，一旦你的仓库有什么变化，它就会自动同步部署，全过程大概 5 分钟可以完成部署。

3. 在本地构建hexo环境

上一步我们完成了对hexo的云端部署，vercel默认是从GitHub拉取数据，故若要对网站进行更改，则必须要对Github进行更改。而对Github更改最简单的方式就是链接云端与本地，在本地hexo环境下进行更改后推送至Github。

所以，我们首先要在本地构建一个hexo环境。

安装依赖：

  1. 安装git

    在Git for Windows下载，一路默认安装即可，详细参见配置git文章

  2. 安装node.js
    在Node.js (nodejs.org)下载，安装好 nodejs 后，也会相应的安装上 npm。

安装hexo：

在资源管理器右键菜单或开始菜单里，可以找到 Git Bash ，打开后是个命令行界面，输入：

1
npm install -g hexo

等待安装完毕

4. 链接Github

打开 Git Bash ，运行下面的命令 :

1
ssh-keygen -t rsa -C "{{你的电子邮箱地址}}"

连续 3 次回车，最终会在用户目录下生成个包含公钥私钥等数据的目录 ( 一般是 C:/Users/{{你的用户名}}/.ssh/ ) 。

img

打开这个目录，找到 id_rsa.pub 文件，用你喜欢的二进制文本编辑器 ( 记事本 ) 打开并复制里面的内容。前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key ( 即 [该链接](Add new SSH keys (github.com)) )：

将刚复制的内容粘贴到 Key 中，Title 填你喜欢的，点击保存 ( Add SSH Key ) 。

img

在Git Bash运行下方命令 :

1
2
git config --global user.name "{{你的 GitHub username}}"
git config --global user.email "{{你的 GitHub 注册邮箱地址}}"

打开 Git Bash ，运行下面的命令 :

1
ssh -T git@github.com # 此处邮箱地址不用改

如果提示 Are you sure you want to continue connecting (yes/no)? 请输入 yes 并回车。

1
Hi {{你的 GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息则说明配置成功。

5. 拉取云端数据，进行修改

这里使用Github Desktop进行连接（git的命令行界面实在是太痛苦了）

从[官网](GitHub Desktop | Simple collaboration from your desktop)安装Github Desktop

打开，按下图clone repository选择hexo即可

image-20210824170947018

在项目文件夹下，打开Git Bash，首先需要安装项目依赖，通过npm install 或 cnpm install 或yarn install皆可安装依赖。

依赖安装成功后，执行hexo server -p $PORT即可启动项目，其中$PORT 默认 4000，你也可以修改端口。hexo 也提供了简易方式启动命名：hexo s，启动后在浏览器访问：localhost:4000即可打开。

img

6. 在本地写文章，并推送到云端

进入 Hexo 所在的目录，Git Bash输入以下命令

1
hexo new'{{文章名称}}'

运行后 source\_posts\ 目录下就多了 {{文章名称}}.md 文件，单击文件，hexo 默认生成了头部信息。

文件内容结构如下 :

1
2
3
4
5
6
7
8
---
title: {{文章名称}}
date: {{文章时间}}
categories: {{文章分类}}
tags: {{文章标签 [tag1,tag2,tag3]}}
description: {{文章摘要}}
---
{{文章正文}}

文章内容支持 Markdown 语法，直接用编辑器修改即可，参考另外一篇文章进行写作。

写好后，仍然使用Github Desktop推送到云端，按下图所示操作：

image-20210824171333304

过几分钟会收到vercel给你发来的邮件，访问网页，你的博客已经自动更新完成了。

image-20210824171532218