github pages + Jekyll windows环境下创建个人博客

前提

设备环境:win7旗舰版 64位
已经有 <yourname>.github.io 地址,如我的:helloPigger.github.io
注:一定是<yourname>.github.io

步骤

安装Ruby+Devkit

下载地址:https://rubyinstaller.org/dow...
我选的 Ruby+Devkit 2.4.4-1(x64), 也是官网推荐的版本

注:看了很多文章都是先安装ruby再安装Devkit,我直接安装的Ruby+Devkit,很方便很简单

直接"下一步"安装即可,最后一步记得勾选Run 'ridk install' to setup MSYS2:

点击Finish,跳到cmd命令窗口，输入3：

到这儿，ruby安装完成。检查是否安装成功:

ruby -v
gem -v

安装jekyll

gem install jekyll

检查是否安装成功：jekyll -v

创建blog

jekyll new zwjBlog

zwjBlog下的文件:

_posts文件夹，文章默认的存放位置
_site文件夹，默认的转化结果存放位置
.gitignore文件，git将忽略该文件中列出的文件或文件夹
_config.yml文件，jekyll模板引擎的配置文件，修改之后需要重启服务
index.md文件，默认的主页

注:不要自己手动建zwjBlog文件夹,一定要用 jekyll new zwjBlog 命令创建

然后运行jekyll serve,这是最后一步,也是出现问题最多的一步,我把自己遇到的问题按照顺序整理了出来(见下一节)

问题总结

1. 第一次运行jekyll serve时出现的错误

C:/Ruby24-x64/lib/ruby/2.4.0/rubygems/core_ext/kernel_require.rb:55:in `require': cannot load such file -- bundler (LoadError)
    from C:/Ruby24-x64/lib/ruby/2.4.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/jekyll-3.8.3/lib/jekyll/plugin_manager.rb:48:in `require_from_bundler'
    from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/jekyll-3.8.3/exe/jekyll:11:in `<top (required)>'
    from C:/Ruby24-x64/bin/jekyll:23:in `load'
    from C:/Ruby24-x64/bin/jekyll:23:in `<main>'

问题原因:
缺少bundler
解决方法:
安装bundler: gem install bundler

2. 安装好bundler后运行jekyll serve仍报错

C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/resolver.rb:28
9:in `block in verify_gemfile_dependencies_are_found!': Could not find gem 'mini
ma (~> 2.0) x64-mingw32' in any of the gem sources listed in your Gemfile. (Bund
ler::GemNotFound)
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/r
esolver.rb:257:in `each'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/r
esolver.rb:257:in `verify_gemfile_dependencies_are_found!'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/r
esolver.rb:48:in `start'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/r
esolver.rb:22:in `resolve'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/d
efinition.rb:258:in `resolve'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/d
efinition.rb:171:in `specs'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/d
efinition.rb:238:in `specs_for'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/d
efinition.rb:227:in `requested_specs'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/r
untime.rb:108:in `block in definition_method'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler/r
untime.rb:20:in `setup'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.2/lib/bundler.r
b:107:in `setup'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/jekyll-3.8.3/lib/jekyll/plug
in_manager.rb:50:in `require_from_bundler'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/jekyll-3.8.3/exe/jekyll:11:i
n `<top (required)>'
        from C:/Ruby24-x64/bin/jekyll:23:in `load'
        from C:/Ruby24-x64/bin/jekyll:23:in `<main>'

问题原因:
没有Bundler (Bundler::GemNotFound)
解决方法:
切到zwjBlog路径下,执行命令: bundle install

注:1. bundle install 的安装过程可能会很长,耐心等待 2. bundle install执行之前需要先执行 gem install bundler(即上一个问题),否则会报错

3. 执行jekyll serve时提示 Please add the following to your Gemfile to avoid polling for changes: gem 'wdm', '>= 0.1.0' if Gem.win_platform?

解决方法:
安装wdm:gem install wdm

本地运行

把问题一个个突破后,运行jekyll serve你将拥有一个本地的网站啦,访问:http://127.0.0.1:4000
默认端口号4000
也可以运行jekyll serve --watch,可监听修改内容

jekll模板

搭建网站最快的方法是用别人的模板,我用的黄玄的.
模板下载地址:https://github.com/Huxpro/hux...

jekyll模板与github pages关联

到这儿我们有两个地址,一个是本地的http://127.0.0.1:4000,
另一个是远程地址helloPigger.github.io
这两个地址如何关联起来?
其实很简单,只需要两步.

1. 仓库文件clone到本地

我用的github desktop工具,不用写命令,而且不容易出错.
clone到本地的zwjBlog

2. 使用jekyll模板

删除zwjBlog文件夹下所有文件(.git文件需保留),
将下载的模板文件夹下的内容拷贝到zwjBlog中.
然后直接push到远程仓库.
我的出现了报错:

解决方法,安装jekyll-paginate: gem install jekyll-paginate

push代码后重新访问helloPigger.github.io ,模板内容出现了!
但是, 排版样式没有.
解决方法: 修改配置文件config.yml下的baseurl
我的目录结构是: zwjBlog> _config.yml
因此baseurl: "/zwjBlog"
其它的修改项都可以百度google到.

绑定个人域名

第一步: 购买域名,我在阿里云买的
第二步: 添加域名解析

1. ping博客地址(我的地址为heloPigger.github.io),得到一个ip,用作我们要绑定的域名的A记录，

添加A记录到185.199.110.153
添加cname记录到博客地址 heloPigger.github.io

参考地址:https://blog.csdn.net/u012782...
然后修改模板中的cname为自己的域名:hightop.top (注: 没有http)
修改config.yml文件,必须修改的字段:

url: "https://hightop.top"  
ga_domain: hightop.top

将最新代码上传到远程,此时远程博客地址修改为: http://hightop.top/ , 域名绑定成功.
至此,网站搭建完成,在_post文件下开始写自己的博客吧.