如何搭建自己的个人网站（下）

Posted on | | visitors

本篇涉及Hexo个人网站的域名绑定、添加评论功能、访问次数统计设置等教程。
适宜人群：有追求的博主们（主题Theme未使用Next的博主们也请进）

域名绑定

根据上篇教程，目前默认的域名还是username.github.io，但印象中个人网站好像都是www.name.com格式的？怎么样想换吗？
首先✋，你得有___？ 当然是域名啦！

  • 买域名
    你得买一个域名。xx云都能买，我在腾讯云买的。（请给我广告费！@腾讯云）

    我实在太喜欢Karlie Kloss，她的一个网站kodewithklossy.com
    那么我的肯定就是codewithzhangyi.com😜

  • 实名认证审核
    买好域名之后，打开域名服务，可以看见你刚买的域名记录。此时你需要做实名认证，很重要，超过有效期（大概3-5天）未认证域名将被锁定。

  • 备案
    如果服务器是内地的就需要备案。Hexo网站的服务器是海外的因此可以跳过这步。

  • 添加解析记录
    认证成功后的域名才能被做解析。认证需要3-5个工作日。我的大概半天就OK了。
    当解析状态变成【正常解析】时，点击域名记录最右侧操作的【解析】添加解析：

    解析记录设置两个：www和@，线路默认就ok
    (1) @:记录类型选A，A记录的就是ip地址，github(官方文档)提供了两个IP地址，192.30.252.153和192.30.252.154，这两个IP地址为github的服务器地址，两个都要填上
    (2) www:记录类型选CNAME，CNAME记录值填你的github博客网址，如我的是yzhang1270.github.io

  • 本地设置修改
    这些全部设置完成后，此时你并不能根据申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件，不带任何后缀，里面添加你的域名信息，如：codewithzhangyi.com。实践证明如果此时你填写的是www.codewithzhangyi.com那么以后你只能用www.codewithzhangyi.com访问，而如果你填写的是codewithzhangyi.com，那么用www.codewithzhangyi.com和codewithzhangyi.com访问都是可以的。重新hexo g,并发布即可用新的域名访问。

  • 访问出现404的原因可能是：
    (1)绑定了个人域名，但是域名解析错误。
    (2)域名解析正确但你的域名是通过国内注册商注册的，你的域名因没有实名制而无法访问。
    (3)配置没问题的情况下，换个浏览器试试。
    (4)下载的hexo有问题，重新下载。

添加评论模块

在添加评论这个设置上费了点时间，因为整顿，评论服务挂了一大片，请各位寻找教程的时候重点看时间，2017年及之前的文章就没有多大的借鉴意义，包括这篇教程也是有时限性的，谁能跟的上变化呢。

(1) 多说 - 最多用户使用的评论，但遗憾2017年6月将暂定服务；不建议新用户使用，但为旧用户保留，也感谢多说一路的陪伴；
(2) 网易云跟帖 - 网易提供的评论组件，功能比较简单，性能优秀；管理后台在查询上还不算特别智能，但足够普通用户使用；
(3) 畅言 - 搜狐提供的评论组件，功能丰富，体验优异；但必须进行域名备案。只要域名备过案就可以通过审核。
(4) Disqus - 国外使用较多的评论组件。万里长城永不倒，一枝红杏出墙来，你懂的。
以上评论模块应该大家都知道，多说和网易云跟帖没有了，畅言要备案，对于对于挂靠在GitHub的博客非常的不友好，放弃！Disqus，不希望自己的博客，可以不分国界！也放弃！

踩坑总结：使用Gitment评论服务
Gitment 是作者imsun实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

  • 注册 OAuth Application
    注册一个新的OAuth Application，其他内容可以随意填写，但要确保填入正确的 callback URL（如 https:// yzhang1270.github.io）这个真的很重要！！！

    创建成功后，你会得到一个 client ID 和一个 client secret，这个将被用于之后的用户登录。

  • 引入 Gitment
    将下面的代码添加到你的D:\username.github.io\themes\typing\layout_partial\after-footer.ejs：
    【提示】：我这里的主题是typing，在typing里是自带gitment的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div id="container"></div>
    <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
    <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
    <script>
    var gitment = new Gitment({
      id: '页面 ID', // 可选。默认为 location.href  这里有机关，后面会再讲到！😎
      owner: '你的 GitHub Name',              //比如我的叫YZHANG1270
      repo: '存储评论的 repo',                 //比如我的叫YZHANG1270.github.io
      oauth: {
        client_id: '你的 client ID',          //比如我的328***********
        client_secret: '你的 client secret',  //比如我的49ce***********************
      },
    })
    gitment.render('container')
    </script>

  • 可选：在主题的_config.yml中配置好全局参数：

    同时也要在脚本修改指定地址。

  • 初始化评论
    页面发布后，你发现评论有个error:

    此时，你点击Login用自己账户登陆，再刷新页面就有初始化按键，点击初始化即可：

    正常情况下，只要用GitHub账户登陆即可发布评论啦：

在评论功能设置这里踩了几个坑，进行总结一下😝

Gitment评论功能踩坑总结

  • owner: ‘Your GitHub ID’
    1
    owner: '你的 GitHub ID'

可以是你的GitHub用户名，也可以是GitHub id，建议直接用GitHub用户名就可以。
获取GitHub id的方法： https:// api.github.com/users/你的账户名

  • Error: Not Found
    owner或者repo配置错误了，注意名字和仓库名字的大小写。

  • Error: Comments Not Initialized
    (1)在注册OAuth Application这个步骤中，给Authorization callback URL指定的地址错了
    (2)还没有在该页面的Gitment评论区登陆GitHub账号
    (3)https://github.com/imsun/gitment/issues/95

  • Error：validation failed
    这个真的折腾我一下午！！(咬牙切齿.jpg)
    issue的标签label有长度限制！labels的最大长度限制是50个字符。

    1
    id: '页面 ID', // 可选。默认为 location.href

这个是之前配置的时候提到的机关。id的作用，就是针对一个文章有唯一的标识来判断这篇本章。

在issues里面，可以发现是根据网页标题来新建issues的，然后每个issues有两个labels（标签），一个是gitment，另一个就是id。
所以明白了原理后，就是因为id太长，导致初始化失败，现在就是要让id保证在50个字符内。
对应配置的id为：

1
id: '<%= page.title %>'

彩蛋🎊：

如果用网页标题也不能保证在50个字符！
最后，我用文章的时间，这样长度是保证在50个字符内，完美解决！（避免了文章每次更新标题或路径时，会重新创建一个issue评论的问题。）

1
id: '<%= page.date %>'

如果你原来没有设置id这一行，记得在这行后面加逗号，我就栽了傻了。

  • Gitment的汉化
    只需到模板里将原来定义CSS和JS的那两行改成：

    1
    2
    <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
    <script src="https://billts.site/js/gitment.js"></script>

  • 所有文章一键初始化评论
    到本文编写时，还没有一个完善的解决方法，就是用脚本来执行自动化，有需要的可以详细了解：https://github.com/imsun/gitment/issues/5

参考文章：Gitment评论功能接入踩坑教程

文章/网站访问次数统计

访问次数统计也有很多方法，这里只简单介绍不蒜子计数方法。很简单，就三步！

  • 安装脚本
    打开D:\username.github.io\themes\typing\layout_partial\header.ejs
    在最后加入下面代码：

    1
    2
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>

  • 显示站点总访问量
    要显示站点总访问量，复制以下代码添加到你需要显示的位置。有两种算法可选：
    (1)算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

    1
    2
    3
    <span id="busuanzi_container_site_pv">
        本站总访问量<span id="busuanzi_value_site_pv"></span>次
    </span>

(2)算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。

1
2
3
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

打开themes/你的主题/layout/_partial/
你可以选择显示在网页的头部header.ejs文件里，文章的article.ejs文件里，或者网页的尾部after-footer.ejs文件里，等等。

  • 显示单页面访问量
    要显示每篇文章的访问量，复制以下代码添加到你需要显示的位置。与上面同理。
    算法：pv的方式，单个用户点击1篇文章，本篇文章记录1次阅读量。
    1
    2
    3
    <span id="busuanzi_container_page_pv">
      本文总阅读量<span id="busuanzi_value_page_pv"></span>次
    </span>

代码中文字是可以修改的，只要保留id正确即可。

【提示】：修改标题的文章、隔天再修改内容的文章，git会根据日期做版本控制。每篇文章的访问地址会因此更改。所以为了访问数建议一次性写完不要做改动了。

如果你看到这里，恭喜你，教程已经到此结束啦~快去试试吧！

另外，我是前端零基础小白，我的专业是人工智能机器学习类的，这网页也只是我的随意尝试，这些东西有时候还是会出错，毕竟分享内容才是我的初衷，其他还有很多可以改进的地方。
也欢迎大家的意见和指导在下面或者在微博给我留言。我发现一个学习的小窍门就是，在你喜欢的网页右键选择【查看网页源代码】，就能偷学人家的代码啦~嘿嘿😀

有一个我很喜欢的旅游博主，微博：北京小风子，她提到过心理学上有个词叫 positive reinforcement（正加强），这也是我不断写分享的初衷。
因为喜欢，才能坚持。希望写的东西对你有帮助，也期待你们的鼓励期待你们的打赏~

愿大家都玩的开心❤

打赏2块钱，帮我买杯咖啡，继续创作，谢谢大家！☕~
0%