Hello My Blog

"Hello World, Hello Blog"

Posted by Btz on April 7, 2019

此时的感受

随着这篇博文的发布,这个博客就算是正式开通了。

虽然这个博客是套用Github大神的模板实现的,很多技术细节我都不甚明白、但是中间依旧遇到了一些坑、也花费了一些时间去阅读源码、解决莫名其妙的问题、到现在开始写这第一篇博客,才真正的松了一件口气。

终于可以用Markdown编辑器水博客了。╮(╯▽╰)╭

以后我会把我学习过程中的一些相对高质量的总结、生活随笔、过硬的技术分享以博文的形式分享到这里。

可能会有一些错误、疏忽,如果能够在评论或者issue中指出,我将感激不尽。

为什么要搭建这个博客

俗话说的好不想当作家的研究生不是好的软件工程师。所以这个博客算是我求学路上的一个记录工具,用于输出我的知识积累和学习、生活方式。

其实从本科开始,就有记笔记的习惯了,虽然是计算机专业,接触PC和软件的机会远大于其他专业,但是当时依旧用着最古老的方式(手写)记笔记

无论是理论性较强的离散数学编译原理 还是实践性较强的C/C++数据结构,我几乎都有一本笔记本去记录重要知识点,甚至某些科目,在学完一章后、我还会逼自己在一张A4纸上总结出“一页小结”

手写笔记有着很明显的优势、在手写一遍知识点后,你能更加牢固的记得这个知识点、在慢慢书写的过程中甚至还能边写边思考。但是缺点也很明显,那就是时间成本太高


这种情况直到本科快毕业了才有所改变、因为计算机技术迭代迅速、自己又特别的,需要学习的技术数不过来、所以手写笔记这种耗时耗力的方法被我丢到了一边。

于是我开始用印象笔记来进行快速笔记、事实证明,印象笔记的确适合快速学习,无论是剪藏一些网页、从微信、微博等软件上推送一些文章到收集箱、还是在看完一些技术博客或者看完书的某一章后记一些需要记住的知识点,都能进行优雅且迅速编写笔记。

但是用久了以后我发现印象笔记更像是我的信息收集中心、从网页博客、微信、微博、知乎上面收集来的信息会躺在我的收集箱里,直到很久以后才会去分类整理他们,并且因为没有那么多时间(懒)、我很少仔细的阅读他们,往往都是粗粗读过有了一点大概的印象。

自己写的笔记更像是一个“知识字典”、生硬的记录着容易忘记的知识点、只有我有一天突然忘记了这个知识点,我才会找到这篇笔记让自己记忆起这个知识。

这样的阅读和笔记的习惯导致我虽然学习知识较快、但是没有了自己的思考、容易遗忘、常常只是知道这个知识、等到要用的时候才发现自己根本没有掌握它。


所以我想到了搭建博客我搭建这个博客的初心就是让自己在记录知识的同时,能够更加深入的思考自己所学,并形成一个自己的知识体系。毕竟要公布出来的(虽然没有人看),我这么爱面子的人,一定会好好写的。🐒🐒🐒

其实也有想过用CSDN这种大众程序员博客,但是一是在CSDN上写文章太过容易、会让我不珍惜博客每一个博文的位置、二是的确想造一个比较好看的“重复轮子”,这样不仅学习和工作的心情都会更好一些,而且哪一天看到一个模块不顺眼,我还能去修改他。

所以我以后打算用印象笔记当做自己的信息收集中心、记一些比较容易遗忘的知识、而在博客上发布一些有自己思考、有意义的知识总结。

搭建博客的技术细节

这个博客是用GitHub Pages + Jekyll方案快速搭建出来的,并加入了百度网络分析、Gitment评论系统等模块、搭建的过程实际上不长。

Jekyll 静态博客有着明显的优势:

  • 撰写方便、每次撰写博客只需要写一个Markdown文档
  • 发布方便、发布的流程就是程序员熟悉的Git Workflow, Git Commit == Blog Post

这个博客是在Github上的一个开源博客上修改而来的,源博客戳这里->Hux Blog 特别感谢Hux大神的技术支持。

搭建的过程对一些模块进行了如下修改:

博客的评论系统

模板中有自带的两套评论系统——disqus和多说,但是多说早已经停止维护,disqus使得无法科学上网的童鞋无法评论。(原来是说能访问,只不过比较慢,但是我试了试,不翻墙并不能正常访问)。

所以我找到了还算好看的gitment评论系统,效果见此 Demo

gitment如何配置请看官方文档 gitment

中间遇到的比较大的坑是,老是会弹出弹窗显示 object ProgressEvent 然后就登录不进去。

原因是因为源代码中需要访问gh-oauth.imsun.net去GET一些资源、但是此网站的证书过期了。

解决办法是:

  1. 手动进入gh-oauth.imsun.net,然后点高级 -> 继续前往gh-oauth.imsun.net,这样在调试的过程中就可以登录了。
  2. 更换资源的url,将源码中的url改为如下链接:
1
2
<link rel="stylesheet" href="https://halfclock.github.io/css/gitment.css">
<script src="https://halfclock.github.io/js/gitment.js"></script>

其他一些问题的解决可以参考Gitment评论功能接入踩坑教程

一些其他的修改

除了换了评论系统,还做了一些更改:

  1. 由于Mini-about中的css文件和js文件都是从http开头的url中获取的、因此有一些浏览器会自动拦截从这些不安全的url加载的组件。解决办法是将所有被拦截的url的开头都替换成https,目前有如下几个url需要替换:

head.html中的:

1
2
    <link href="http://cdn.staticfile.org/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    footer.html中的

footer.html中的:

1
2
3
4
async("http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })

使用的编辑器

最早接触到Markdown这种好用的文本编辑语言是在Github上、第一次主动编写Markdown是在印象笔记上。

印象笔记的Markdown虽然支持流程图、时序图、甘特图;各种快捷键也很好用,但是不得不说印象笔记对于外部的Markdown文件和插入图片上极其不友好。

  • 虽然能将自己编辑的markdown文件导出至本地、但是印象笔记不能导入外部的markdown文件作为笔记进行编辑(我试过导入、只会建立一个新的笔记且里面存着.md文件)

  • 印象笔记对于插入图片的操作很不友好、每次把图片粘贴进去、基本上只能在APP里看了,如果导出md文件、你还得手动修改图片的位置。

在撰写本博文之前,我也找了很多的markdown编辑器,最终选择了MWeb,这是一款付费软件,但是真的很好用,戳这里了解更多->MWeb官方中文网(忍不住替作者宣传一下)。

MWeb不仅很好的解决了上述的印象笔记的两个问题、而且其外部库模式还能直接导入博客的文件夹,设置markdown文件插入图片后存储的文件位置。(比如:把图片粘贴到markdwon文本中后,MWeb能自动生成图片链接为指定的文件夹、自动将粘贴的图片存储至指定的文件夹

不仅如此,MWeb还有很多的主题可以选择,编辑markdown文档的时候看着好看的界面、心情也会很愉悦。

后记

希望我能不忘初心,写高质量的博文,每天进步一点。

如果你看到这个博客,我希望你能喜欢。