avatar


4.发布博客

我们先介绍一个命令。

1
hexo generate

通过该命令可以生成静态资源。我们发布的其实是这些静态资源,而不是.md文件。

可以不那么准确的理解为。在Hexo,.md只是源代码,而静态资源是编译后的可执行文件和各种包,最后需要的其实是静态资源。

该命令,有一个可选参数--config,用于指定配置文件,默认是_config.yml这个文件,我们可以指定为其他文件。示例代码:

1
hexo generate --config _config_prd.yml

这个对于我们区分生产和开发环境的配置,非常有帮助。

发布博客有多种方法,这里介绍三种常见的。

  1. 通过netlify(zeit)发布
  2. 通过对象存储发布
  3. 通过GitHub Pages发布

通过netlify(zeit)发布

netlify与zeit的发布方案相同,netlify是Hexo官方用的。这里以netlify为例子。
其实,在国内,netlify的访问速度远远不如zeit。

Hexo的官网也是通过netlify发布的,通过netlify发布也的确方便。

Hexo的官网 https://hexo.io/zh-cn/

我们会在官网的最底部看到netlify的log,写着“deploys by netlify”。

但是netlify在境外,境内访问的话,会访问在新加坡的机房。但是,我通过路由追踪发现,居然还要先绕道去美国,然后再去新加坡。总之通过netlify发布,访问会很慢。

push到GitHub

如果想通过netlify发布的话,我们需要把代码commit,然后push到GitHub上。通过VSCODE,点击左侧第三个图标,然后找到··· ,在点击commit、push即可。

配置netlify

netlify的官网:https://www.netlify.com

关于注册、登录、绑定GitHub账号这些操作都略,根据提示操作即可。我们主要讲一下发布的步骤。

  1. 在登录之后,会看到New site from Git,点击
  2. 然后点击Github,找到我们博客的仓库,点击。
  3. 配置Branch to deploy,Build command,Publish directory
    1. 如果没有做关于Git分支的特殊操作的话,一般Branch to deploy用内置的master
    2. Build command 填 hexo generate
    3. Publish directory 填 public
  4. 上述都配置好了后,点击 Deploy site

特别注意
根据上述操作可能会报错,原因是netlify默认在根目录执行hexo generate,如果我们的博客在根目录的下级目录,例如在blog目录下,会报错。解决方案为把blog文件下的内容移动到根目录下,然后重新commit、push,重新发布即可。
因为网络环境的原因,netlify在国内访问很慢,大家可以考虑zeit,使用方法几乎一致。

zeit的官网为 zeit.co

配置独立域名

在部署完毕之后,会给出一个非常奇怪的网址,该网址便是我们的博客的地址。如果大家有自己的域名的话,可以点击Domain settings,根据提示进行配置。不在这里赘述。
关于如何申请域名,也不在这里赘述。

通过对象存储发布

我们这里分别以七牛云对象存储和阿里云对象存储为例。

  • 我们以七牛云对象存储为例,介绍原理
  • 我们以阿里云对象存储为例,介绍进阶

七牛云对象存储

七牛云的价格的确是优惠。如下
七牛云的价格
关于七牛云对象存储的操作,根据提示操作即可,注意需要配置该bucket为公共读。
主要几点有:

  1. 上传的内容是通过hexo g命令所的到的public文件夹中的内容。
  2. 通过网页,只能一个一个文件上传。七牛云官方提供了一个批量上传的工具。参考下面的地址

    https://developer.qiniu.com/kodo/kb/1374/batch-upload-and-file-upload-more-resources

  3. 通过七牛云,同样可以绑定独立域名。绑定域名之后,建议把此处打开。
    七牛云的配置
    所以
    原理只不过是把静态文件,放在对象存储上,然后静态文件需要允许公共读。如此便发布完成。

阿里云对象存储

与七牛云相同,阿里云的操作也不过是静态资源放在对象存储上,并配置公共读。
这里我们介绍一种更简单的发布方法。

1
hexo deploy
  1. 安装部署所用的工具包,命令为npm install hexo-deployer-ali-oss --save
  2. 配置Hexo的_config.yml
    1
    2
    3
    4
    5
    6
    deploy:
    type: ali-oss
    region: <region>
    accessKeyId: <accessKeyId>
    accessKeySecret: <accessKeySecret>
    bucket: <bucket>
    1. type 填 ali-oss
    2. region 填oss所在区域的region号。
      具体可以根据这里查询:https://help.aliyun.com/document_detail/31837.html
    3. accessKeyId、accessKeySecret填对应的数据,网页左上角个人中心处可查
    4. bucket 填我们配置的bucket名称
  3. 敲入命令。hexo deploy

还可以通过Github Action,做出持续集成和持续部署,自动发布。
关键脚本内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
name: deploy-ali-oss

on:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository master branch
uses: actions/checkout@master

- name: Setup Node.js
uses: actions/setup-node@master
with:
node-version: '12.22.6'

- name: Setup hexo dependencies
run: |
npm install -g hexo-cli
hexo clean
hexo generate --config _config_prd.yml
- name: Setup aliyun oss
uses: yizhoumo/setup-ossutil@v1
with:
endpoint: ${{ secrets.ENDPOINT }}
access-key-id: ${{ secrets.ACCESS_KEY_ID }}
access-key-secret: ${{ secrets.ACCESS_KEY_SECRET }}

- name: Sync files to aliyun
run: ossutil sync public/ oss://kakawanyifan-com/ --delete -f

需要在仓库的如下位置进行配置。

配置

通过GitHub Pages发布

GitHub Pages,顾名思义,是隶属于GitHub的。接下来我们介绍通过GitHub Pages发布的步骤。

  1. 我们需要一个格式为<用户名> + github.io的仓库。例如kakawanyifan.github.io。必须是这个格式的,稍后会讲原因。
  2. 我们把通过hexo g命令所得到public文件夹内的内容,git push到仓库中
  3. 在GitHub的仓库页面中,点击setting,下滑找到GitHub Pages,应该会看到已经发布成功的提示。我们也可以通过这个页面配置独立的域名。
  4. 特别的,仓库名必须为<用户名> + github.io这个格式,否则会导致发布的内容没有样式。
    • 我们以仓库名temp为例,当仓库名为temp的时候,博客的地址只能为kakawanyifan.github.io/temp/。
    • 但是页面上包括css和js的地址都是temp的,例如style.css的地址为kakawanyifan.github.io/css/style.css,实际上它们的地址是 kakawanyifan.github.io/temp/css/style.css。
    • 如图所示
      当仓库名为temp的时候

三种方法的比较

我们主要比较一下访问速度。

  • 通过对象存储,特别是国内厂商的对象存储,速度是最快的。
  • 其次是netlify(zeit),该方法主要受限于服务器都在海外
  • 最慢的是github.io,主要受限于国内网络环境的原因,不是很流畅稳定。
  • 特别注意: 该比较仅基于现在的方案,实际上,上述方案都有优化空间。
    • 比如,通过netlify部署博客的话,可以采用两套CDN。一般资源用netlify的CDN,但是对于图片,采用七牛云的对象存储和CDN。这是一种提高访问速度的方法。
    • 而且在不同的网络环境下,上述方案的可能会存在一定的差异。具体大家可以用工具进行测速。
      站长之家测速:http://ping.chinaz.com/

更多

关于更多的Hexo命令,大家可以参考Hexo官方提供的文档。

至此,我们完成了这些。

  1. 准备环境
  2. 准备工具
  3. 新建博客
  4. 发布博客

但是,这个博客可能依旧不够漂亮,功能也不强大。所以这就需要进入我们下一部分的内容。
进阶操作

文章作者: Kaka Wan Yifan
文章链接: https://kakawanyifan.com/10104
版权声明: 本博客所有文章版权为文章作者所有,未经书面许可,任何机构和个人不得以任何形式转载、摘编或复制。