保存成功
保存失败,请重试
提交成功

一场 Chat 拥有自己的博客

向作者提问
曾上线运营平台;报表自定义;养老护理中心信息化平台等项目。此外负责公司项目从 SVN 到 GITLAB 的迁移和公司十亿级数据迁移工作。日常喜欢运动、旅游、读书,励志做一个热衷技术、享受生活的新时代程序员。
查看本场Chat

一、使用 Jekyll 和 GitHub 三步搭建个人博客

搭建过程需要使用 Git,如果没接触过 Git 可先移步“让你一场 Chat 学会 Git”。

1.在 GitHub 上建一个库,库的名字是 xxx.github.com,其中的 xxx 是你的 GitHub 的账号名(这里 jueye3 是我的账号名,图中标注的不要勾选)

注:如果没有 GitHub 账号,需要注册一个:

enter image description here

2.在 Jekyll模板中选择自己喜欢的模板 clone 到本地(这里选 Bef 做实例):

enter image description here

3.对模板中的信息进行修改(注释掉 _config.yml 文件里baseurl:“/bef”),将模板 push 到自己的库中,然后访问 xxx.github.io,可访问到自己的博客,so easy!

注:由于此模板图片较多,所以加载较慢,视觉效果还是不错的。

enter image description here

二、So cool 发生了什么?

为什么只是简单的三步操作,就完成了个人博客的搭建呢?

使用 Jekyll 和 GitHub 搭建个人博客的整体思路就是:先在本地编写符合 Jekyll 规范的网站源码(在模板基础上更改),然后上传到 GitHub,这种上传并不是单纯的上传,而是会经过 Jekyll 程序的再处理(GitHub 已经安装好,不需认为操作)。由 GitHub 生成并托管整个网站。

1. Jekyll 是什么?

Jekyll 是一个简单的静态站点生成器,它会根据网页源码生成静态文件。是两大静态博客主流框架(Jekyll 和 Hexo)之一。Jekyll 有很多模板,可以结合 GitHub 用来搭建免费的个人博客,Jekyll 使用 Liquid 模板语言(官方文档),是基于 Ruby 的,所以如果在本地使用 Jekyll 必须先搭建 Jekyll 环境,我的建议是不必花时间在本地安装环境,由于 GitHub 已经安装好环境,所以直接 push 到 GitHub 看实际效果更为明智。

2.GitHub Pages 是什么?

GitHub Pages 是 GitHub 面向用户、组织和项目开放的公共静态页面搭建托管服务,允许站内生成网页,也允许用户自己编写网页,然后上传。站点可以被免费托管在 GitHub 上,可以选择使用 GitHub Pages 默认提供的域名 github.io 或者自定义域名来发布站点。GitHub Pages 支持自动利用 Jekyll 生成站点,GitHub Pages 可以被认为是用户编写的、托管在 GitHub 上的静态网页。

3.优劣分析

  • 优势:简单,免费,文章保存在 GitHub 上,并且使用 Git 的版本管理功能,不用担心文章遗失,可以在任何时间地点写文章push到 GitHub 发布,而且支持 MarkDown 语法,可以把主要精力放在写文章上。
  • 劣势:有一定技术门槛,你必须要懂一点 Git 和网页开发。它生成的是静态网页,添加动态功能必须使用外部服务,例如评论功能。因为没有用到数据库,每运行一次都必须遍历全部的文本文件,网站越大,生成时间越长。所以它不适合大型网站。

但是,总的来说,搭建中小型 Blog,特别是个人博客,确实是个很好的选择。既拥有绝对管理权,又享受 GitHub 带来的便利,更主要的是,这一切是免费的,GitHub 提供无限流量。

三、刨析实例

1. 目录结构

enter image description here

2. _config.yml

这个文件特别重要!是保存配置的,标题,描述,评论等;基本上博客的所有配置可以放在这个文件里。

3. _layouts

这里存放的是模板文件,发布的文章会根据文章顶部的 yaml 文件头来设置一些元数据,如 layout:default,表示该文章的模板使用 _layouts 目录下的 post.html 文件;title:,表示该文章的标题,如果不设置这个值,默认使用嵌入文件名的标题等等。

4. _includes

这里面的就是可以重复利用的文件。这个文件可以被其他的文件包含,重复利用。{% include head.html %} 就是引用 head.html。

5. _posts

这里的文件就实际的文章内容了。文件名必须使用“年-月-日-文章标题.后缀名”的格式。在博客上发布文章的时候,只需要在此文件夹中加入带有 YAML 头信息的 MarkDown 文件,然后 push 到 GitHub,就会被自动渲染成 HTML。

四、给个人博客加评论功能

第三方的评论系统有很多,这里选择 Gitalk 来进行演示,Gitalk 是纯客户端组件,无 Server 端,使用 GitHub 登录,所有评论数据存储为 GitHub Issue。

1.首先需要注册 GitHub Application

Authorization callback URL 填写当前使用插件页面的域名,具体见下图:

enter image description here

2. 创建 comments.html

内容如下,添加到 about 页面(这里以 about 页面为例,其它页面类似)

{% if page.comments != false %}

    {% if site.comments_provider == 'gitalk' %}
        <div id="gitalk-container"></div>
        <script src="/assets/js/gitalk.min.js"></script>
        <script>
        var gitalk = new Gitalk({
            id: '{{ page.url }}',
            clientID: '{{ site.gitalk.clientID }}',
            clientSecret: '{{ site.gitalk.clientSecret }}',
            repo: '{{ site.gitalk.repo }}',
            owner: '{{ site.gitalk.owner }}',
            admin: ['{{ site.gitalk.owner }}'],
            labels: ['gitment'],
            perPage: 50,
        })
        gitalk.render('gitalk-container')
        </script>
    {% endif %}
{% endif %}

3.在 GitHub 上创建仓库 blog-comments,添加如下代码到 _config.yml

注:clientID 和 clientSecret 是第一步注册的时候得到的,owner 是自己的用户名

comments_provider: gitalk
gitalk:
    owner: jueye3
    repo: blog-comments
    clientID: fa5504fe07f319cba9ee
    clientSecret: 30532bea61e8b63dc5a852e448621a8c89cef99b

4. 下载 gitalk.min.js 和 gitalk.css

下载 gitalk.min.js(放到 assets/js 文件夹下)和 gitalk.css(放到assets/css 文件夹下), push 后访问,效果如下图:

enter image description here

5. 使用 GitHub 账号登陆初始化,就可以使用评论功能了

效果如下图:

enter image description here

enter image description here

五、给个人博客加统计功能

相信很多人对自己的博客访问量还是很感兴趣的,好的关注度和大的访问量能给自己写博客很大信心,下面我就介绍一下如何给自己的博哥添加统计功能(以百度统计为例)

1. 在百度统计上注册账号并登陆,然后新增网站

enter image description here

enter image description here

2. 在 _includes 下创建 baidu-anaylysis.html

内容是百度统计生成的代码,如下图:

enter image description here

3. 在 head.html 文件中添加 {% include baidu-anaylysis.html %},Push后可以检查是否成功

enter image description here

4. 代码正确安装,可以查看报告了

enter image description here

六、给个人博客绑定域名

首先需要有域名,如果没有域名,可以通过很多渠道注册域名,有了域名之后,新建一个 CNAME 文件(无后缀名),然后用文本编辑器打开,在首行添加你的网站域名,如 http://xxxx.com,注意前面没 http://example.com 或者 xxx.example.com。

enter image description here

在域名解析提供商,下面以百度云为例。

  1. 先添加一个 CNAME,主机记录写 @,后面记录值写上你的 http://xxxx.github.io
  2. 再添加一个 CNAME,主机记录写 www,后面记录值也是 http://xxxx.github.io

这样别人用 www 和不用 www 都能访问你的网站(其实 www 的方式,会先解析成 http://xxxx.github.io,然后根据 CNAME 再变成 http://xxx.com,中间是经过一次转换的)。

注:上面,我们用的是 CNAME 别名记录,也有人使用 A 记录,后面的记录值是写 GitHub page 里面的 IP 地址,但有时候 IP 地址会更改,导致最后解析不正确,所以还是推荐用 CNAME 别名记录要好些,不建议用 IP。等十分钟左右,刷新浏览器,用你自己域名访问下试试。

结束语

按照本篇文章搭建起个人博客应该不成问题,并且应该不会花费多少时间就能完成,但是要博客个性化,搭建一个自己喜欢的博客,可能就需要下一番功夫了,我建议还是模板上改,先找一个自己喜欢的模板,在改的过程中会有一些自己的想法,慢慢搭建一个自己喜欢的具有个人风格的博客。欢迎大家和我在读者圈交流,GitChat 最近快问也已经上线,欢迎大家互动。 enter image description here


本文首发于GitChat,未经授权不得转载,转载需与GitChat联系。

还没有评论
评论
查看更多
微信扫描登录