零成本！搭建个人博客(Hexo + GitHub + Vercel)

搭建个人博客の相关链接： Node.js官网 Hexo官网 Typora官网 Vercel官网 GitHub官网 Git官网

安装教程

预先说明

此方式是通过Windows环境运行Web程序并生成静态文件，上传至GitHub托管，使用Vercel部署网站达到零成本（存储成本￥0，域名成本￥0，服务器成本￥0）

安装必须软件

首先我们需要安装 Node.js 和 Git，你可以在本文开头找到它们的官网链接 Windows 用户下载完安装包，直接安装即可（看不懂的步骤直接下一步就行）；其他系统的用户，安装教程可见官方文档

安装 Hexo

1. 按下 Win + R，输入cmd回车

2. 输入（可复制粘贴）下方代码并回车

npm install -g hexo-cli

建站

1. 找到一个合适的文件夹，点击地址栏，输入cmd回车

2. 输入下方代码并回车（记得修改“项目名”）

hexo init 项目名

3. 等待项目创建完成，依次输入下方代码并回车（记得修改“项目名”）

cd 项目名

npm install

hexo server

4. 等待项目启动完成，打开终端显示的链接，就能看到网站内容了

上图为 Hexo 的默认主题，不太符合我们的审美，我们可以修改主题，以达到示例截图展示的效果

基础配置

你可以在_config.yml中修改大部分的配置，主要修改的是 网站 Site 的相关参数，其他内容可参考官方文档进行修改

我推荐的代码编辑器是Visual Studio Code，写代码、部署仓库都比较方便

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
keywords	网站的关键词，支持多个关键词
author	您的名字
language	网站使用的语言，一般无需修改。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans 和 zh-CN
timezone	网站时区，一般无需修改。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai

其中，description主要用于SEO，通常建议在其中包含你网站的关键词；author参数用于主题显示文章的作者

主题配置

接下来我们要下载并配置第三方主题

1. 打开 Hexo 官网主题页

Hexo 官网主题页

2. 找到自己满意的主题（我这里以 Shoka 主题作为演示）

3. 点击主题的标题跳转至它的 GitHub 项目页

4. 在页面下方的 README.md 中一般都会有安装&配置说明（这个 Shoka 主题有详细的中文使用说明），跟着说明一步一步配置即可，详细的配置过程我就不演示了

编写文章

1. 进入 /source/_posts 目录，这里存放着所有文章 Hexo 仅支持 Markdown 格式的文章，相关语法可自行上网查询，推荐编辑器：Typora

2. 写好文章直接保存在 /source/_posts 目录即可

网站上线

部署至 GitHub

在本地配置好 Hexo 后，我们要将其部署至云端仓库 当然，如果你仅仅想在本地运行自己的网站，那么你已经可以离开本文，去写自己的文章了?

1. 打开 GitHub，注册、登录好自己的账号，点击右上角 +，选择 New repository

2. 填写名称和简介，点击最下方的 Create repository 按钮

3. 回到本地的博客文件夹，右键点击 Git Bash Here

4. 依次输入下方代码

git config --global user.email "你的邮箱地址"

git config --global user.name "你的用户名"

git init

git add .

git commit -m "描述"

↑ 此代码的“描述”可以不填，直接使用git commit即可

git remote add origin 仓库地址

git push -u origin master

相关截图（点我展开/收起） 现在回到 GitHub 仓库，可以看到文件已经成功上传了

部署至 Vercel

1. 打开 Vercel 的官网，注册、登录好自己的账号
2. 点击中间的 Create a New Project

3. 选择 Continue with GitHub

4. 选择自己博客的仓库导入

5. 出现 Congratulations! 说明部署成功，点击右侧 Continue to Dashboard 就能看到自己的网站链接了

更新文章

1. 写好文章，保存在 /source/_posts 目录

2. 回到博客文件夹，右键点击 Git Bash Here

3. 再依次输入下方代码即可（更新至 GitHub 仓库，Vercel 会自动更新）

git add .

git commit -m "描述"

git push -u origin master

最后的话

感谢你看到这！不出意外的话，你已经搭建了一个属于自己的网站，这是一件很酷的事对吧？?尽管过程很繁琐 不过，也有些你需要注意的地方，在最后的“网站上线”章节，GitHub 和 Vercel 你不一定能在中国大陆顺利访问，过段时间我会再写一篇使用 Gitee 的方法（又开始挖坑了），用此方法就能在中国大陆流畅使用了?在使用 Git 的时候，难免会遇到各种各样的报错，请自行上网查阅错误原因以及解决办法?