使用Hexo和Vercel快速搭建你的个人博客

前言

在这个信息爆炸的时代，拥有一个属于自己的博客，记录生活、分享知识，显得尤为重要。Hexo和Vercel的组合，以其简洁、高效的特点，成为了搭建个人博客的理想选择。本文将带你一步步完成Hexo博客的搭建，并将其部署到Vercel平台。

什么是Hexo？

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内即可利用靓丽的主题生成静态网页。

优点：

  • 快速生成静态网页： Hexo能够快速将Markdown文件转换成静态HTML页面。
  • 支持Markdown： 使用Markdown编写文章，让你专注于内容创作。
  • 丰富的主题： 拥有众多精美的主题可供选择，定制你的博客风格。
  • 强大的插件系统： 丰富的插件可以扩展Hexo的功能。

什么是Vercel？

Vercel是一个用于前端和静态站点的云平台，提供快速的部署和CDN加速。

优点：

  • 简单易用： Vercel的部署流程非常简单，几分钟即可完成部署。
  • 快速部署： Vercel提供快速的CDN加速，让你的博客访问速度更快。
  • 免费SSL证书： Vercel提供免费的SSL证书，保证你的博客安全。
  • 自动部署： Vercel可以与Git仓库关联，实现自动部署。

准备工作

在开始之前，请确保你已经安装了以下工具：

  • Node.js： Hexo基于Node.js，所以需要安装Node.js环境。
  • Git： 用于版本控制和部署到Vercel。

步骤一：安装Hexo

打开你的命令行工具，执行以下命令安装Hexo：

Copy Code

1
npm install -g hexo-cli

步骤二：初始化Hexo博客

选择一个你喜欢的目录，作为你博客的根目录，然后执行：

Copy Code

1
2
3
hexo init myblog
cd myblog
npm install

步骤三：本地预览

安装完成后，可以先在本地预览一下：

Copy Code

1
hexo server

然后打开浏览器，访问http://localhost:4000，你应该能看到Hexo默认的博客页面。

步骤四：撰写文章

使用以下命令创建一篇新文章：

Copy Code

1
hexo new "你的文章标题"

这会在source/_posts目录下生成一个Markdown文件，你可以用你喜欢的编辑器打开它，然后开始写作。

步骤五：生成静态文件

文章写好后，执行以下命令生成静态文件：

Copy Code

1
hexo generate

这会在public目录下生成博客的静态文件。

步骤六：部署到Vercel

  1. 注册Vercel账号： 前往Vercel官网注册一个账号。
  2. 安装Vercel CLI：

Copy Code

1
npm install -g vercel
  1. 登录Vercel：

Copy Code

1
vercel login
  1. 部署：

Copy Code

1
vercel

Vercel会引导你进行部署，选择你的博客目录（也就是public目录的上一级目录），然后Vercel会自动部署你的博客。

注意：Vercel会自动检测到你的项目是Hexo项目，并自动进行构建。如果Vercel没有自动构建，你需要在Vercel的项目设置中，手动配置构建命令为hexo generate，输出目录为public。

步骤七：配置域名（可选）

Vercel会给你一个默认的域名，你也可以将你自己的域名绑定到Vercel。

结语

通过以上步骤，你已经成功搭建了一个基于Hexo和Vercel的个人博客。现在你可以开始撰写你的第一篇文章，分享你的知识和生活。

更多

  • Hexo主题： 探索更多Hexo主题，打造个性化博客。
  • Hexo插件： 使用Hexo插件扩展博客功能。
  • Vercel配置： 深入了解Vercel的配置选项，优化你的博客性能。