目录

Hugo 配置系列-2:一行命令带走烦恼

修改 default.md

site_name\archetypes\default.md 修改模板样式

1
2
3
4
5
6
7
8
	---
	title: "{{ replace .TranslationBaseName "-" " " | title }}"
	date: {{ .Date }}
	draft: true
	summary: ""
	tags : ["",]
	categories : [""]
	---

Algolia 搜索

  1. 前往 Algolia 官网,注册账号,并且获取 APP_IDADMIN_KEYINDEX_NAME 三个信息

  2. site_name 目录里,新建 .evn 文件,存放 Algolia 信息

    1
    2
    3
    4
    
    ALGOLIA_APP_ID=B********S
    ALGOLIA_ADMIN_KEY=8******************************5
    ALGOLIA_INDEX_NAME=h***********d
    ALGOLIA_INDEX_FILE=public/index.json
    
  3. 安装 atomic-algolia,自动更新索引信息

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    
    # 安装npm
    sudo apt-get install npm
    
    # 优化安装体验
    npm cache clear --force
    npm config set registry https://registry.npmmirror.com
    
    # 安装 atomic-algolia,方便在生成静态文件的时候,同时更新搜索的索引
    cd site_name
    npm -g install atomic-algolia
    
    # 配置 package.json
    npm init
    
    # 完成后会生成一个 package.json 文件,打开它
    vim package.json
    

    scripts 中添加 "algolia": "atomic-algolia"

    1
    2
    3
    4
    
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "algolia": "atomic-algolia"
      },
    
  4. npm run algolia 运行,测试是否成功配置

  5. 之后有新文章的时候,使用 hugo && npm run algolia 即可

刷新 CDN

注意
国内没有 cloudflare 那样超快的自动刷新缓存,因此使用手动刷新更为方便、保险。但是每次都要打开 CDN 官网,找到 「刷新URL」,输入网址,点击确认,等待刷新。这简直就是一种折磨!好在他们提供了 API,可以通过这个方式来刷新缓存。因为我是使用的腾讯云,所以我将介绍腾讯云的操作方法,其它家的应该大差不差。
  1. 点击 「刷新目录」的 API 文档,然后进入调试,登录过后就进入到了 API 云编辑平台了

  2. 输入自己的要刷新的网址,输入刷新类型,然后选择「nodejs」,最后下载工程

    https://image.raylanyao.com/markdown/Untitled.png

  3. 将下载的文件夹保存到服务器中,可以保存到 site_name 路径,也可以保存到其它路径。然后将压缩包解压,然后进去配置环境:

    1
    
    npm install tencentcloud-sdk-nodejs-cdn --save
    
  4. 打开文件夹中的 package.json ,将 package.json 中涉及 scripts 的部分内容保存到 site_name/package.json 相同的位置,同时将 node 后面的相对路径改为绝对路径:

    https://image.raylanyao.com/markdown/Untitled%25201.png

  5. 打开下载文件夹里面的 src/sample.js 文件,将 $SECRET_ID$SECRET_KEY 进行替换成自己的 ID 和 KEY。获得方法:在第二步网页中点击「查看密钥」,根据指引生成密钥过后,将其填写到 src/sample.js 中。

    https://image.raylanyao.com/markdown/Untitled%25202.png

  6. 运行:npm run qcloudcdn,显示如下图,就表示成功的刷新了 CDN,也可以前去官网上查询是否正在更新中。

    https://image.raylanyao.com/markdown/image-20221128115341930.png

设置百度统计

  1. config.toml 中找到 [params.analytics] ,然后新建一个百度统计

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    [params.analytics]
            # 这里要设置为 true 才可以使用哦
        enable = true
        [params.analytics.google]
          id = ""
          # whether to anonymize IP
          # 是否匿名化用户 IP
          anonymizeIP = true
        # Fathom Analytics
         # 百度统计,自己配置的
        [params.analytics.baidu]
          id = ""
    
  2. themes 中的 \themes\LoveIt\layouts\partials\plugin\analytics.html拷贝到\layouts\partials\plugin\analytics.html

  3. 打开拷贝后的 analytics.html 文件,在 Fathom Analytics 的代码下面加上如下内容:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    {{- /* Baidu Analytics */ -}}
    {{- with $analytics.baidu.id -}}
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?{{ . }}";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    {{- end -}}
    
  4. 前往百度统计里面,添加自己的网址,然后拷贝 id ,粘贴到步骤 1 的 [params.analytics.baidu]id 中。

  5. 最后生成静态文件,到百度统计中的代码安装检查,查看是否配置成功。

Console报错找不到 site.webmanifest

警告
当这个不处理的话,会一直请求,降低网站速度。其实处理方法在官方文档里面已经介绍了,但他没有明说是解决这个问题的。

Favicon Generator 上传自己的网站图标,最后会下载一个压缩包,里面包括各种大小的图标和 browserconfig.xmlsite.webmanifest 等文件,将这些文件放到 blog\static 中即可。

三重备份,防止意外发生

输出流

我平时的内容是在 Notion 中进行产出的,偶尔使用 wolai。当我的内容里有图片的时候,我会使用 typora 打开从前面了两个平台导出的 markdown 文件,将图片自动的上传到腾讯对象存储的存储桶中,然后将其内容使用 vscode 连接主机,开启 hugo 草稿预览,查看效果,如果不错的话就上传到博客中。

笔记软件内容保存

前面提到,我会使用 Notion 或者 wolai 进行撰写,它俩会保存我的内容到云端,当作我的一个备份点。

Gitea 自建代码库保存

因为国内网络环境,所以自己使用 Gitea 快速搭建了一个代码仓库,使用其将自己的内容进行备份。作为参考,给出我的备份的内容,有 / 的为文件夹,没有的则是文件:

archetypes/config.tomlcontent/package.jsonlayouts/assets/static/
Hugo 模板主题配置文件文章内容Algolia 和 qcloudcdn 配置文件存着百度统计的 html各种定制 scss,js存放着一些图标

Github 备份

虽然因为网络原因不好备份,不过在网络还算可以的时候,还是需要将在 Gitea 保存的内容再一次进行备份,防止因为自己操作问题,导致自建仓库内容丢失。

如何快速的对两个仓库进行备份?

备份是一个非常好的习惯,但是我会因为备份的各种操作,就慢慢的放弃了备份,当未来面临文件丢失的时,才后悔莫及。所以对于我来说,备份的门槛一定要足够的低,才能让我愿意坚持下去。转到 Hugo 之后,我利用 aliasgit,成功实现了用一个命令,完成了更新文章、刷新 CDN、更新 Algolia 索引,还同时将内容备份到两个仓库。所以我们一起来看看吧。

  1. 保证 public 生成得最简,所以先删除:rm -rf public

  2. 使用 hugo --minify 生成 public

  3. 将生成的 public 里面的内容复制到 /var/www/html/public ,所以得 sudo cp -r /root/raylanyao/public/* /var/www/html/public

  4. 使用 npm run algolia 更新搜索索引

  5. 使用 npm run qcloudcdn 刷新 CDN

  6. 使用 git add archetypes/ config.toml content/ package.json layouts/ assets/ static/ && git commit -m "$1" && git push -u origin main

    • 这里有个小技巧,打开 ~/.git/config,将两个仓库的 git 链接放到一块儿,这样就可以同时更新两个仓库了

      https://image.raylanyao.com/markdown/Untitled%25203.png

  7. 然后将上面的5条命令进行组合:

    1
    2
    3
    4
    5
    6
    
    alias hugos="rm -rf public && hugo --minify && copy_public && npm run qcloudcdn && gitbackup"
    alias hugo_aligolia="rm -rf public && hugo --minify && copy_public && npm run algolia && npm run qcloudcdn && gitbackup"
    # cp public
    alias copy_public='sudo cp -r /root/raylanyao/public/* /var/www/html/public'
    # git backup
    alias gitbackup='backup(){git add archetypes/ config.toml content/ package.json layouts/ assets/ static/ && git commit -m "$1" && git push -u origin main;};backup'
    

    可以自行选择自己需要的进行组合,适合自己的就最好,我的命令中, hugo_aligolia 实现了上面说的一个命令完成所有的事情。


以上就是全部内容了,希望对你有所帮助。