前言

现在，我们已经搭建好了本地的写作环境、选择了一个自己心仪的写作软件，并写好了第一篇文章。想让别人看见，或者随时能让自己看见，就需要一个部署网站的服务。本章，我将带您一起，挑选一个低成本的部署服务。

为什么要叫静态网页部署

Hexo有两种部署方式：

  • 完整服务部署。简单来说，就是利用Hexo的server插件，实时监控文件更改并编译页面。这种方式可以让作者直接地观测所做的修改，并予以调整。并且，集中式的源文件对多人协作来说比较方便。但缺点是比较耗费资源。毕竟，这种方式展现出来的依旧是静态网页。

团队协作可以使用git的分布式版本管理，集中式管理是一种简单但是比较蠢的办法。

  • 静态部署。这是Hexo最大的优势。通过生成静态网页文件，直接将静态网页部署到成本低廉的边缘网络服务器上。

我们本篇只讲静态部署。如果你需要动态部署，只需要拥有一台公网服务器即可。

以下部署方式均默认您已经拥有相关服务的账号。注册均免费。

首先，我们要配置好git，这是下述所有操作的前提。

配置git以连接到你的Github账号

  1. 在git bash中，输入ssh-keygen -t rsa -C "<你的Github注册邮箱>" 生成公私钥。

    不要将你的私钥共享给任何人，否则可能会发生数据泄露或导致账号风险。

    passphrase留空即可，出现randomart image即生成完成。文件默认生成在 `C:\Users\<你的用户名>\.ssh\` 中，均可用记事本打开。

  2. 在Github SSH and GPG keys设置页面，选择New SSH key。如下图，Title填写自己能分辨出设备或用途的名字，key输入框输入刚才生成的id_rsa.pub文件内容。填写完成后点击Add SSH key。

    注意，输入的是公钥而不是私钥。 这样就是连接成功了。

  3. 在git bash中输入 ssh -T git@github.com ，询问 Are you sure you want to continue connecting 输入yes，出现如下内容即为连接成功。

    1
    Hi <你的用户名>! You've successfully authenticated, but GitHub does not provide shell access.

  4. 配置环境变量。调出命令行，输入：

    1
    2
    git config --global user.email "[你的Github注册邮箱]"
    git config --global user.name "[你的Github用户名]"

使用 Github Pages

Github是全球最大的开源代码仓库。Github Pages是其一项服务，用于分发静态网页。其目的是让开发者拥有自己或所属项目的主页。

  1. Github Pages需要一个以[用户名].github.io为名的公开仓库。点击个人主页右上角的加号“+”，选择“New Repository”

  2. 进入创建页面后，仓库名中输入[用户名].github.io，并确认仓库状态为“Public（公开）”。其他保持默认即可。

  3. 接着，我们回到博客的根目录，右键空白处选择“在终端中打开”，安装hexo的git部署插件。输入npm install hexo-deployer-git --save

  4. 安装完成后，打开位于博客根目录下的_config.yml，在最下方的deploy填入以下内容：

    _config.yml
    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: https://github.com/[你的用户名]/[你的用户名].github.io
      branch: main
      message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

    这里由于在虚拟机上没有安装较为专业的文本编辑软件，记事本可能缩进不明显。以代码框所写配置为主，图片仅作示例。

    其中，message部分为commit信息，其会在下图中红色框所示，你可以自己定制（但必须要有）。如果你修改了branch名，相应地，上述branch也要作出修改。修改完成后，保存。

  5. 生成并上传。在命令行中输入：

    1
    hexo g -d
    大功告成！

  6. 现在，访问[你的用户名].github.io即可看到自己的博客啦！

  7. 之后，每一次你对文章或博客进行什么更改，在更改完毕并保存后，在命令行中输入hexo g -d就可以了。

Cloudflare Pages部署

使用Cloudflare Pages部署有两种方式。一种是直接使用静态文件。还有一种，是利用Pages Functions云端编译静态文件，然后再部署。

直接使用静态文件

在这之前的步骤与Github Pages一样。只不过，你的仓库（repository）可以不用公开，而且仓库名可以随意填写。如果你跳过了Github Pages来到这里，请先回到上方，按照Github Pages的方法做完一遍。

  1. git部署完成后，我们打开Cloudflare控制台，在左侧边栏中找到Workers和Pages，在“概述”页中点击“创建”。

  2. 在“创建应用程序”页面中，选择“Pages”选项卡，点击“连接到Git”。

  3. 如果你还没有将你的Cloudflare连接到Github，请先点击“连接Github”，这会跳转至Github。登录你的Github账号，然后在下一个设置页面中，“Repository access”可以选择All，也可以选择“Only select repo”，但是要包含你的静态页面仓库。之后，点击下方的保存。

  4. 回到Cloudflare。现在，页面中应该会显示你Github的仓库。选择你存储静态页面文件的仓库。确认选择后，点击下方的“开始设置”。

  5. 来到“设置构建和部署”页面。项目名称可以随便填，生产分支选择你仓库中存储静态页面文件的branch，框架预设保持默认“无”，构建命令和输出目录均留空，其余保持默认，点击下方的“保存并部署”。

    如果你没有自己的域名，这里的项目名称将决定你博客的域名。域名即项目名称填写框下所述。

  6. 当出现以下页面时，即为部署成功。现在，你可以点击突出的pages.dev链接，查看部署好的页面。

    大功告成！

    pages.dev和workers.dev域名在国内的连接性非常糟糕。如果访问不了的话，可以购买一个域名，并将其解析到Cloudflare，然后在此Pages中添加自定义域。此部分的详细教程，我会另出一篇文章讲述。敬请期待。

  7. 之后，每一次你对文章或博客进行什么更改，在更改完毕并保存后，在命令行中输入hexo g -d就可以了。

使用Pages Function云端编译并自动部署

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
Cloudflare Pages每月有500次免费的部署次数。无限量访问。

Cloudflare提供了许多免费的服务供爱好者或小型开发者使用。请珍惜这些免费服务，合理使用。

如果你经常在不便于本地编译的设备上写作，只能修改源文件，比如手机，那么这个方式就非常适合你。你只需要把东西都写好，然后上传到Github上（也可以自行上传），Cloudflare会自动帮你编译并部署，十分方便。

  1. 在Github上创建一个私有仓库，名称随意（建议好拼好记）。

    创建私有仓库的原因是，源码里可能会包含key等私有信息，这些信息不能被公开。Cloudflare经过授权后，可以访问和拉取私有仓库。这样就能避免信息泄露。

  2. 来到博客源文件的根目录，打开终端，确认操作目录是否为根目录（输入pwd即可检查操作目录）。然后，输入以下命令，将本地源文件推送到你的Github仓库中：

    1
    2
    3
    4
    5
    6
    git init
    git add -A
    git commit -m "[Commit信息]"
    git branch -M main
    git remote add origin https://github.com/[你的用户名]/[你的仓库名].git 
    git push -u origin main

    其中，commit信息可以随意填写。remote源链接可以直接从GitHub上复制，如图。

  3. 打开Cloudflare控制台，在左侧边栏中找到Workers和Pages，在“概述”页中点击“创建”

  4. 在“创建应用程序”页面中，选择“Pages”选项卡，点击“连接到Git”。

  5. 如果你还没有将你的Cloudflare连接到Github，请先点击“连接Github”，这会跳转至Github。登录你的Github账号，然后在下一个设置页面中，“Repository access”可以选择All，也可以选择“Only select repo”，但是要包含你的博客源文件仓库。之后，点击下方的保存。

  6. 回到Cloudflare。现在，页面中应该会显示你Github的仓库。选择你存储源文件的仓库。确认选择后，点击下方的“开始设置”。

  7. 来到“设置构建和部署”页面。项目名称可以随便填，生产分支选择你仓库中存储静态页面文件的branch，框架预设保持默认“无”，构建命令填写npx hexo generate，输出目录填写public，其余保持默认，点击下方的“保存并部署”。

  8. 当出现以下页面时，即为部署成功。现在，你可以点击突出的pages.dev链接，查看部署好的页面。

    大功告成！

    pages.dev和workers.dev域名在国内的连接性非常糟糕。如果访问不了的话，可以购买一个域名，并将其解析到Cloudflare，然后在此Pages中添加自定义域。此部分的详细教程，我会另出一篇文章讲述。敬请期待。

  9. 之后，每一次你对文章或博客进行什么更改，在更改完毕并保存后，来到博客源文件根目录，在命令行中输入以下命令，将更改上传至Github：

    1
    2
    3
    git add .
    git commit -m "[你的commit信息]"
    git push

    或者，你也可以将被修改或新建的文件，手动上传到仓库中。

    手动上传时，有一些文件不需要被上传，这些不需要上传的文件或文件夹，均在博客根目录的.gitignore文件中按行列出。上传时，规范来讲，不要上传这些文件或文件夹。

    手动上传时，请确保上传（除不需要上传的文件之外的）所有有变动的文件，或者保险起见，全部上传。

结束语

上述部署方式仅为免费部署的首选。实际上，Hexo支持几乎所有部署方式，只需安装相应插件即可。

下一篇文章，我们将要进入Hexo的进阶部分，讲一下主题的安装，并挑本博客使用的主题来作为示例。