hexo+Vercel+butterfly搭建年轻人的第一份博客

前言

最近购买了一个vps，本想着在vps上搭建个人主页，在网上冲浪中发现了Vercel这个好东西，免费/实用/提供免费域名/自动部署。本文就记录一下我使用hexo+Vercel+butterfly搭建个人博客的全过程

hexo是一个基于node.js的博客生成框架，主要使用markdown编写博客
Vercel是静态网站托管平台，可以与github仓库连接，达成push后自动部署的效果。相对于github pages等同类型托管平台，Vercel使用方便，同时国内访问速度较快，是搭建博客的好选择
butterfly是hexo的一个相当优秀的主题，本篇博客就是基于butterfy搭建

在搭建个人博客前，我们首先要安装node.js,git,hexo-cli,并注册Vercel

首先在node.js官网下载安装包进行安装，按照网上相应的安装步骤安装即可，mac用户也可以通过homebrew安装

首先打开终端输入

1	brew install node

安装后输入如下命令

node -v

若出现版本号，即为安装成功

windows的安装请参考网上教程，mac用户同样可以用homebrew安装

1	brew install git

安装后输入如下命令

1	git --version

若出现版本号，即为安装成功

使用npm安装

1	npm install hexo-cli -g

安装后输入如下命令

hexo -v

若出现如下信息，即为安装成功

在Vercel官网注册，推荐使用github登陆

Vercel有多种框架的模板，这里我们选择hexo模板

使用github创建仓库

创建好仓库后出现创建团队，点击跳过

你的博客就创建成功了

若你有自己的域名，也可以在Domain中修改域名，注意需要配置域名解析，具体可参考Vercel修改域名教程

将github仓库克隆到本地就可以编辑你的博客了

hexo clean #清除缓存
hexo g #打包
hexo s #启动本地服务
#在本地预览时可使用以上三个命令一键三连
hexo new "title" #新建博客

hexo拥有300多套主题，本文讲解butterfly的基础配置，具体配置请到butterfly官网查看

在hexo项目的根目录，打开终端输入

1	git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

修改hexo根目录下的_config.yml

1	theme: butterfly

在根目录新建_config.butterfly.yml,将themes/butterfly/_config.yml中的内容复制到_config.butterfly.yml中，之后配置只需要在_config.butterfly.yml中配置即可

运行三条命令，即可在本地预览博客

1
2
3

hexo clean #清除缓存
hexo g #打包
hexo s #启动本地服务

将本地修改push到github后，即可在Vercel提供的域名查看个人博客了

由于主题中自带.git文件夹，所以不能push上去，可以将.git文件夹转移到其他地方，清除git缓存，再进行push