如何搭建自己的个人网站(下)

本篇涉及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(正加强),这也是我不断写分享的初衷。
因为喜欢,才能坚持。希望写的东西对你有帮助,也期待你们的鼓励期待你们的打赏~

愿大家都玩的开心❤

would you buy me a coffee☕~
0%