Hexo+Keep+Github_Action+Aliyun搭建静态博客
小虾米 半吊子CRUD工程师
  2022-07-13 14:31:00 2022-07-13 14:31      

本地通过Hexo搭建博客

可参考hexo官方配置手册，同时Easyhexo团队对此进行了部分翻译并简化了配置过程，编写了自己的文档，

hexo官方配置手册：https://hexo.io/docs/

easyhexo教程，实际上就是官方配置手册的中文翻译版：https://easyhexo.com/

参考Easyhexo团队的文档，看完前三章，基本上可以在本地部署一个hexo博客。

基本使用

启动

在博客目录（后文统一使用Hexo主目录表示此目录），先运行 hexo clean，再运行 hexo generate，最后运行 hexo server，启动hexo，或者使用 & 将这三个命令连起来

1
hexo clean & hexo generate & hexo server

添加文章

有两种方式：

  • 通过hexo命令，在Hexo主目录运行

    hexo new [layout] <title>

  • 直接在Hexo主目录/source/_post/下添加markdown格式的文章，注意，markdown文本的头部，需要手动添加文章相关的信息，类似于元数据，格式如下，这些元数据在[Hexo官方文档中有专门的介绍](Front-matter | Hexo)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ---
    title: 测试markdown格式-1
    date: 2022-7-10 08:12:20
    tags: 
    - 正在测试
    categories: 
    - [java,spring,ioc]
    - [python,aaa,bbb]
    - javascript
    comments: true
    sticky: 999
    ---
    ## 文章标题

    其中各属性的意思：

    • title 文章标题，在博客页面上展示文章的时候，会把title属性的内容当成文章标题，而不是md文档实际的名称

    • date 文章发布时间

    • tags 文章标签

    • categories 文章目录，这个很关键，以上面的内容为例，[java,spring,ioc]表示属于java目录下的spring目录下的ioc，如果当然，在[]中，你也可以只写一个目录名。同时，一篇文章还可以属于多个（多级）目录，[参考Hexo官方文档](Front-matter | Hexo)。

    • comments 是否开启评论功能，这个需要进一步的Hexok插件支持

    • sticky 是否需要将此文章置顶，不需要置顶的文章可以不写这个属性，Hexo将文章按照sticky的值倒叙排列确定文章置顶的时候顺序，即值越大，越排在前面

    尤其要注意这部分信息的格式为yaml格式，对缩进非常敏感，如果缩进出错，文章将无法通过渲染，最终导致无法发布到博客中。

    添加或者修改文章之后，一般直接就可以在博客中看到，但是最好还是重新启动一下。

图床

为什么要使用图床？

我们在写markdown文档的时候，经常需要粘贴图片，在部署静态博客的时候，这些图片的存储是一个大问题，因为你在编辑文章的时候，图片是存储在本地的一个文件夹里，一般都是文档所在目录下的asserts文件夹，手动发布文章的时候，不仅得把文章复制到Hexo主目录/source/_post/下，图片还得复制到Hexo博客的静态资源文件夹中（我还没研究放到那哪里），不然在渲染markdown的时候，会无法加载图片，此外，而且图片非常占空间，在远程部署的时候，传输图片都会占用很多时间，于是，图床应运而生，图床的意思就是将图片全部放到一个集中的图片仓库中，通过url来使用里面的图片。这样，所有的问题都解决了，唯一的问题就是你的网络可能会断。

推荐通过PicGo+github图床创建个人图床，PicGo官方文档非常好用，照着来即可，说两点文档里没提到的。

  • 推荐使用picgo插件：picgo-plugin-compress，这个插件会在上传图片前对图片进行压缩，提升上传速度，降低存储压力

  • 配置jsdelivr的CDN加速，免费，好用，设置方式是将 https://cdn.jsdelivr.net/gh/liangkang1436/image-hosting@main 把这个贴在picgo的GitHub图床配置中的自定义域名即可

    这个域名的格式为https://cdn.jsdelivr.net/gh/GitHub用户名/图床所在仓库名@图床所在分支名

有一点遗憾的就是，Marktext无法跟通过exe安装的picgo互通，只能额外安装和配置 PicGo-Core，但是无法使用图片压缩。而且上传不稳定，算了，还是用exe安装的picgo吧，上传之后，然后再把图片链接复制过来即可。

安装主题

本文只要介绍如何安装 hexo-theme-keep 主题，根据官方文档，可快速学习如何安装，其中[配置文档](配置指南 | hexo-theme-keep)非常完备，基本上覆盖了主题配置文件_config.yml中的所有属性，上手非常简单。有几个注意的点，这里总结一下

  • base_info部分还未更新首页头像的说明

    实际对应的位置：

  • 如果将来需要将Hexo博客源码提交到Github，并使用Github Action自动部署到Github Pages或者自己的博客，那么配置文件中的所有的图片地址，都需要使用图床连接，不然会提示无法找到文件，原因是/images/xxx.svg路径在使用theme-keep/hexo-deploy-github-pages-action@master来编译的时候，不会添加输出结果目录即public目录中，更深层次的原因是，在将Hexokinase项目源码提交到GitHub的时候，主题文件所在的node_modules/文件夹压根儿就不会被提交，参考Hexo主目录下的.gitignore文件。

    这个问题在后续的博客主题自定义样式中也会存在。

然后就是文档的进阶部分，也有需要注意的地方：

  • 平滑升级，如果你将Hexo博客源码提交到Github，并使用Github Action自动部署到Github Pages或者自己的博客，那么你必须使用平滑升级，否则部署到GitHub Pages或者自己服务器上的静态页面是没有主题生效的，即必须将主题目录下的 _config.yml 文件复制到博客根目录下的 /source/_data/ 中，并重命名为 keep.yml。如果 source 目录下没有 _data 文件夹请自行创建，然后，对hexo-theme-keep主题的任何更改，都只能通过修改keep.yml文件实现。而且主题更新后，如果主题目录下的 _config.yml 文件里出现了新的配置项，那么你必须从该文件中将它们复制到 /source/_data/keep.yml 中，并设置它们的值为你想要的选项。同时主题配置文件 _config.yml 的 version 的值必须跟版本号保持一致！!
    例如：我将主题升级到 3.4.2 版本，那么主题配置文件 _config.yml 的 version 的值必须是 3.4.2 。如果你用了平滑升级，/source/_data/keep.yml 中的版本号需要你手动更改。

    原因前面已经说过了。

  • 当你发现修改了keep.yml却不生效的时候，看看自己是不是做了自定义样式的操作，修改keep主题的配置文件或者keep.yml，实际上都是作用到style.css，此时我们覆盖了这个最终结果，那么将导致修改了keep主题的配置文件而不生效，比如背景图片，因此，当我们发现修改了主题配文件而没有生效，就需要更新一遍style.css。具体操作请看自定义样式小节的更新小节。

  • 自动部署，作者自己也写了[博客](如何使用 GitHub Actions 自动部署 Hexo 博客 - 掘金)，非常详细，参考即可。

使用 GitHub Actions 自动部署 Hexo 博客

部署到Github Pages

参考 hexo-theme-keep 主题作者编写的[博客](如何使用 GitHub Actions 自动部署 Hexo 博客 - 掘金)，非常详尽，浅显易懂，这里只说注意点。

  • 在编写.github\workflows下的部署文件的时候，需要监听某一个分支的push事件，那么当前部署文件必须在你监听的分支上存在，比如：

    即，你监听master分支的push事件，那么这个deploy-blog.yml文件就必须在master分支上，否则这个deploy-blog.yml无法生效

部署到服务器上

这里以阿里云为例，其他的服务器比如腾讯云华为云都是差不多的，首先需要读者把服务器准备好，准备内容包括：

  • 开端口，http端口为80，https默认端口为443，

  • https还需要准备ssl证书，一般各大云服务提供商会提供免费的证书，比如阿里云就提供20个证书，缺点就是有效期仅为1年，1年之后可重新申请

开始部署，参考博客：使用GithubActions自动部署应用到自己的服务器（ECS） - 腾讯云开发者社区-腾讯云，重点参考最后一个步骤

1
2
3
4
5
6
7
8
9
10
11
# Deploy
- name: Deploy to aliyun
  uses: easingthemes/ssh-deploy@main
  env:
    SSH_PRIVATE_KEY: ${{ secrets.BLOG_SERVER_ACCESS_TOKEN }}
    ARGS: "-avzr  --delete"
    SOURCE: ./public/
    REMOTE_HOST: xiashuo.xyz
    REMOTE_USER: root
    TARGET: /XiaShuoBlog
    #  EXCLUDE:

将上述步骤添加到部署到上一步写好的deploy-blog.yml中，即可，注意，在配置服务器ssl登录的时候，一定要注意，把私钥拿去创建给GitHub创建BLOG_SERVER_ACCESS_TO，公钥留给自己，放到authorized_keys文件中。不要乱了。然后注意，配置好ssl登录之后，每次Github action触发，都会通过SSL登录服务器，然后将public文件夹推送到服务器上，云服务器监控程序会给你推送服务器异地登录提醒，警告你服务器密码可能泄露之类的，忽略即可。

完整的deploy-blog.yml如下：

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
name: deploying Hexo project to GitHub pages
on:
  push:
    branches:
      - master # master 分支有 push 行为时就触发这个 action

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

      - name: Build and Deploy
        uses: theme-keep/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
        env:
          PERSONAL_TOKEN: ${{ secrets.BLOG_DEPLOY }} # secret 名
          PUBLISH_REPOSITORY: liangkang1436/XiaShuoBlog2Deploy # 公共仓库，格式：GitHub 用户名/仓库名
          BRANCH: gh-pages # 分支，填 gh-pages 就行
          PUBLISH_DIR: ./public # 部署 public 目录下的文件

      # Deploy
      - name: Deploy to aliyun
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.BLOG_SERVER_ACCESS_TOKEN }}
          ARGS: "-avzr  --delete"
          SOURCE: ./public/
          REMOTE_HOST: xiashuo.xyz
          REMOTE_USER: root
          TARGET: /XiaShuoBlog
          #  EXCLUDE:

至此，只要本地推送代码到GitHub，GitHub就会自动渲染博客文章，然后部署到服务器。

配置Nginx代理静态网页

首先下载nginx

1
yum install -y nginx

然后编辑/etc/nginx/nginx.conf，对80和443端口进行监听并将博客所在的静态网页返回，server参考配置如下，其中root为静态博客地址

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
server {
        listen       80;
        listen       [::]:80;
        server_name  _;


        listen       443 ssl ;
        listen       [::]:443 ssl ;
        server_name  _;

        ssl_certificate "/etc/host_ssl/8098127_xiashuo.xyz.pem";
        ssl_certificate_key "/etc/host_ssl/8098127_xiashuo.xyz.key";
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers HIGH:!aNULL:!MD5;

    root         /XiaShuoBlog;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

然后配置开机重启

1
systemctl enable nginx

第一次启动nginx之后，通过systemctl status nginx查看nginx状态，可能会看到没有运行，但是实际上nginx是在运行的，重启服务器就好了

自定义样式

首先，找到了自定义鼠标样式的博客，但是我发现这个不行，不能解决我的问题，因为提交到GitHub的时候不会提交主题文件夹：node_modules\hexo-theme-keep，所以你做的修改不会提交到Github，最终的结果页面的渲染，是通过GitHub action 调用 theme-keep/hexo-deploy-github-pages-action@master来执行的，所以，要实现自定义的css，只能覆盖文件。先本地运行

1
hexo clean & hexo generate & hexo server

然后将Hexo主目录\public\css\style.css 复制到 Hexo主目录\source\css\style.css，然后在这个基础上进行自定义修改，然后，在Hexo主目录\_config.yml中配置此文件夹不渲染

这么做相当于手动覆盖public输出结果中的css\style.css，以后再本地启动Hexo，也是以此修改后的style.css文件为样式文件。

这么做可以生效，是因为在 hexo-theme-keep 主题中，public的index.html只引入一个css，即style.css

更新

将来，keep主题升级，需要先将Hexo主目录\source\css\style.css备份到别的地方，然后删除此文件，再启动Hexo，即本地运行

1
hexo clean & hexo generate & hexo server

然后将新生成的Hexo主目录\public\css\style.css 和 备份的style.css，进行对比，将自定义的样式同步到新生成的style.css中，再将最终的style.css放到Hexo主目录\source\css\目录下。

特别注意

修改keep主题的配置文件或者keep.yml，实际上都是作用到style.css，此时我们覆盖了这个最终结果，那么将导致修改了keep主题的配置文件而不生效，比如背景图片，因此，当我们发现修改了主题配文件而没有生效，就需要更新一遍style.css。

  • 本文标题：Hexo+Keep+Github_Action+Aliyun搭建静态博客
  • 本文作者：小虾米
  • 创建时间：2022-07-13 14:31:00
  • 本文链接：https://xiashuo.xyz/2022/07/13/Hexo+Keep+Github_Action+Aliyun搭建静态博客/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论