Vercel部署hexo静态博客

本文简述了使用 Hexo 搭建个人博客的过程。

在阅读本文前，你需要准备的有:

一个能够访问 GitHub 的设备,

一段空余的时间,

初中的英语水平或熟练使用翻译工具,

文章包括且不限于:

Node.js 及 npm 的配置,

Hexo 的安装与配置,

Vercel 的使用

准备

安装Node.js和npm

安装Node.js，可以前往Node.js官网下载安装

通过下面的代码查看 Node.js 版本

node -v

如果有显示，那么就说明配置成功了

安装hexo

输入以下命令安装 Hexo

npm install -g hexo

如果你使用mac或linux，请使用root用户或运行以下命令
1
sudo npm install -g hexo

提示 hexo@[版本号] 即为安装成功。

安装 Git和 Github Cli

点击安装GitHub CLI 和Git

注册账户

注册Github账号

再前往Vercel 使用Github账号注册一个账号。这样注册好以后Vercel里面就可以看到你Github里面的项目了。

开始折腾

构建

在你的硬盘中建立一个文件夹，这个文件夹在下面的部分会被叫做工作目录

使用这条命令初始化 Hexo

hexo init

如果你使用mac或linux，可能会失败，请使用以下命令手动安装依赖
1
sudo npm install

之后，使用这几条命令运行一个本地服务器

hexo clean
hexo generate
hexo server

没有意外的话，使用浏览器打开http://localhost:4000 就能够看到 Hexo 的默认首页了

命令作用

hexo clean 清理缓存文件

hexo generate 生成静态页面文件

hexo server 运行一个本地 Web 服务器

hexo new 新建一个博文

hexo new page 新建一个页面

命令	作用
`hexo clean`	清理缓存文件
`hexo generate`	生成静态页面文件
`hexo server`	运行一个本地 Web 服务器
`hexo new`	新建一个博文
`hexo new page`	新建一个页面

配置

在工作目录下，能够看到新生成的_config.yml，这是 Hexo 的配置文件

# Site
title: Hexo # 博客标题
subtitle: ''  # 博客副标题
description: '' # 博客描述
keywords: # 博客关键字(用于 SEO，部分主题可能不支持)
author: John Doe  # 作者
language: en  # 语言
timezone: ''  # 时区

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com # 博客 URL
permalink: :year/:month/:day/:title/  # 文章链接格式
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

这两个链接分别是 Hexo 的插件和主题链接，可自行查看及安装

主题和插件一般都会有自己的文档，本文不再提供详细的配置方式

部署

在终端中执行

gh auth login

来登录到 Github

然后，在工作目录下执行

git init
git add .
git commit -m "Initial commit"
gh repo create

根据提示，创建一个新的 GitHub 仓库并将你的 Hexo 源文件上传到该仓库(可以选择 Private)

前往 vercel 导入你的 Hexo 仓库

如果没有正确识别出框架的话，在 FRAMEWORK PRESENT 中手动选择 Hexo

没有其他问题的话，点击 Deploy 即可

之后，在 vercel 里点击你的项目，就能够 Visit 你的博客了

域名访问

vercel

vercel自动分配了.vercel.app 结尾的免费二级域名，但是不建议使用

.vercel.app已被GFW屏蔽，国内无法访问

自己的

在 vercel 中添加你的域名

按照提示在 DNS 服务商添加 A 记录

这时就已经可以通过域名来访问你的博客了

写文章

本地

在工作目录中执行以下命令

hexo new [文章名]

在/source/_posts中新建的文章进行编辑

接着执行以下命令进行本地调试

hexo clean
hexo generate
hexo server

没问题就使用 ctrl+c 结束

提交