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,点击左侧第三个图标,然后找到··· ,在点击commitpush即可。

配置netlify

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

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

  1. 在登录之后,会看到New site from Git,点击
  2. 然后点击Github,找到我们博客的仓库,点击。
  3. 配置Branch to deployBuild commandPublish directory
    1. 如果没有做关于Git分支的特殊操作的话,一般Branch to deploy用内置的master
    2. Build commandhexo generate
    3. Publish directorypublic
  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
版权声明: 本博客所有文章版权为文章作者所有,未经书面许可,任何机构和个人不得以任何形式转载、摘编或复制。

留言板