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文件下開始寫本身的博客吧.