Git pages&Jekyll构建博客

Posted by KunLiu on October 26, 2016

Git pages&Jekyll

1.使用git pages

参考https://pages.github.com/

2. 安装Jekyll

参考jekyll安装 介绍了如何在windows上安装,其他版本安装

在windows 上出现部分问题:

  1. 安装ruby 出现问题
C:\Devkit>ruby dk.rb install
Invalid configuration or no Rubies listed. Please fix 'config.yml'
and rerun 'ruby dk.rb install'

​ 参考 http://stackoverflow.com/questions/20810653/how-do-i-configure-config-yml-so-that-i-can-install-devki,需要设置C:\RubyDevKit\config中的Ruby路径

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
- "C:/Ruby23-x64"
  1. gem install时出错 参考http://stackoverflow.com/questions/19150017/ssl-error-when-installing-rubygems-unable-to-pull-data-from-https-rubygems-o/27298259#27298259,需要安装gem包对于windows:
 Goto link http://rubygems.org/pages/download

1. Download the latest zip file (In my case 2.4.5)
2. Unzip it
3. run "ruby setup.rb" in unzipped folder
4. now run gem install command

3.使用Jekyll

下载相应Jekyll主题,配置_config.yml,之后在目录内执行Jekyll sever 即可运行

4.安装Mathjax插件

参考@Afred sun大神的博客,复制粘贴相应代码到对应标签中。

唯一出现问题:在本地可以渲染公式,push到gitpages无法正确渲染。

解决方法:

通过调用审查来调试,可以看到错误

This request has been blocked; the content must be served over HTTPS.

搜索答案,把博客中mathjax插件调用代码中的“https:”去掉即可

困扰很久的问题只要调用审查元素就轻松解决,没学过前端不知道审查调试的重要性。

5.申请域名

正常来说,使用kaka2634.github.io就可以打开我的博客主页了,但是为了更好记住地址,可以申请一个免费的域名。

参考文章为http://itcoding.tk/2016/06/26/set-up-custom-domain-for-github-pages/,里面使用了Freenom来注册免费域名,使用DNSPod来免费的域名解析服务。之后给git文件增加CNAME文件,修改Freenom的默认解析服务为DNSPod就可以使用新的域名地址了。

新的域名地址是:kunliublog.tk

6.谷歌站点统计

申请谷歌站点统计账号,获取序列号XXX;

在_config.yml 文件中增加 google_analytics:XXX;

在index.html文件下增加如下代码,将XXX改为你的序列号。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'XXX', 'auto');
  ga('send', 'pageview');

</script>

7.使用Markdown

注意使用markdown时content与title之间要空两行

8. 修改相应文件

  • 修改head.html文件中 favicon路径为

    <link rel="shortcut icon" href="https://kaka2634.github.io/img/favicon.png">
    


知识共享许可协议
本文采用 CC A-NC-SA 4.0国际许可协议进行许可。