前言
想搭建自己博客很久了 (虽然搭了也不见得能产出多频繁).
最初萌生想写自己博客的想法, 想象中, 是自己一行一行码出来的成品, 对众多快速构建 + 模板式搭建不屑一顾, 也是那段时间给闲的, 从前后端选型, 数据库敲定, 到实际代码编写, 越写越发现自己要弄的东西太多太多, 而且, 没有模板, 没有原型, 当初我的审美还是很欠缺的, 每写一行 CSS 都是怀疑的, 痛苦的, 直到一年以后, 我的博客还处于代码阶段, 且中间好几次因为工作太忙, 长时间没碰它, 想法越来越弱, 直至搁浅.
这段时间换了工作, 昨天发版, 今天闲的不行, 于是这想法突然又冒出来了, 网上闲逛逛, 发现了这篇小白式教程, 曾经对快速构建 + 模板式搭建不屑一顾的我, 经过岁月的沉淀, 现在的想法: 嗯, 真香!
于是, 我的处女博, 就贡献给这篇教程吧, 也算是感谢一下老板这篇傻瓜式教程了.
博客搭建
博客搭建主要依赖于教程《利用 GitHub Pages 快速搭建个人博客》 https://www.jianshu.com/p/e68fba58f75c , 她的步骤都写得很详细, 按着步骤来基本上问题不大, 这里做个步骤总结:
1, 最基本的, 你得先有个 GitHub 账号
已经有账号的往下看, 没有的同学点击这里 https://github.com/ 去申请
2,fork 我的仓库到你的 Git 里面
进入我的仓库 https://github.com/awang0608/awang0608.github.io 将仓库 fork 到你的 Git 上: 点击右上角的 fork 按钮, 等一会儿页面自动刷新.
3, 修改 setting
进入你自己的仓库 - setting: 修改你的仓库名为 你的仓库名. GitHub.io(这里有个问题, 稍后解释), 改这里:
注意: 一定是你的仓库名. GitHub.io, 不然的话, 你会发现 Git 不会正确发布, 比如我把仓库名改成了 aaa.GitHub.com, 这个时候, 下面 GitHub Pages 那块儿显示的发布地址就是 https://awang0608.github.io/aaa.github.com/ , 而不是我们预期的 https://awang0608.github.io/ 了.
走到这一步之后, 就可以用自己的仓库地址访问了, 接下来就是粗暴的删我的文章! 删我的图片! 删我的配置! 将这一切, 改成自己的, 就可以啦.
遇到的问题
整个想法从萌生到开始搭建到搭建完成, 差不多是一下午的时间, 在按照教程走的这个过程中, 发现了几个小问题, 幸而都一一解决, 在这里将解决办法奉上, 希望对看到这篇教程的小伙伴们能有一些帮助.
最后一步, 到改了仓库名为自己的仓库名后, 使用 GitHub.io 地址访问一直报 404
教程给出的解决方案并没有解决我的问题, 百思不得其解, 还是百度大法好呀, 要解决 404 的问题, 需要将原仓库名 awang0608.GitHub.io 修改成 awang0608.GitHub.com, 等个几秒钟强刷 https://awang0608.github.io / 地址, 就能看到网站正常显示.
使用百度分析工具 Baidu Analytics 的时候, 因为对分析网站不熟悉, 找了很久找不到自己的 ba_track_id
在这里:
我也不知道这个马赛克打了有什么意义, 但就是, 想打.
Gitalk 集成后报错: Error: Issues are disabled for this repo.
差不多就是下面这个鬼样子:
据说导致的原因是 fork 了别人的仓库, 是不会有自己 issues 的, 所以
解决办法: 重新建一个空白项目, 把代码移过去, 这里需要注意的是, 新建空白项目后, 注意修改 setting, 主要有三个地方: 一是 setting 里面的仓库名 (关键点见步骤 3), 这个时候可以毫不犹豫地把. com 后缀舍弃, 直接使用. io 后缀了, 二是 Features 里面的 Issues 记得勾选 (一般是默认勾选), 三是需要自己设置 GitHub Pages,GitHub Pages->Source: 选择 master, 这时候不要动页面, 它会自己刷新.
刷新过后
注意哦, 页面若是显示类似 Your site is ready to be published at https://awang0608.github.io/qiubaiying.github.io/. 就是错的哦 (这一点前面提到过, 我这儿是因为没有改仓库名), 要显示 Your site is published at https://awang0608.github.io/ , 并且前面有个绿色的勾, 才能正确的用这个地址显示.
Gitalk 集成后报错: Error: Not Found.
这个问题主要是前几个问题导致的, 在解决 404 问题的时候, 将后缀 io 改成了 com, 然后自然而然地,_config.YAML 文件中关于 Gitalk 的配置也改成了. com 结尾, 而且, Git 上 Settings-> Developer settings->OAuth Apps 里注册的 Homepage URL 也填成了. com 结尾, 但是, 在解决 Issues are disabled for this repo 问题的时候, 我们是直接抛弃了. com, 使用. io 的, 所以会出现 Not Found 的情况, 这个时候, 将,_config.YAML 文件中关于 Gitalk 的配置和 Homepage URL 改回. io 结尾.
项目跑起来后发现右侧多了一个滚动条, 体验极其不友好.
这个就很 easy 啦, 调试器打开搜查元素发现是 article 元素设置了 overflow-x:hidden 导致的, 虽然我没明白为什么教程中的网站没有出现这个问题, 但是我大手一挥, 删掉了这个样式.
个性设置
在网站顺利跑起来的后几天里, 我分别给网站新增了小桃心, 打赏和浏览量展示的功能, 后续看情况, 如果有更多的小设置能俘虏我的话, 我会陆续将它们加进来, 变成一个花里胡哨的网站, 可别嫌弃呀 [手动捂脸哭].
小桃心
小桃心的源代码是在网上找的, 原功能是鼠标点击冒心心, 我给新增了一个随机冒心心的功能 (新增了一个定时器, 慢慢跑), 还让它变大了点, 直接设置定时器的话, 会发现如果停留在当前页之后切换到其他页面稍微长一点的时间, 就有满屏的小桃心, 晃瞎了我, 于是加了一个判断, 最多冒 10 个出来, 嗯, 心情愉悦, 有兴趣的朋友可以查看源码: sweetHeart.JS, 或者直接引用, 就可以在你的网站也加上这些小心心咯~
打赏
打赏功能随便一百度就有无数的教程, 这里我就不再赘述, 只是提醒一下, 在引用的时候最好不要加前面的协议字符, 否则容易 404, 还纳闷半天为什么不得行, 还有就是, 同一个网站上的微信和支付宝的付款图, 微信随时能访问, 支付宝的偶尔会报 403, 这个暂时还没找到解决的办法.
浏览量
浏览量展示使用的是不蒜子的脚本, 方便, 简单. 不蒜子自己的定位是: 极简网页计数器, 两行代码, 搞定计数.(悄咪咪地说, 不止计数极简, 连它的官网 http://busuanzi.ibruce.info/ 也真真儿是极简)
要使用不蒜子必须在页面中引入 busuanzi.JS, 不蒜子可以给任何类型的个人站点使用. 鉴于前端的引用惯性, 我将这个脚本引用在了 footer.html 的最后, 然后, 在 page.HTML 中找个地方添加了代码来显示站点总访问量:
- // footer.HTML
- <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
- //page.HTML
- <div > 本站总访问量 < span id="busuanzi_value_site_pv">0</span > 次 </div>
站点总访问量有两种计算方式:
pv 的方式, 单个用户连续点击 n 篇文章, 记录 n 次访问量
uv 的方式, 单个用户连续点击 n 篇文章, 只记录 1 次访客数
这两种使用方式分别对应 id:busuanzi_value_site_pv 和 id:busuanzi_value_site_uv;
在 post.HTML 中也添加了代码来显示单页面访问量:
- <span style="font-size: 14px;">
- <span id="busuanzi_container_page_pv">
共 < span id="busuanzi_value_page_pv">0</span > 次阅读
- </span>
- </span>
不蒜子自身只提供标签 + 数字, 至于显示的 style 和 CSS 动画效果, 可随意发挥, 只需要保证 id 正确即可.
友情提示
在根据教程配置 Homepage URL 的时候是直接填写的 https://awang0608.github.io/, 但实际上需要填写的整个仓库的 Git 地址: https://github.com/awang0608/awang0608.github.io .
结语
历经一下午将博客搭建好, 历时 3 小时做了这篇总结, 虽然是小白教程, 但自己解决了教程中遇到的问题, 还是比较开心的, 接下来准备做的是优化, 因为我个人作为一个前端来讲, 确实觉得这个博客的主题吧, 其实总体来讲还是很不错的, 只是我实在无法接受页面布局上一张图占了整个浏览器的 70%, 其实大家能发现, 点进一张博文详情, 首先是看不到多少有效内容的, 都被一张大图占据了空间, 有效信息非常少.
仔细看了看项目代码, 理清了它的实现, 发现要改起来还是比较简单的, 而且, 我还可以做一些我自己比较喜欢的优化, 所以, 我准备动起来了.
可能有人会有疑问, 不喜欢这个主题那为什么不更换一个主题呢? 好吧, 其实是因为我看了 jekyll 提供的主题, 发现, 这个已经很不错了, 没有找到更喜欢的 [手动捂脸哭], 当然, 如果自己审美在线的话, 我还是可以为 jekyll 贡献我自己的主题的.
如果有想去研究一下主题的, 去这里: jekyll 主题官网 http://jekyllthemes.org/ .
来源: https://www.cnblogs.com/moonLightcy/p/11896141.html