博客搭建过程及思考

Posted by Ja50n on June 15, 2015

除了大学时上过一学期的C++基础课程(连门都入不了)以外,没有正儿八经学习过编程。一直的理想是成为一个优秀的程序员,但是一直以来,都不知道自己想学哪一种。工作环境让我接触最多的是VB.NET,但是不看好VB.NET的未来,所以一直犹豫。喜欢前端,业余时间也都是各种折腾,没有去正经看过一本前端的书。关注了各种技术大拿和媒体,但是似乎就只是:今天又听说了一种技术,以后有时间学一下、今天看到了C++的内存优化技巧,收藏先,等以后我学会了C++,就能用到了…了解了各种表面的编程知识,编程水平还是没多大进步。

已经工作两年了,学习编程也近一年半了,到现在还是没有一门语言可以独立编写程序,总是搜索,学习效率够低的。这个博客的建立将是我这两年折腾史的终结。不过,人生不息,折腾不止,终结的只是那一段目标不明确、效率低下的历史,以后专心放在VB.NET和前端的学习上。

一、博客搭建起因

一直对网站开发很感兴趣,大学的时候学着用DreamWeaver做了完全静态的本地博客站点,竟然还拿去做了毕业设计和论文。现在想想论文能通过,也是感慨。

后来因为家里的领导做了独立外贸从业者,计划做一个网站。因为时间不赶,以及独立自由的原因,我便接下了这个任务,又开始折腾网站。

由于某些原因,外贸网站开发(如果能叫开发的话)到整个站点框架和UI刚刚成型的时候,中止了,现在放在免费虚拟主机上,没有动过了。纯HTML+CSS+Jquery,也是很low。原想把网站做到UI成型、能够正常访问就上线,靠手动添加每一个页面,页面也不是很多,应付得过来;后续慢慢添加数据库,迁移到PHP等(这两个我都还没学会)。现在这些计划可能要无限期延迟了。

外贸建站中止后,我把心思放在了VB.NET的学习上,现在在一个机器视觉公司工作,正在转研发。在学习VB.NET过程中,一些笔记、代码需要记录下来。原来使用印象笔记做记录,其实印象笔记跨平台也挺方便的,但是总感觉不够自由,不够纯粹;代码显示效果也不够好。所以就有了建立一个独立博客的想法。希望可以快速做一个博客出来,不添加任何花哨的功能,只为博客日志。然后…最后还是各种折腾。

用一个词来形容我到目前为止的编程学习之路就是“折腾”。 一直纠结于网站好不好看, 每一个网站细节是不是合适,可能为了一个边距的问题查看很多别人的博客找到最合适的效果, 我想我有机会一定会去学设计的。

二、博客搭建过程
1. GitCafe Pages 和 Materialize

博客搭建的目标是快速,简单。所以我选择了Material Design + GitCafe Pages的方案。(当时不知道还有Jekyll、Hexo、simple等这样适用GitCafe Pages或Github Pages的静态博客生成工具)。GitCafe Pages的配置参考官方帮助文档

第一个版本是用网上的一个Material Design模板改的,仿 Typeblog 博客风格。

文章主要目的不是分享教程,而是一个搭建过程的记录和思考,只放部分截图。

在对比了十款左右的Material Design风格开发框架之后,选择了Materialize,响应式设计,移动端UI风格接近Android软件,对框架CSS进行若干修改之后,整体框架基本成型。

2. HighLighter代码高亮

因为是编程学习博客,代码高亮是一定要有的,又是各种搜索,找到了比较有名的SyntaxHighlighter,配置比较简单。页面添加对应jscss文件,代码引用部分的class类改为brush:[语言名称]就可以了。

3. 多说评论

博客的重点在于分享和交流,评论功能是一定要的。关注的博客大多使用多说社会化评论系统,还有一部分使用国外的DISQUS。两者的功能差异我没有去了解,单从界面来说,我更喜欢DISQUS,但是苦于英文不好,使用DISQUS的话各种配置和修改问题肯定是麻烦的很,所以最后选择多说,本地化,有问题查文档也快,支持自定义CSS。

添加多说之后主要做的更改就是将评论数提取出来,显示在文章信息栏中,这个查官方文档可以解决。

4. 响应式

大概是开始有做博客想法的时候就决定了要做响应式,手机上要可以比较方便的浏览学习笔记。所以移动端的优化一直是贯穿始终的,Chrome和FireFox都能够切换到响应式设计模式进行预览。

5. 迁移到 Github Pages 并使用 Jekyll 工具

博客的UI基本上是定型了,后续可能就是一些小的细节上优化。中间花了大概三周的时间,经常是晚上过了零点提交代码到GitCafe。在这个过程中有点慢慢的忘记了博客的初衷:快速搭建适用学习笔记,分享心得,记录思考的博客。我在博客成型的最后那个阶段,开始将注意力转移到博客文章上,我要加快脚步,早日写出第一篇博客(也就是慢慢来,还是勇敢冲,时间已经是六一儿童节),前三篇都是为了看网站效果,从之前记录的代码段直接拿过来,加上若干说明文字。不够完整,就是一个Snippets而已。

靠手动添加html网页的方法写文章太不方便了(大菜鸟…),开始将目光放在了Markdown上。

Markdown是很早就了解的一个标记语言,适合写文章。后来得知用Markdown写博客也很方便。便开始搜寻使用Markdown编写博客,而且不需要独立主机的方法,了解到了Jekyll/Hexo等工具。在犹豫选哪一种的时候,JASKNi发了一个微博,说准备基于之前给Zealer设计的官网出一套主题,先做WordPress,再做Jekyll和Ghost等流行服务。最后选择了Jekyll。坐等主题出来。谁让我既喜欢Zealer又喜欢JASKNi呢。然后开始查找使用Jekyll建立博客的方法,看到很多都是Github Pages配Jekyll的方案。

知道git这个东西是因为MacTalk,订阅了他的微信公众账号,买了他的【MacTalk人生元编程】,了解了Linux之父Linus Torvalds的生平,知道了Linus创造的另一个奇迹git。在我开始正式写一些程序的时候,便开始使用git做版本控制。知道Github和GitCafe反而是这之前的事,但是那时候不知道它们都是站在git这个巨人肩膀上。

刚开始使用GitCafe是在做外贸网站的时候,作为私密项目托管在GitCafe上,还是要比本地仓库好一些。选择GitCafe而没有选择Github的原因有三个:

    1. 速度。Github在国内还是不太稳定,出现过几次问题
    2. 语种。初学git,需要能够快速上手
    3. 界面。喜欢GitCafe的网站界面,那是JASKNi刚去GitCafe不久后重新设计的(喜欢JASKNi...)

但是Github才是最优秀的远程代码托管仓库,大量的优秀的开源产品都托管在Github上,要从GitCafe迁移到Github,这正好是一个契机。迁移的过程还比较快,将本地公钥添加到Github上之后,按照官方教程新建一个Github Pages项目。为了防止出现意外,还是将源文件夹复制了一份出来,然后将远程仓库地址改到Github,再 git push到Github就完事了。GieCafe还会继续使用,有时间的时候把博客同步提交到GitCafe上。


2015.08.03更新: 实现GieCafe和Github同步提交,域名解析使用DNSPod,分别根据访问IP解析到国内的GitCafe或者国外的Github,提高访问速度。

然后再迁移到Jekyll上,安装Jekyll,新建一个博客,按照Jekyll的配置方法把原博客相关文件搬进去,配置好,然后再把Jekyll项目移到原博客目录,删除原博客目录中不需要的文件。在根目录下运行 jekyll serve命令,浏览器打开 localhost:4000,就可以看到博客的效果了。

运行 jekyll serve 的时候经常会报错,提示 Pygments 的 vb.net 语法高亮编译超时,多运行几次 jekyll serve 就好了,大概是因为 Jekyll 在 Windows 上运行不是很好。这也是后来在电脑上安装 Ubuntu 的原因之一,在 Ubuntu上 从没出过错。

迁移到Github Pages和Jekyll用了一天左右的时间,这较我之前的进度来说,已经是很快的了,不得不感叹Jekyll的方便和强大。

6. Jekyll深入学习使用

迁移至Jekyll之后,就可以快速的写博客了。但是还有一些功能没有加上,分类目录,标签目录,分页等,分页因为现在文章还不多,可以暂时放一放,分类目录和标签目录还是要做的,为了博客的完整性,不能导航栏一个孤零零的关于摆在那里。做这两个目录的时候,用到一些Jekyll的变量,方法从网上搜了一些,直接复制过来.基本上也很快做好了。

Jekyll的功能挺多的,Jekyll(中文)的文档我没有全部看完,都是想要什么功能就去查一查,有时间的话一定好好看看。

7. 添加自定义域名

在使用GitCafe Pages / Github Pages服务来搭建博客之前就计划了要使用自定义的域名。一来username.github.io这个域名不好记,二来之前准备做外贸网站的时候注册了一个域名,现在外贸网站停滞了,域名放着也浪费,所以就将这个域名作为博客域名,在Github Pages添加自定义域名的方法见「Github Pages绑定godaddy注册的域名」。

三、思考

搜索 - 复制 - 粘贴 。这个过程现在越来越反感,虽然大部分时候解决了我的问题,但是缺乏思考。解决完第一次,第二次出现同样的问题,还是不知道怎么做,还要再回去搜。

直接搜索现成解决方法固然是快。在急需快速建立博客,完成这个转换学习方式的节点的时候,还是选择这种方法来解决问题。博客建立的过程前后花了一个月的时间,中途问我家领导为什么不去浏览我的博客,不去评论的时候,她说了一句话让我感慨很深,大意是:你天天一门心思花在你的博客上面,都不管我,鬼才会去看呢。

所以我做博客的初衷是什么呢,学习笔记,分享心路历程,分了让自己的生活更美好。但是却忽略了我现在的生活,放走了眼前的幸福,所以我必须尽快终结这个过程。

这是我写的第二篇文章了,做博客初期就计划要把搭建过程写成文章,只不过原计划是把每一个细节,每一个问题都记录下来,分享给有需要的人们。但是后来我发现原来我走的路是弯的,有更快更好的路我没走。这篇文章就改成了只是记录大概建立过程和对这个而过程回顾思考。如果你是小白,也想搭建属于自己的博客,这篇记录一个菜鸟是如何搭建自己第一个博客的文章应该可以帮你找到一些方法。如果你是其他,那看看一个菜鸟做博客的心路历程也好。


2016.06更新: GitCafe已经卖给Coding了,不提供服务,GitCafe 的代码迁移至Coding,最后放弃同步,只使用Github做代码托管,回归简单。


2017.** 更新: 原来的文章图片为了提升浏览速度,统一托管在贴图库上,现在免费版的保存时间缩短到了7天,需要重新寻找更好的图片托管服务了。


2018.09.11 更新: 贴图库图床规则更改,图片丢失,改为使用PicGo图床工具,使用阿里云OSS / 腾讯云COS作为图床。


评论: