零成本部署博客

Published: at 15:57

说明

本教程将采用hexo+vercel+netify cms的方案进行部署 本方案的优势

相关准备

账号

本地环境

相关链接 Node.js Git

汉化（非必须）

英语好的可以无视。

Git bash设置中文

打开Git bash后，命令窗口右键Options —>Window —>UI language，下拉选择 zh_CN

Git GUI安装中文

Git GUI汉化包 下载好后按照作者文档将zh_cn.msg文件移动到指定位置 至此，准备工作结束。

在线部署

获取项目文件

访问项目地址

  1. 点击Use this template，然后进行你自己的设置，建议公开度设置为私有。
  2. 访问项目文件source/admin/config.yml，并修改其中的repo为你自己的路径。例如我的github用户名为123而fork后创建的库名字为abc-hexo，那么这个值就填123/abc-hexo。
  3. 修改base_url值为你博客的域名，注意需要带上https://
  4. 还有一点就是这2个值的冒号后面是需要留空格的。

创建一个oauth应用

  1. 上滑网页，然后点击GitHub右上角你的头像
  2. 点击设置（倒数第二个）
  3. 然后往下滑，在左边找到开发者设置
  4. 转到后点击第二个，点击右边创建应用
  5. 应用名称和描述随便，第二个输入框Homepage URL填入你在上面填的base_url值为你博客的域名，注意仍需要带上https://，第四个框Authorization callback URL填入你的域名（就是上面第二部设置的）/callback
  6. 完成后点击生成新的Client secrets，将值复制下来。

在vercel部署博客

传送门

  1. 选择你的博客
  2. 添加环境变量OAUTH_GITHUB_CLIENT_ID和OAUTH_GITHUB_CLIENT_SECRET,这两个值都可以在上一步的应用里找到。
  3. 点击Deploy按钮，等待部署完成。
  4. 在项目的Settings > Domains中更改为你的域名（就是上面一直设置的值）
  5. 更改好了后，你的博客基本上就完成了。你可以在你的域名后面加上/adinm/登录你的GitHub账号访问后台。
  6. 接下来是一些高级操作，可以选择性观看。当然，都看到这里了，我猜没有人会拒绝继续看下去吧。

将你的博客克隆到本地

  1. 点击你右下角的开始菜单，在所有应用里找到Git GUI并启动
  2. 点击帮助>显示ssh密钥，然后生成一个密钥
  3. 复制密钥，然后转到GitHub设置下的ssh，将你复制的key粘贴上去，名称随意。
  4. 接下来设置本地账户
  5. 设置用户名 git config --global user.name "yourname"
  6. 设置用户邮箱 git config --global user.email "myemail@xx.com"
  7. 注意替换为你自己的内容。
  8. 打开Git GUI，选择克隆已有版本库。源位置在你的github项目代码可以看到。如git@github.com:jhq223/hexo-netlify-cms-vercel.git。目标位置你就选择一个想要存放的路径（该目录必须不存在，而且建议不要用中文）
  9. 推荐使用VS COde来进行本地写作
  10. 按住win+R，输入cmd，在cmd里面安装hexo
Terminal window
1
npm install hexo-cli -g

如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行

Terminal window
1
sudo npm install hexo-cli -g

在本地运行hexo

  1. 在你存博客文件的目录鼠标右键
  2. 选择Git Bash here
  3. 然后在弹出的终端输入hexo s本地运行
  4. 接着你可以在浏览器打开 http://localhost:4000进行预览。
  5. 点击Ctrl+C可以停止。

这样做的一些好处

安装主题

  1. 在根目录新建themes文件夹，将主题下载到本地并解压到该目录，如\themes\yun 这个yun文件夹中就是下载的主题文件。
  2. 修改配置文件，启用主题。

将本地修改后的代码上传

  1. 启动Git GUI 打开项目
  2. 确保当前分支是main，如果不是就改一下本地分支名字
  3. 依次点击下面的扫描，缓存改动等，最后点击上传。
  4. 上传失败请尝试勾选强制覆盖已有的分支。