Hexo+Vercel保姆级建站方法

序言

Vercel是我目前觉得最好的网站托管服务，Byethost和Vercel相比，byethost根本啥也不是。vercel的文件都在Github库上，但速度比Github Page快得多。Vercel的建站方式有很多种，这里我介绍一下用Hexo+Vercel+Github建站方法。

注意：学习该文章需要一定的电脑编程基础和Web基础，并不是所有人都读得懂。

注意：本文会使用变量名来替代部分名称，例如{site}代表网站，{name}代表名字等

第一步 本地安装Hexo

1.1 安装Node.js

前往Node.js官网，在LTS版和普通版中选一个。这取决于你自己，不影响建站。

下载后安装即可。

1.2 部署Hexo

新建一个文件夹，用于部署Hexo。新建后，在此处打开cmd，在cmd内输入以下指令

npm install -g hexo-cli
npm install hexo
hexo init {sitename}
cd blog

安装完成后，删除除了{sitename}外的所有文件，然后把{sitename}内的文件移动到当前文件夹。然后在cmd内输入hexo s启动Hexo。不出所料会看到以下画面：

如果没有就把 1.2 重新执行一遍。

第二步 配置你的网站

Hexo已经安装好了，现在你得好好的配置你的新网站。打开_config.yml，来看看吧。

2.1 Site

# Site
title: SNESITE  #标题
subtitle: '欢迎来到SNES的小站！'  #副标题
description: ''  #描述
keywords:  #关键词 用于搜索引擎
author: LAGSNES  #站长
language: zh-CN  #语言 简体中文一般是zh-Hans或zh-CN
timezone: ''  #时间 中国大陆为Asia/Shanghai

上面的代码是你网站的基本信息，可以随意更改。

2.2 URL

# URL
url: https://www.snesite.ml/  #网址
permalink: posts/:abbrlink/  #永久链接格式
permalink_defaults:  #永久链接默认值
pretty_urls:  #改写permalink来美化永久链接
  trailing_index: true  #是否在保留尾部的 index.html，false 去除
  trailing_html: true  #是否在永久链接中保留尾部的 .html

注意：网站URL必须是根目录，且带http，例如https://website.com或http://online.org/，不得是website.com或http://online.org/blog

永久链接指的是文章或页面的链接，通常是变量构成的。例如永久链接是/:year/:month/:day/::post_title，那么网址就是https://website.com/文章年份/文章月度/文章日期/文章名。也可以加你喜欢的文字，比如/posts/:post_title就是https://website.com/posts/文章名

第三步 更换一个漂亮的主题

你的网站已经配置好了，已经是个像模像样的网站了，但自带的Landspace主题太丑了，实在是看不下去。所以先给网站换个新皮。
进入Hexo官网的主题页，选取一个你个人认为漂亮的主题。

3.1 下载主题

挑选好主题，前往Github页下载。打开你的cmd，输入cd themes，然后git clone +主题git。下载完后重命名文件夹，把master或版本号等字样去掉，只留下主题名。

然后打开根目录的_config.yml，定位到themes值，把themes后面的字样改为你的主题，然后保存即可。

3.2 安装主题

保存完毕，在根目录打开终端，输入以下指令：

hexo clean
hexo g
hexo s

随后就可以看到崭新的主题了！如果主题出现白屏、乱码、不能正常显示、火星文，说明主题安装失败，通常是由安装失败、配置错误导致的，可以尝试重新安装或者更改语言为zh-Hans或zh-CN

第四步 新建文章和页面

在cmd内输入hexo n {title}即可新建文章，文章会保存到/source/_posts/{title}.md，Hexo使用的是Markdown编排语言，需要学习Markdown。不过Markdown十分简单，可以访问https://md.mzr.me/简单学习Markdown。

如果你要新建页面，则需要输入hexo n page {title}，页面会保存到/source/{title}/index.md，同样使用Markdown。
你可能会发现，明明新建页面了菜单却不会显示，这是因为没有添加菜单项。打开{sitename}/themes/{themename}/_config.yml 然后找到menu项(可以使用编辑器快速定位)，在menu项下添加你的新页面。每个主题的menu项都不一样，一般注释都有写方法

第五步，上传网站

打开https://github.com，新建一个仓库，然后将网站文件上传到仓库内。完成后打开Vercel官网，注册一个账户，把Github账户和Vercel绑定。随后新建Vercel项目，从你的Github内导入即可。完成后你的网站正式启动了！
具体绑定教程，请查看文章：https://www.snesite.ml/posts/33211/

额外教程 - Hexo-CLI简单用法

到第五步，整个网站已经好了。不过还是很有必要介绍一下Hexo CLI的常用功能

指令	功能
hexo s	启动Hexo
hexo g	创建静态页面
hexo clean	清除网站缓存和静态页面
hexo d	上传至Github仓库