建站第十五篇 Google Adsense在Hugo中的配置

博客运行一段时间之后，有了一点点流量，随即向Google申请了Adsense，流量虽少也不想浪费。
如何申请就不多讲了，去Google Adsense官方一步一步照做就可以。这里主要说说，申请下来ID之后，如何在Hugo里配置相应的代码和ads.txt。

配置广告代码

Hugo有很多主题，每个主题配置Adsense的方式可能不太一样，我的博客目前使用的是 Clean White 主题，下面介绍的就是如何在Clean White 主题中加入Adsense配置。

Adsense 申请成功以后，会有一段广告代码，类似下面这种：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-592048404*******"
        crossorigin="anonymous">
    
</script>

上述代码中的一串数字谷歌分配的publisher ID，需要改成自己的ID。把这段代码放到/themes/hugo-theme-cleanwhite/layouts/partials/head.html文件里面，然后重新部署。

image.png

配置ads.txt

配好广告代码后，我们还需要确保ads.txt文件可以生成到网站的根目录。否则Adsense会发给你一段警告框，如下图。也可以从这里下载到自己的ID号对应的ads.txt文件。

image.png

关于如何放置ads.txt，我找了很多中文技术博文，都说的是把文件放在/public目录下就可以了，但这显然不适合我。正如前面系列博文所属，我的站点是利用Github Action发布成Github Pages的方式部署的。任何直接放到/public目录的方式都不可行。只能利用Hugo的生成机制，终于从主题目录中找到了办法。

Hugo允许自定义robots.txt，但不允许自定义ads.txt并且不可能通过layout模式来实现。那么，目前最好的替代方案，只能是将ads.txt文件放到主题目录下的static文件夹中。对于我的主题就是将ads.txt文件放到/themes/hugo-theme-cleanwhite/static路径下。

这样，重新部署之后，就可以通过路径localhost:1313/ads.txt访问到ads.txt文件了。

image.png

---

参考文章

1. 《谷歌 Adsense 申请及在 Hugo 中的配置》,https://jdhao.github.io/2019/09/22/google_adsense_hugo_config/
2. Hugo Adsense Ads Txt，https://rajasimon.io/blog/hugo-adsense-ads-txt/
3. Ads.txt guide, https://support.google.com/adsense/answer/7532444?hl=en
4. Robots.txt File, https://gohugo.io/templates/robots/

image.png
本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可，转载请注明出处。
本文链接