教程序員使用Jekyll搭建漂亮的我的博客

時間  2020-06-17
標籤 程序員 使用 jekyll 搭建 漂亮 我的 博客 欄目 快樂工作 简体版
原文   原文鏈接

做者：小傅哥
博客：https://bugstack.cncss

沉澱、分享、成長，讓本身和他人都能有所收穫！😄

1、前言

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

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

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

2、版本

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（紅寶石）命名。
序號 官網 描述
1 https://rubyinstaller.org/downloads/ Ruby官網下載
2 https://gems.ruby-china.com/ 完整 RubyGems 鏡像China
3 http://www.ruby-lang.org/zh_cn/documentation/ Ruby 編程文檔
4 http://jekyllthemes.org/ jekyll 模版
5 https://www.jekyll.com.cn/docs/ 快速入門手冊

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

3、安裝

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]

4、配置

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

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 的軟件。 ruby

命令 1

命令 2

命令 3

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

5、安裝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

6、建立博客

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，也能夠控制後臺運行，具體能夠看到 10、助記指令

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

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

好！接下來就是咱們的重點內容了，雖然默認模版也不難看，但終究不是咱們的博客。在這裏個人目標是將我的博客進行本地編譯運行。若是你有喜歡的模版或者是官網，或者是別人個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/

image

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

8、手動發佈

若是部署到服務端，那麼咱們編譯后里面的連接地址都確定以咱們的域名開始，例如；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的方式進行部署便可。以下；

9、自動發佈

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

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

這種方式目前我尚未錢和時間去折騰，等後面個人博客訪問量和內容更大了之後在投入經歷去搞！

10、助記指令

序號 指令 說明
1 ruby -v 查看Ruby版本
2 gem update 更新
3 gem -v 查看Gem版本
4 gem install jekyll 安裝jekyll
5 gem install bundler 下載bundler
6 gem install jekyll-paginate 下載jeky-paginate
7 git clone git@github.com:xiaofuge/xiaofuge.github.io.git 克隆主題(cd到xiaofuge.github.io，執行jekyll serve 能夠在http://localhost:4000看到效果)
8 gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ 更換源https://gems.ruby-china.com
9 jekyll new myblog 初始化默認博客
10 bundle install 進入博客文件夾執行初始化
11 jekyll build 本地編譯默認全部連接爲http://localhost
13 jekyll build --source <source> --destination <destination> 編譯指定的文件夾，同時能夠設定到指定的地方
12 jekyll build --destination 編譯到指定地方
14 jekyll build --watch 編譯後好自動監聽文件變化 自動編譯
15 bundle exec jekyll build 您只需構建您的站點(而不是在本地提供),而後您能夠將生成的文件上傳到您的服務器（這將生成與_config.yml中配置變量url的值的規範連接）
16 jekyll clean 清空編譯_site
17 jekyll serve 本地啓動服務
18 jekyll serve --host 0.0.0.0 --port 80 指定ip和端口啓動
19 nohup jekyll serve & 後臺運行
20 ps -axu grep jekyll 運行關閉
21 kill -9 [pid] 殺死進程

11、總結

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

推薦閱讀

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程