使用 Jekyll 搭建 Github Pages 个人博客

2019/03/14 Tech

概述

本文主要记录我使用Jekyll 和 Gitalk 搭建Github Pages 个人博客的过程。

搭建步骤参考了 这个文档 非常感谢,以下为我按照该文档操作的补充及问题解决。

如对本地搭建运行 Jekyll 模板不感兴趣,可 跳转最后 直接查看模板使用。

建立个人 Github Pages 站点

要求:本地安装 GIT , 并申请 GITHUB 账号。

  1. GITHUB 上创建 xxx.github.io 的仓库名, xxx 即你的 GITHUB 账号。
  2. 进入创建的仓库主页, 点击 SETTINGS, Github Pages 中点击 Choose a Theme 选择一个主题保存后,此时就已经搭建了一个基本的Github Pages了,你可以通过 账户名.github.io 进行访问。

    默认主题较简陋,所以才有了以下使用模板的步骤。

安装配置 Jekyll

  • WINDOWS 下配置
  1. 安装 Ruby 和 DevKit。

    通过 官网 下载 WITH DEVKIT 的安装包,安装过程默认。安装完后弹出 CMD 安装 MSYS2 的窗口选择 3, 等待自动安装。

    以上安装 MSYS2 的时候我遇到一直连接某个数据库没提示完成的问题,但是查看版本号有显示已安装完成,并且也没影响到我后续操作。

    使用以下命令查看是否安装完成

     ruby -v
     gem -v
    

    如果以上命令都能输出版本号的话说明你上一个步骤安装成功。

    因为源地址被墙的原因,安装完毕后还需要记得切换下地址(旧版说使用淘宝源的已经不可用,淘宝官网有给说明)

     $ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    

    查看地址是否替换成功

     $ gem sources -l
    

    确保显示的只有 https://gems.ruby-china.com/

  2. 安装 bundler

    使用以下命令安装

     gem install bundler
    

    安装完成后通过版本号查看是否安装成功,然后切换下源地址

     bundle -v
     bundle config mirror.https://rubygems.org https://gems.ruby-china.com
    

    这样你不用改你的 Gemfile 的 source

    源地址的切换和查看 淘宝网站 , 本文编写时 https://gems.ruby-china.org/ 域名已到期换位 https://gems.ruby-china.com/ 具体该网站官网有介绍。如果以上源地址切换失败了可以去该官网查看最新。

  3. Jekyll 安装

    使用以下命令安装

     gem install jekyll
    
  • MAC 下配置

    MAC 下由于内置 Ruby 省去了第一步的安装,其余不变。

搭建项目

Jekyll 安装完之后,项目模板就可以在本地奔跑了。

  1. 在任意文件夹下使用如下命令创建一个模板

     jekyll new project-name
    

    当然这个自带模板比较简陋,这里我使用的 这个模板 。也可自行查找其他 Jekyll 模板。

  2. 将模板 clone 到本地,在文件夹用运行一下命令安装依赖

     bundle install
    
  3. 注册及使用 Gitalk 评论

    具体参考 官网 , 注册成功后替换本模板下 _config.yml 中 gitalk 的参数。

  4. 启动服务

     jekyll server
    

    一般上述情况会遇到一个问题,就是当前安装的 Jekell 版本一般会比原来的高,这时候就会报错,提示在这个命令之前加上 bundle exec

     bundle exec jekyll server
    

    WINDOWS 下可能还会遇到一个 timezone 的问题,可以参考 这个答案 在 Gemfile 中添加 gem ‘tzinfo-data’, platforms: [:mingw, :mswin, :x64_mingw] (有 64 位区分,具体看原文), 然后执行 gem install tzinfo-data

项目配置

项目配置修改在_config.yml里面, README.md 文件也有具体说明。

更新及发布博客内容

模板内容 拷贝并覆盖仓库 账户名.github.io 即可。

  • 不安装 Jekyll 和配置项目配置博客
  1. 参照 README.md 文档,修改 _config.yml 内容

  2. 编写 _posts 中的 md 文件(博客内容),可使用 md 工具预览。

致谢

我是帅帅的玉米 https://segmentfault.com/a/1190000013705747

码志 https://github.com/mzlogin/mzlogin.github.io

END

Search

    Table of Contents