hexo+vercel博客安装、部署和使用教程

前言

本文记录此博客的安装步骤和使用教程，本博客使用Hexo 框架搭建，使用的是oranges 主题，采用vercel 进行部署。

准备工作

本地机器安装好node.js、git 环境，具体教程本文不作介绍，请自行搜索教程安装使用。

请提前注册好github 账号、vercel 账号

安装Hexo

1、控制台执行如下命令：

npm install -g hexo-cli

2、验证安装是否成功：

hexo -v

3、初始化项目：

hexo init Blog

4、上面命令会生成一个Blog 文件夹，进入后，安装依赖：（ps：后面执行的所有命令，均在此文件夹下执行）

npm install

5、创建静态文件并启动项目：

hexo g && hexo s

6、访问博客页面：

http://localhost:4000/

更改主题

1、下载主题（存放在当前下文件夹下的themes/oranges 文件夹中）：

git clone https://github.com/zchengsite/hexo-theme-oranges.git themes/oranges

2、更改主题配置：修改blog 文件夹中的_config.yml 中的 theme (Ps:修改博客名称、描述等内容，也在这个配置文件中修改)

3、重启项目：

#hexo clean 清除缓存文件
#hexo generate 生成网站静态文件
#hexo server 启动本地服务器
hexo cl && hexo g && hexo s

4、创建导航栏页：

#创建 标签 页
hexo new page tags 
#创建 友链 页
hexo new page friends
#创建 关于 页
hexo new page about

5、页创建完成后，会在source 文件夹中生成一个文件夹及index.md ，在index.md 中添加各自的type，与页名相同，如图：

6、启用对应的导航页：修改themes中对应主题的_config.yml（ps:主题中的其他配置也在这个文件中修改）

使用Hexo发布文章

1、新建文章：

hexo new <title>

2、创建成功后会在source文件夹下的_posts生成文章，在对应的文章.md中补充正文内容即可。

3、Hexo 创建的文章中会有一段前置信息(Front-matter)：

配置项	意义
title	网页文章标题
date	文章创建如期
comments	文章评论功能是否启动
tags	文章标签
categories	文章分类
keywords	文章关键字
updated	文章更新时间

4、重启项目，查看文章：

hexo cl && hexo g && hexo s

上传到github仓库

1、在github上新建一个仓库,拿到仓库克隆地址：git@github.com:Run1997/hexo-blog.git

2、同步本地hexo项目到github仓库中：

git init
git remote add origin git@github.com:Run1997/hexo-blog.git

3、安装hexo git 部署组件

npm install hexo-deployer-git --save

4、修改Blog 目录下的_config.yml 中的 deploy 参数

5、提交到github 仓库：

hexo cl && hexo g && hexo d

部署到vercel

1、使用github 账号登录/注册 vercel，Add new Project

2、选择自己github 账号中的博客仓库

3、Deploy 即可

4、查看博客：访问部署成功后项目提供的默认Domains 即可查看博客。

绑定域名

本网站使用namecheap 申请的域名，使用cloudflare 提供的免费CDN

1、在namecheap申请域名（ps：可以使用学生邮箱白嫖一年免费.me 域名）

2、在vercel 上绑定域名

3、在cloudflare 给域名使用免费CDN，在 DNS 配置下添加一条CNAME记录，值指向Vercel的CNAME服务器（在上一步绑定域名时vercel 会提供）

4、在上一步中，cloudflare 会给出 DNS 的服务器，在namecheap 上修改域名的DNS 服务器地址，如下所示：