俺部署博客就是使用本篇文章的方案,采用的是 hexo + github + vercel

1. 安装环境


搭建并运行 hexo 需要以下前提条件

  • Node.js (运行 hexo 的基础环境,建议使用 Node.js 12.0 及以上版本)
  • Git (简单理解为管理和部署代码到网上的工具,hexo 生成的静态网站如果只是在本地使用,不需要发布到网络环境中,可不需要)

由于介绍安装配置 node.js 和 git ,会导致篇幅过长,影响观感,这里需要转移阵地,下面各自的文章有详细流程

1.1 安装Node.js

Node.js官网

这里是 node.js 的详细安装流程(占位)

1.2 安装Git

Git官网

这里是 git 的详细安装流程(占位)

2. 搭建 hexo


2.1 安装 hexo

第一步便是先安装 hexo ,下面是安装 hexo 的命令行,直接复制,然后进入 windows 终端粘贴回车即可。由于默认仓库位于国外,国内访问可能不稳定,下载速度会有影响,可以使用魔法,或者使用国内的镜像,如淘宝镜像等:

1
2
3
4
5
6
7
8
9
# 方案1:无网络限制的时候正常使用
npm install -g hexo-cli

# 方案2:网络受限,可以在安装的时候指定从淘宝镜像安装,每次安装都需要加额外的命令
npm install -g hexo-c1li --registry=https://registry.npm.taobao.org

# 方案3:网络受限,全局配置 npm 使用淘宝镜像,可以将 npm 的默认仓库永久设置为淘宝镜像,后续所有安装无需多余命令
npm config set registry https://registry.npm.taobao.org
npm install -g hexo-cli

注意:镜像源可能不是最新的,如果无法安装,可以自行网络搜索

2.2 初始化项目

第二步便是项目初始化,具体流程如下:

  1. 先创建一个空文件夹,比如俺就创建了一个名叫 myblog 的文件夹
  1. 在终端中进入该文件夹输入下面这行命令,代表对该文件夹进行项目初始化,结束后,这个文件夹就代表了你的 hexo 项目
1
hexo init  # 对项目进行初始化
  1. 下面就是文件夹初始化后的内部的内容
  1. 在终端中进入该项目(文件夹),输入下列命令,会生成一个 url ,直接复制到浏览器中就可以访问成果了
1
2
hexo g  # hexo会帮你生成网站静态文件
hexo s # 运行本地web服务器
  • hexo g :命令 hexo generate 的简写,代表生成网站静态文件
  • hexo s :命令 hexo server 的简写,代表启动本地服务器,默认情况下,访问网址为: http://localhost:4000/
  1. 接下来我们在浏览器输入 http://localhost:4000/ 访问一下这个网站

貌似不太美观,没关系,后面可以根据自己的喜好配置主题,安装插件,如俺博客使用的主题便是大名鼎鼎的 butterfly 主题,顺便加上了一点点插件。听起来好像很复杂,别担心,其实很简单

至此 hexo 项目基础框架已经搭建好,恭喜你,成功搭建了你自己的第一个hexo博客项目