使用Vercel部署HUGO博客时踩过的坑

bk 收录于 hugo

2022-08-05 约 1014 字预计阅读 3 分钟

Build & Development Settings

BUILD COMMAND:
npm install hugo-extended --save-dev
或者
amazon-linux-extras install golang1.11 && hugo -D --gc 参考stack主题的这个说明

OUTPUT DIRECTORY: public

使用gitalk评论系统

新建comment仓库

新建一个公开的github仓库，下面会将它的issue用于博客的评论

新建 OAuth application

新建OAuth application，其中最重要的是 Authorization callback URL，确认

生成一个新的secrect key

config.toml配置

enable comment 模块

hugo 项目配置enable comment和对应gitalk模块

1
2
3
4
5
6
7
8


[params.page.comment]
    enable = true
    [params.page.comment.gitalk]
    enable = true
    owner = "根据OAuth application应用填写"
    repo = "根据OAuth application应用填写"
    clientId = "根据OAuth application应用填写"
    clientSecret = "根据OAuth application应用填写"

安装gitalk

本来我以为配置到上面就完成，但本地验证的时候评论区始终不出来，所以下面内容千万注意

这里留意到，在layouts\partials\comment.html模板中，每一个评论模块下面都有这样一个noscript标签

1
2
3
4
5
6
7
8


{{- /* Gitalk Comment System */ -}}
{{- $gitalk := $comment.gitalk | default dict -}}
{{- if $gitalk.enable -}}
    ...
    <noscript>
        Please enable JavaScript to view the comments powered by <a href="https://github.com/gitalk/gitalk"></a>Gitalk</a>.
    </noscript>
{{- end -}}

所以，原来还需要 enable JavaScript ，enable js和css很简单（这块LoveIt文档中居然啥都没提示…）

其实就在config.toml中添加即可，不需要 新建任何template引入。

someCSS 和 someJavascript 根据 gitalk安装内容填写即可，当然也可以下载css和js之后，采用本地化部署，本地化部署需要放置到assets/文件夹

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


[params.page.library]
    [params.page.library.css]
    # someCSS = "some.css"
    # located in "assets/" 位于 "assets/"
    # Or 或者
    # someCSS = "https://cdn.example.com/some.css"
    someCSS = "https://unpkg.com/gitalk/dist/gitalk.css"
    [params.page.library.js]
    # someJavascript = "some.js"
    # located in "assets/" 位于 "assets/"
    # Or 或者
    # someJavascript = "https://cdn.example.com/some.js"
    someJavascript = "https://unpkg.com/gitalk/dist/gitalk.min.js"

本地验证

平时hugo serve本地验证的时候环境是development，会发现下面的提示：

1
2


Current environment is "development". The "comment system", "CDN" and "fingerprint" will be disabled.
当前运行环境是 "development". "评论系统", "CDN" 和 "fingerprint" 不会启用.

所以，要本地验证评论区是否正常，需要添加-e参数

1

hugo serve -e production

发布

注意config.toml配置的修改也需要重新生成静态页面，所以hugo后重新推送等待vercel更新即可

vercel重发布后，点击评论区的Github登录初始化一下即可

目录