搭建博客之站点统计

前面一篇说了我用Hugo搭建本博客的具体方案选择（见这里）, 但是最后还是遗留了一些待完成项, 站点统计就是其一.

本篇就来简单说说站点统计, 站点统计顾名思义就是用来统计网站数据的, 比如访问量、访问来源、用户分析等。具体原理可以参看这篇网站统计中的数据收集原理及实现. 了解下来发现现在常用的有 Google Analytics, 百度统计, 不蒜子, 前两个为代表是主流, 是真的满足站点统计及数据分析的, 最后一个对个人博客很友好, 使用简单且可以直接将访问次数显示在网页上.

Google Analytics

目前我只用了 Google Analytics, 简单记录下过程. 首先是注册, 这个不用细说, 参照官方流程, 主要是填好自己的项目名称和网页地址, 其他的都是些选择题, 看自己需求选即可.
注册并设置完成后有一个 MEASUREMENT ID(就是老版本的 Tracking Code), 复制一下后面会用到.

由于目前我也只是前端小白, 看了很多别人说的内容以及 Google 官方建议后, 大致了解到是在自己的 html 页面中插入一段 js 脚本即可, 下面是对于 Hugo 以及 even 主题来说的具体操作, 其他主题应该差别不大.

修改 config.toml 中的 googleAnalytics 为上面复制的 MEASUREMENT ID. 若没有 googleAnalytics 字段, 自己添加一下, 注意之前的ID形式为 UA-XXXXXXXX-X, 但是我注册(2022.03.30)操作时已改为了 G-XXXXXXXXXX

1

googleAnalytics = "G-XXXXXXXXXX"

注意, 以下关于 html 的修改都是在项目路径下 layouts 文件夹, 不是主题路径下的 layouts. 主题路径下的仓库是大家共用的.

在本项目目录下的 layouts 目录下新建 _internal/google_analytics.html 文件(注意不是在主题的layouts目录下), 内容如下:

1
2
3
4
5
6
7
8
9


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.GoogleAnalytics }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ .Site.GoogleAnalytics }}');
</script>

这个内容其实也是来自 Google Analytics, 我只是把 ID 部分改成了 {{ .Site.GoogleAnalytics }}, 也就是使用 config.toml 中的 googleAnalytics

最后是把主题路径下 layouts/_default/baseof.html 文件拷贝到本项目的 laytous/_default/ 下, 修改其内容, 在 /<head> 前面加上如下内容

1
2
3


  {{- if not .Site.IsServer }}
    {{ template "_internal/google_analytics_async.html" . }}
  {{- end }}

其中 {{- if not .Site.IsServer }} 是防止本地预览查看时的数据也被统计进去, 当然你想本地测试看看效果的话也可临时去掉 not, 本地浏览器打开你的博客页面后, 在 Google Analytics 的实时统计中可以检验以上设置是否成功.

Google Search Console

添加站点

在域名供应商的页面中修改DNS设置, 加入TXT记录. 若使用了CDN，就在CDN供应商那里修改.

添加站点地图，注意修改 hugo 的 config.toml 中的 baseURL

Microsoft Bing Webmaster Tools

在这个页面https://www.bing.com/webmasters/, 用google账号登录后可直接从 Google Serach Console 导入数据