github pages + jekyll + markdown个人博客搭建

Posted on In Disqus:

本文环境

  • windows 10 32位

前提准备

1、git

从git官网下载git安装包并安装。建议将git添加进PATH中。

2、Ruby

从官网下载Ruby2.2.3和DevKit-mingw64-32-4.7.2-20130224-1151-sfx.exe并依次安装，安装路径中不能有空格。建议将ruby添加进PATH中。安装完后用Start Command Prompt with Ruby（在ruby程序项中可以找到）进DevKit的解压目录，运行以下命令

1
2
3
4
5
6
7
> cd <DEVKIT_DIR> #<DEVKIT_INSTALL_DIR>为DevKit解压目录
> ruby dk.rb init
#生成config.yml，这里会检查将要添加DevKit支持的Ruby列表，只支持通过RubyInstaller安装的Ruby
#如果这里列出的Ruby与你的要求不符，可以手动修改
> ruby dk.rb review  #检查要添加DevKit支持的Ruby列表是否有误，可以略过
> ruby dk.rb install
> gem install rdiscount --platform=ruby

这样 Ruby和DevKit就配置好了。
注：需要安装DevKit，否则在运行 bundle install 命令时(下面会提到)会出现

1
2
3
4
5
6
7
Gem::InstallError: The 'json' native gem requires installed build tools.

 Please update your PATH to include build tools or download the DevKit
 from 'http://rubyinstaller.org/downloads' and follow the instructions
 at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'
 An error occurred while installing json (1.8.3), and Bundler cannot continue.
 Make sure that `gem install json -v '1.8.3'` succeeds before bundling.

参考网址: rubyer.me stackoverflow

3、github操作

申请github帐号并新建一个名为username.github.io的repository(其中username用申请的github账号名替换)。具体可参考github帮助。

步骤

1、在git bash或命令行中运行

1
ssh-keygen -t rsa -C "youremail@example.com"

在github中添加SSH key。 参考

2、在git bash或命令行中运行

1
git clone git@github.com:username/username.github.io.git

将之前创建的username.github.io复制到本地。

3、可用以下命令进行git提交

1
2
3
git add --all
git commit -m "Initial commit"
git push -u origin master

第一次推送master分支时，加上了-u参数，Git不但会把本地的master分支内容推送的远程新的master分支，还会把本地的master分支和远程的master分支关联起来，在以后的推送或者拉取时就可以简化命令。
从现在起，只要本地作了提交，就可以通过命令：

1
> git push origin master

可参考:
http://stackoverflow.com/questions/5561295/what-does-git-push-u-mean
http://stackoverflow.com/questions/5697750/what-exactly-does-the-u-do-git-push-u-origin-master-vs-git-push-origin-ma

4、搭建jekyll环境
大陆用户最好将ruby源更换为taobao源。
在Start Command Prompt with Ruby或命令行中运行

1
2
3
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

然后在网站的根目录创建一个名为Gemfile的文件，并在里面添加以下命令：

1
2
source 'https://ruby.taobao.org/'
gem 'github-pages'

然后在Start Command Prompt with Ruby或命令行中运行

1
2
3
gem install bundler
gem install jekyll
bundle install

然后就可以创建一个jekyll文件夹。可以将”.”替换为目录名。

1
jekyll new .

就可以生成带样式的页面了。注意如果当前目录有文件，需要将其中文件备份删除。本文就是将原来生成的github pages默认文件(除.git外)全部删除，更换为jekyll目录文件并进行git提交的。
可以用以下命令进行本地查看调试

1
2
jekyll serve
# => Now browse to http://localhost:4000

修改后就可以通过步骤3中的命令进行提交。

参考：
http://loshine.gitcafe.io/jekyll/2015/08/17/use-jekyll-to-build-personal-blog-on-github-pages/
http://cenalulu.github.io/jekyll/how-to-build-a-blog-using-jekyll-markdown/

其他

修改jekyll主题

可以在 http://jekyllthemes.org/ 下载主题。

添加评论功能

多说

登录多说，创建一个项目，拷贝你的通用代码。
在_include文件夹里新建一个comment.html文件，将通用代码粘贴进去。
修改通用代码中需要配置的地方

1
2
3
4
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID"
    data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<div class="ds-thread" data-thread-key="{ page.id }"
    data-title="{ page.title }" data-url="your web site{ page.url }"></div>

在_layout中的post.html中的底部加入

1
{% include comment.html %}

可参考：
http://code4pub.github.io/tech/2014/05/04/integrate-with-duoshuo-comment/

Disqus

Disqus支持使用Disqus、Facebook、Twitter以及Google帐号登录，如果你的博客不是主要面向国内普通用户的话，可以考虑使用Disqus。
登陆Disqus,创建一个项目，拷贝Universal Code。
在_include文件夹里新建一个comment.html文件，将通用代码粘贴进去。
在_layout中的post.html中的底部加入

1
{% include comment.html %}

参考：
http://loshine.gitcafe.io/jekyll/2015/08/17/use-jekyll-to-build-personal-blog-on-github-pages/
http://justcoding.iteye.com/blog/1959737