基于Jekyll搭建个人博客网站

Posted on | Edited on | In , | Comments: | Views:
macOS利用Jekyll和GitHub Pages免费搭建自己的博客

借助jekyll-theme-next搭建博客

新建GitHub仓库

打开创建代码仓库页面，新建仓库并取名为your-username.github.io，这样后面你就可以通过your-username.github.io访问你的博客。

前期jekyll环境准备

确保已安装Ruby 2.1.0 或更高版本

1
ruby --version

安装Bundler：

1
gem install bundler

本地安装NexT

新建博客文件夹，如jekyll-theme-next。
初始化本地Git仓库：

1
git init

下载NexT主题，这里还有更多的主题，你可以选择自己喜欢的，方法是一样的。
解压后把文件拷贝到你的博客文件夹，即jekyll-theme-next。
进入博客文件夹：

1
cd jekyll-theme-next

安装依赖：

1
bundle install

运行 Jekyll：

1
bundle exec jekyll server

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

推送本地代码到GitHub

将本地代码推送到GitHub：

1
2
3
4
git add *
git commit -m "first commit"
git remote add origin https://github.com/your-repository
git push -u origin master

这里your-repository即为your-username.github.io。此时打开网址your-username.github.io便能看到你的博客。

借助七牛图床存储博客图片

装载自Markdown 配置七牛云作为图床

配置七牛云

注册完成之后，在资源主页中的对象存储里添加对象，如添加image，但不能为Bucket
new
new
注意选择的地区可能会影响到图片能否加载成功，如果出错修改地区重试。

上传图片

看如下动图：
new
点击复制外链，粘贴到Markdown文档中即可。

借助LeanCloud统计访问人数

装载自为NexT主题添加文章阅读量统计功能

注册完成LeanCloud帐号并验证邮箱之后，我们就可以登录我们的LeanCloud帐号，进行一番配置之后拿到AppID以及AppKey这两个参数即可正常使用文章阅读量统计的功能了。

配置LeanCloud

创建应用

  • 新建一个应用来专门进行博客的访问统计的数据操作。首先，打开控制台，如下图所示：
    new

  • 在出现的界面点击创建应用：
    new

  • 在接下来的页面，新建的应用名称我们可以随意输入，即便是输入的不满意我们后续也是可以更改的:
    new

  • 这里为了演示的方便，我新创建一个取名为test的应用。创建完成之后我们点击新创建的应用的名字来进行该应用的参数配置：
    new

  • 在应用的数据配置界面，左侧下划线开头的都是系统预定义好的表，为了便于区分我们新建一张表来保存我们的数据。点击左侧右上角的齿轮图标，新建Class：
    在弹出的选项中选择创建Class来新建Class用来专门保存我们博客的文章访问量等数据:
    点击创建Class之后，理论上来说名字可以随意取名，只要你交互代码做相应的更改即可，但是为了保证我们前面对NexT主题的修改兼容，此处的新建Class名字必须为Counter:
    new

  • 由于LeanCloud升级了默认的ACL权限，如果你想避免后续因为权限的问题导致次数统计显示不正常，建议在此处选择无限制。
    new

  • 创建完成之后，左侧数据栏应该会多出一栏名为Counter的栏目，这个时候我们点击顶部的设置，切换到test应用的操作界面:
    在弹出的界面中，选择左侧的应用Key选项，即可发现我们创建应用的AppID以及AppKey，有了它，我们就有权限能够通过主题中配置好的Javascript代码与这个应用的Counter表进行数据存取操作了:
    new

复制AppID以及AppKey并在NexT主题的_config.yml文件中我们相应的位置填入即可，正确配置之后文件内容像这个样子:

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
  app_key: E9UJsJpw1omCHuS22PdSpKoh

这个时候重新生成部署博客，应该就可以正常使用文章阅读量统计的功能了。需要特别说明的是：记录文章访问量的唯一标识符是文章的发布日期以及文章的标题，因此请确保这两个数值组合的唯一性，如果你更改了这两个数值，会造成文章阅读数值的清零重计。

后台管理

当你配置部分完成之后，初始的文章统计量显示为0，但是这个时候我们LeanCloud对应的应用的Counter表中并没有相应的记录，只是单纯的显示为0而已，当博客文章在配置好阅读量统计服务之后第一次打开时，便会自动向服务器发送数据来创建一条数据，该数据会被记录在对应的应用的Counter表中。
new

我们可以修改其中的time字段的数值来达到修改某一篇文章的访问量的目的（博客文章访问量快递提升人气的装逼利器）。双击具体的数值，修改之后回车即可保存。

  • url字段被当作唯一ID来使用，因此如果你不知道带来的后果的话请不要修改。
  • title字段显示的是博客文章的标题，用于后台管理的时候区分文章之用，没有什么实际作用。
  • 其他字段皆为自动生成，具体作用请查阅LeanCloud官方文档，如果你不知道有什么作用请不要随意修改。

Web安全

因为AppID以及AppKey是暴露在外的，因此如果一些别用用心之人知道了之后用于其它目的是得不偿失的，为了确保只用于我们自己的博客，建议开启Web安全选项，这样就只能通过我们自己的域名才有权访问后台的数据了，可以进一步提升安全性。

选择应用的设置的安全中心选项卡:
new

在Web 安全域名中填入我们自己的博客域名，来确保数据调用的安全:
new

借助Disqus添加评论支持

转载自为Hexo博客加入Disqus评论

注册Disqus

打开Disqus主页，注册一个账号。

配置Disqus

登录后，点击首页的GET STARTED按钮，之后选择I want to install Disqus on my site选项，新建一个站点。

  • Websit Name： 就是等会配置文件中要填写的shortname，自己填写即可，但是要求全网唯一，设定后不可改变，比如这里假设为your-name：这个在配置jekyll的时候需要用到。
  • Category：选择种类，可以随便选，我这里选Tech。
  • Language：语言选Chinese或者English。

然后点Create Site等待界面跳转。
接下来在页面的左侧点击Configure Disqus

配置jekyll

打开_config.yml文件，搜索找到disqus，将配置更改为如下：

1
2
3
4
disqus:
  enable: true
  shortname: your-name
  count: true

将更改推送到GitHub打开博客网址便可以看到下面出现了评论框了。

撰写博客

参考