我是短小精悍的文章摘要(๑•̀ㅂ•́) ✧

写在前面

今天是时隔3年后再次部署Hexo。之前搞过一次,基本部署完就搁置了,今天是硬着头皮再来一次,还专门为此买了域名,希望自己可以正经用起来,认真记录自己的学习过程和成果,免去记忆碎片化和健忘。

关于为什么使用vercel+github的方式部署Hexo

这个哈,我只是有所耳闻,知道可以这样搞,但不清楚为啥。后来看别人的贴子,讲是因为用github部署Hexo要求仓库必须公开,对写非开源主题的不太友好。呃,这个好像和我也没太大关系,我就是体验一下哈哈。

vercel部署Hexo

  1. 访问vercel官网vercel.com,注册并登录。
  2. 点击New Project,点击Browse All Templates,选中Hexo。在Create Git Repository菜单下点击Github,在GIT SCOPE中选择或者添加你的github账户,在repository中填写一个新的仓库名。其中,Create private Git Repository选项是默认勾选的,意思就是这个仓库是私人的,别人看不到。最后点击Create即可等待创建成功。
  3. 默认送的域名不知道是网络的问题还是dns污染,我的是访问不了的,最后只能去腾讯云买了一个,买的配置上去访问是正常的。

本地环境安装

npm和git安装

我的是windows环境,按照别人的教程,需要安装npm,git。我下载的是msi的安装包,官网地址如下:

程序安装完毕后,可以打开git-bash,用命令输出一下版本,已验证是否正常安装。
npm -v
node -v
git -v

确认安装正常之后,npm还需要做一件事,换一下软件仓库的源,将默认指向官网的源指到国内的镜像,这样安装软件的时候会快一点。
npm config set registry https://registry.npm.taobao.org

环境准备完毕后,开始安装Hexo和配置git。

Hexo安装

在git-bash中,用npm安装Hexo
npm install -g hexo

配置git

  1. 生成本地密钥
    打开git-bash,运行:
    ssh-keygen -t rsa -C "邮箱地址"
    一直回车,最后会在当前目录的.ssh/目录下生成id_rsa和id_rsa.pub,其中id_rsa.pub是公钥,需要将其内容粘贴到github的配置文件中。
  2. 配置github的ssh key
    打开github网址,登录账号后,点击右上角的头像图标进入设置,在左侧栏找到SSH and GPG keys,点击右边的New SSH Key,将刚刚生成的id_rsa.pub的内容粘贴进去即可。
  3. 设置git
    git config --global user.name "GitHub的账号名"
    git config --global user.email "GitHub的注册邮箱"
    可通过下面的命令验证配置是否成功:
    ssh -T [email protected]
    如果提示Are you sure you want to continue connecting (yes/no/[fingerprint])? 打yes,最后会提示如下:
    Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.说明配置成功。

如何在本地修改Hexo

  1. 将线上的Hexo克隆一份到本地。打开git-bash,进入到你想存放Hexo的目录,执行:
    git clone https://github.com/用户名/仓库名称.git
    ==注:这里会弹出窗口来登录github,可以通过浏览器输入账号密码,也可以通过设备码,要留意是否有弹出的窗口。(这个原因教程中说是因为这个仓库是私有的,所以需要输入账号密码)==

  2. 安装插件Hexo-deployer-git
    npm install hexo-deployer-git --save
    这个插件现在还没清楚是干嘛的,后面了解深入了再补充。

  3. 写文章
    新建文章。在Hexo的目录下执行:
    Hexo new '文章标题'
    这个命令会在source_posts\目录下生成标题.md的文件,可以用编辑器对这个文件进行编写,支持markdown的语法。
    文章的结构如下:

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: {{文章名称}}
    date: {{文章时间}}
    categories: {{文章分类}}
    tags: {{文章标签 [tag1,tag2,tag3]}}
    description: {{文章摘要}}
    ---
    {{文章正文}}
  4. 文章发布
    hexo g 生成静态文件
    hexo s 开启本地服务(可通过本地浏览器的http://localhost:4000来访问)
    hexo d 远程部署Hexo(需要配置_config.yaml中的deploy部分)
    hexo clean 清理缓存
    以上是针对本地发布hexo和远程发布到github的操作介绍,而对我们这种通过vercel自动拉取github的hexo源文件自动部署的情况来说,我们只需要在本地改好md文件,git push到github对应的仓库就可以了。总结一下,即:

    1
    2
    3
    4
    5
    6
    git clone                   #从vercel模板生成的github仓库拉取一份hexo
    本地编辑
    git add . #本地计入git跟踪
    git commit -m '说明' #提交至本地仓库
    git push origin 远程分支名 #将本地仓库推送到远程的github仓库 (git push -f为强制覆盖,删除远程分支的所有提交)
    然后等待vercel自动拉取部署就好了

参考

  1. 使用Vercel+GitHub快速构建Hexo博客
  2. 如何使用 vercel + hexo 搭建博客