作者：小傅哥
博客：https://bugstack.cn

沉澱、分享、成長，讓自己和他人都能有所收穫！?

一、前言

萬萬沒想到！Github 竟然受到攻擊了！還能讓我使用了 GitPage 的博客癱瘓了！

整個網站一下不能訪問了，還是有點慌的，畢竟在這之前沒有考慮到還能有這事。但雖然沒有一個準備好了的預案，但也還是可以使用自己技術把這事搞定，儘快恢復。為了可以儘快恢復博客的訪問，我把網站遷移到了 碼雲 的Gitpage服務，並開啓免費一個月使用（挺香）,並迅速搞定配置以及 HTTPS。嗯！遷移過來速度還比之前快了。但是後來發現有些網絡環境下竟然不能訪問，這又讓我感覺不爽了，否則我都快要交錢給 碼雲 (一年90元)。到 碼雲 官網羣問使用這個搭建博客，百度收錄嗎？也沒有人迴應。如果不收錄我沒必要用了就，是吧。錢花了，事沒辦！ 不過也還好有 Gitee，否則網站不能那麼快恢復，如果按照下面的方式搞，至少 24 小時才能完事。

接下來就是將網站遷移到我自己買的服務器上，雖然過程比較坎坷，但終究還是滿足了我的需求。提升了網站速度、體驗，也可以讓網站被百度爬蟲收錄。如果也有小夥伴遇到這樣問題或者想建博客，可以按照我下面的步驟，進行安裝 Jekyll 部署博客。

二、版本

Ruby，一種簡單快捷的面向對象（面向對象程序設計）腳本語言，在20世紀90年代由日本人松本行弘(Yukihiro Matsumoto)開發，遵守GPL協議和Ruby License。它的靈感與特性來自於 Perl、Smalltalk、Eiffel、Ada以及 Lisp 語言。由 Ruby 語言本身還發展出了JRuby（Java平台）、IronRuby（.NET平台）等其他平台的 Ruby 語言替代品。Ruby的作者於1993年2月24日開始編寫Ruby，直至1995年12月才正式公開發佈於fj（新聞組）。因為Perl發音與6月誕生石pearl（珍珠）相同，因此Ruby以7月誕生石ruby（紅寶石）命名。

Ruby 的版本比較多，安裝方式也分為整體安裝和分開安裝(Ruby + devkit)，而這些也是最容易出錯的地方。有時候安裝完了和自己的不博客版本對不上，而導致報錯不能編譯。目前經過測試此版本Ruby+Devkit 2.5.7-1 (x64)比較適合 Jekyll博客的編譯部署。如果你在官網下載速度較慢，可以添加公眾號：bugstack蟲洞棧，回覆郵箱。

三、安裝

Ruby+Devkit 2.5.7-1，完整包的安裝過程比較簡單，但需要注意以下幾點；

1. 安裝路徑不要有空格，中文等特殊符號
2. 安裝中的選項內容按照下圖執行
3. 安裝完後需要更換數據源，這些內容會在下文具體執行總展示

1. 雙擊打開軟件(rubyinstaller-devkit-2.5.7-1-x64)

2. 設置路徑和選項

• 注意！千萬不要把路徑設置有空格、中文、特殊符號
• 注意！前兩個是必選項，第三個可以不選

3. 繼續執行直到完成

點擊下一步即可，不需要更改配置

初步安裝成功，點擊 Finsh

按照到這我們的軟件就已經安裝完成了，此時你已經可以執行命令查看版本了。

Microsoft Windows [版本 6.1.7601]
版權所有 (c) 2009 Microsoft Corporation。保留所有權利。

C:\Users\xiaofuge>ruby -v
ruby 2.5.7p206 (2019-10-01 revision 67816) [x64-mingw32]

四、配置

在安裝完成之後還需要執行一系列配置，才能讓軟件正常工作。並且不注意英文提示的小夥伴，可能你的一個回車就把剛安裝好的軟件卸載了！

1. 更換源

更新 Gem

C:\Users\xiaofuge>gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.7.7.gem (100%)
Successfully installed rubygems-update-2.7.7
...

查看版本

C:\Users\xiaofuge>gem -v
2.7.7

替換源，否則你會下載的很慢

C:\Users\xiaofuge>gem sources --add https://gems.ruby-china.com/ --remove http
s://rubygems.org/
source https://gems.ruby-china.com/ already present in the cache
source https://rubygems.org/ not present in cache

查看新的源

C:\Users\xiaofuge>gem sources -l
*** CURRENT SOURCES ***

https://gems.ruby-china.com

2. 基礎的安裝和配置

接下來的步驟就比較簡單了，但整體的過程比較耗時，黑窗口會在我們執行命令後下載大約 600M 的軟件。

命令 1

命令 2

命令 3

好！當你順利安裝到此後，你的軟件就已經安裝完成，可以使用了！

五、安裝Jekyll

Ruby軟件已經安裝完成，接下來就是我們的博客的相關內容的安裝了。

檢查版本並安裝

E:\>gem -v
2.7.7

E:\>gem install jekyll
Fetching: public_suffix-4.0.3.gem (100%)
Successfully installed public_suffix-4.0.3
Fetching: addressable-2.7.0.gem (100%)
Successfully installed addressable-2.7.0
Fetching: colorator-1.1.0.gem (100%)
Successfully installed colorator-1.1.0
...
ass-converter, rb-fsevent, rb-inotify, listen, jekyll-watch, kramdown, kramdown-
parser-gfm, liquid, mercenary, forwardable-extended, pathutil, rouge, safe_yaml,
 unicode-display_width, terminal-table, jekyll after 33 seconds
26 gems installed

查看安裝的Jekyll版本

E:\>jekyll -v
jekyll 4.0.0

六、創建博客

Jekyll 給我們提供了創建博客的命令，你只需要選擇好自己文件夾地址，進入執行即可。

1. 進入本地站點

C:\Users\xiaofuge>E:

E:\>cd E:\itstack

2. 創建博客

E:\>jekyll new myblog
Running bundle install in E:/myblog...
  Bundler: Fetching source index from https://rubygems.org/
  Bundler: Resolving dependencies.............
  Bundler: Using public_suffix 4.0.3
  Bundler: Using addressable 2.7.0
  ...
  New jekyll site installed in E:/myblog.
E:\>cd myblog

3. 編譯博客

這裏執行的編譯是默認本地編譯，也就是編譯後文中都是 localhost:4000地址開頭，不要把這回內容傳到服務端。

E:\myblog>jekyll build
Configuration file: E:/myblog/_config.yml
            Source: E:/myblog
       Destination: E:/myblog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 1.184 seconds.
 Auto-regeneration: disabled. Use --watch to enable.

• 編譯好後看到一個 _site 的文件夾，這裏就是我們的靜態博客內容。

4. 運行預覽

如果在本地我們沒編譯而是執行運行預覽也是可以的，他會自動進行編譯。

E:\myblog>jekyll s
Configuration file: E:/myblog/_config.yml
            Source: E:/myblog
       Destination: E:/myblog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 0.847 seconds.
 Auto-regeneration: enabled for 'E:/myblog'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

• 這裏可以指定端口和IP，也可以控制後台運行，具體可以看到 十、助記指令

5. 運行效果

• 具體如何使用Jekyll編寫博客，可以參考官網文檔

博客結構

├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2020-03-28-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

七、克隆博客(使用模版)

好！接下來就是我們的重點內容了，雖然默認模版也不難看，但終究不是我們的博客。在這裏我的目標是將個人博客進行本地編譯運行。如果你有喜歡的模版或者是官網，或者是別人個Github，可以下載到自己本地。

1. 下載bundler

E:\itstack\gitee.com\fuzhengwei.github.io>gem install bundler
Fetching: bundler-2.1.4.gem (100%)
bundler's executable "bundle" conflicts with D:/Ruby25-x64/bin/bundle
Overwrite the executable? [yN]  n
ERROR:  Error installing bundler:
        "bundle" from bundler conflicts with D:/Ruby25-x64/bin/bundle

2. 安裝環境

E:\itstack\gitee.com\fuzhengwei.github.io>bundle install
Fetching gem metadata from http://gems.ruby-china.com/..........
Using rake 12.3.0
Fetching concurrent-ruby 1.0.5
Installing concurrent-ruby 1.0.5
Fetching i18n 0.9.1
Installing i18n 0.9.1
Using minitest 5.10.3
Using thread_safe 0.3.6
Fetching tzinfo 1.2.4
Installing tzinfo 1.2.4
Fetching activesupport 4.2.10
...
lockfile (nokogiri (~> 1.6)).
Either installing with `--full-index` or running `bundle update

3. 更新bundle(按需執行)

E:\itstack\gitee.com\fuzhengwei.github.io>bundle update
Fetching gem metadata from http://gems.ruby-china.com/...........
Fetching gem metadata from http://gems.ruby-china.com/.
Resolving dependencies....
Fetching rake 13.0.1 (was 12.3.0)
...

4. 編譯

bundle exec jekyll build 

5. 運行

bundle exec jekyll s

http://localhost:4000/

• 可以看到我們已經很順利的運行並訪問了博客，效果還不錯。
• 這會雖然是本地運行，所以裏面的鏈接都是 http://localhost:4000/，不能用於服務端部署。

八、手動發佈

如果部署到服務端，那麼我們編譯后里面的鏈接地址都肯定以我們的域名開始，例如；https://bugstack.cn/。接下來我們開始執行服務端部署的編譯和使用。

1. 清空和重新構建

Microsoft Windows [版本 6.1.7601]
版權所有 (c) 2009 Microsoft Corporation。保留所有權利。

C:\Users\fuzhengwei>E:

E:\>cd E:\itstack\gitee.com\fuzhengwei.github.io

E:\itstack\gitee.com\fuzhengwei.github.io>bundle exec jekyll clean
Configuration file: E:/itstack/gitee.com/fuzhengwei.github.io/_config.yml
           Cleaner: Removing ./_site...
           Cleaner: Nothing to do for ./.jekyll-metadata.
           Cleaner: Removing ./.jekyll-cache...
           Cleaner: Nothing to do for .sass-cache.

E:\itstack\gitee.com\fuzhengwei.github.io>bundle exec jekyll build
Configuration file: E:/itstack/gitee.com/fuzhengwei.github.io/_config.yml
            Source: E:/itstack/gitee.com/fuzhengwei.github.io
       Destination: E:/itstack/gitee.com/fuzhengwei.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
   GitHub Metadata: No GitHub API authentication could be found. Some fields may
 be missing or have incorrect data.
                    done in 18.102 seconds.
 Auto-regeneration: disabled. Use --watch to enable.

E:\itstack\gitee.com\fuzhengwei.github.io>

• 在以上我們分別執行了清空(bundle exec jekyll clean)和構建(bundle exec jekyll build)，接下來看以看到文件下的 _site內容的生成。

2. 部署到遠程服務器

遠程服務器的部署主要依賴於大家個子使用的服務器類型，我的手裏有一台雲虛擬機，通過FTP的方式進行部署即可。如下；

• 部署以後我們在線網站就可以訪問了；https://bugstack.cn/

九、自動發佈

如果每次都是這樣去本地編譯在部署到服務端，代碼又得維護在 GitHub 還是比較麻煩的。可以使用；Github -> Travis CI -> Docker-> VPS。的方式進行部署，不過還得花點錢買服務器。

• 本地提交博客 Markdown 文件 到 Github 源文件 repository
• Github 觸發 Travis CI 執行自動編譯
• Travis CI 編譯後 push 靜態文件到 Github 靜態文件 repository
• Travis CI 通知 Docker 重建鏡像（預計 5 分鐘）
• 服務器休眠 5 分鐘後，Travis CI 通知服務器
• 服務器拉取最新鏡像，然後停止並刪除原容器，用最新鏡像重建容器

這種方式目前我還沒有錢和時間去折騰，等後面我的博客訪問量和內容更大了以後在投入經歷去搞！

十、助記指令

十一、總結

• 通過這次 GitHub 掛了，也徹底讓我的博客又得花錢維護了。不花點錢是真不行！以前我忍受了；速度、收錄、體驗，但是突然的一掛，啥都拜拜了。所以只能掛到自己的服務器上，還好價格也不貴！畢竟是一個只能支持 PHP、ASP的虛擬機。
• 從沒有那件事情是可以輕輕鬆鬆的，在 天災人禍 來臨的時候，能幫你抵擋的都是你日積月累的能力。就像；是時候展示真正的技術了！
• Jekyll 搭建的博客還是蠻好看的，也蠻容易維護的。技術人員還是要有自己的博客，通過不停的折騰從裏面不斷的獲取各個技術點的突破。

推薦閲讀

• 這麼折騰學習畢業進大廠不是問題
• 工作兩年簡歷寫的差教你優化
• 講一下我自己的學習路線，給你一些參考
• 基於Springboot的中間件開發，瞭解一下
• 重學 Java 設計模式：實戰享元模式「基於Redis秒殺，提供活動與庫存信息查詢場景」