快速搭建GitHub静态博客

1、选择GitHub的理由

1.1、页面可以根据自己的需求定制,想做成什么样的就做成什么样的,没有限制.

大数据时代,我相信大部份人都应该有自己的Blog,但由于国内对网站需要备案,很多大网站提供Blog系统但对页面都有限制,点点网也因此而关闭了个人定制主页的功能,只能在当前Blog系统中选择,太单调而且有的网站提供的Blog页面也太丑,对于我们这种程序猿来说,完全不符合要求,我们需要的是量身定制,因此选择了GitHub构建自己的网站。

1.2、GitHub上构建自己的网站是免费的

但也存在随时被墙的风险,网速也不尽人意,但对于一般的小型个人网站(以文字为主的页面)基本可以满足需求。

1.3、可以使用Python来搭建,Pelican库。

个人现在对Python是情有独钟。而且Pelican还集成了大量的模板供选择,搭建个简单的网站速度是杠杠的,下面是它的功能介绍

+ pelican支持reStructuredTextMarkdownAsciiDoc格式,可以让文章的格式很美观。
+ 评论使用Disqus,它是一个第三方的评论服务,使用它后所有的评论数据将托管在Disqus,不用担心数据丢失。它类似于国内的多说,如果你愿意,使用多说来替换Disqus也是非常简单的。
+ 可以使用Jinja2模板系统来定制主题。
+ 支持将文章导出为PDF(可选)。
+ 支持多语言。
+ 支持Atom/RSS订阅。
+ 支持代码高亮(程序猿必备,赞)。
+ 支持WordPressDotclearRSS feeds数据导入(这个必须给32个赞!!)。
+ 可以集成TwitterGoogle Analytics等工具(可选)。

1.4、可以使用Vim+Markdown插件写博客,不需要花大量的时间在Word的排版上。具体的环境搭建请参见网址

1.5、不用再担心流量的问题。

前段时间在点点网上创建了一个博客,两个月后查SEO居然啥也没有。相信GitHub的实力,将最好的东西展示出来,一定会获取相应的回报

2、需要具备技能

* Python基础
* GitHub的使用,GitHub帐号是必须的
* 前端知识CSS\HTML\JS,简单的应用方式了解一下就可以,不懂随时度娘。
* Markdown语法
* Search and Replace,很好的搜索工具
* FireFox或者Chrome浏览器,F12调试功能

3、快速搭建技巧

3.1、基于别人的已搭建好系统修改,如果喜欢可以使用我修改的模板,参见网址

网上有很多文章,都在讲怎么从头创建一个静态站点,怎么修改配置文件,怎么安装插件...,曾经我花了一天从头开始研究,遇到一堆的问题。如果你有大量的时间,可以重头搞一下如果你想快速搭建一个博客的话,还是先玩别人已修改好的模板,特别是像我这种,对前端技术一知半解的人来说,借鉴是个不错的选择

3.2、先别急着修改模板,把各种你需要的插件加载上去再说,以便网站方便得到推广

* 评论系统的搭建
* 微博的关联
* 各种插件的配置

3.3、根据自己的需求修改模板内容

有同学可能会说,前端我一窍不通,怎么办?其实很简单,先用FirFox或者Chrome定位到你要修改的文件以及具体的修点,获取关键字,利用Search and Replace工具搜索模板中的关键字,找到对应的点,修改方法度娘一下。当然如果你对前端很通的话,其实就是小菜一碟啦。

3.4 上传文件到GitHub

不懂操作的,可以使用GitHub可视界面创建版本库,再上传文件,此处别忘记在此版本库上申请一个域名,这样GitHub才知道根据静态页面解析。上传成功后你可测试一下是否可以正常访问页面,网址一般为 `https://用户名.github.com`,看是否正常显示

3.5、申请域名和DNS映射

一般在 `https://www.godaddy.com/` 上购买,最好购买.net或.com的域名,一般一年也就几十元。DNS映射国内还是使用 `https://www.dnspod.cn/` 吧,这样速度相对会快一点点,而且不会被墙。至于为什么要做DNS解析,其实很简单,需要将你github上的域名与你购买的绑定,这样就可以使用你购买的域名来访问网站

4、常见问题

4.1 修改为相对路径

系统默认为绝对路径,修改配置文件,增加`RELATIVE_URLS = True`,即可修改为相对路径

4.2 markdown生成的代码会有红框

需要修改css文件,在目录`bootstrap3\static\css\pygments`下,看你的配置文件,如`PYGMENTS_STYLE = 'emacs'`,则需要修改emacs文件,找到.err,将`border: 1px`修改为`border: 0px`

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: