天天看點
傳回

使用jekyll寫部落格一、安裝Ruby環境二、修改更新源三、安裝jekyll及其依賴四、建立部落格站點五、啟動本地服務預覽部落格六、配置部落格七、寫部落格八、可能出現的問題

一、安裝Ruby環境

從 https://rubyinstaller.org/downloads/ 下載下傳 Ruby2.X的最新安裝包，最好是帶DEVKIT的，不建議下載下傳3.X的，因為有些theme還不支援3.X的版本。

二、修改更新源

為了解決gem install以及bundle慢的問題，建議先更新源：

  1. 修改gem更新源 
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

確定更新源隻有 gems.ruby-china.com

  1. 設定bundle鏡像 
bundle config mirror.https://rubygems.org https://gems.ruby-china.com

三、安裝jekyll及其依賴

安裝好Ruby環境後，使用下面的指令安裝jekyll及其依賴

gem install jekyll bundle webrick

四、建立部落格站點

使用下面的指令建立一個blog站點

# jekyll new blog                                                                            
 Running bundle install in D:/myblogs/blog...                                                 
   Bundler: Fetching gem metadata from https://gems.ruby-china.com/...........                
   Bundler: Fetching gem metadata from https://gems.ruby-china.com/..                         
   Bundler: Resolving dependencies...                                                         
   Bundler: Using public_suffix 4.0.6                                                         
   Bundler: Using addressable 2.8.0                                                           
   Bundler: Using bundler 2.1.4                                                               
   Bundler: Using colorator 1.1.0                                                             
   Bundler: Using concurrent-ruby 1.1.9                                                       
   Bundler: Using eventmachine 1.2.7 (x64-mingw32)                                            
   Bundler: Using http_parser.rb 0.6.0                                                        
   Bundler: Using em-websocket 0.5.2                                                          
   Bundler: Using ffi 1.15.3 (x64-mingw32)                                                    
   Bundler: Using forwardable-extended 2.6.0                                                  
   Bundler: Using i18n 1.8.10                                                                 
   Bundler: Using sassc 2.4.0 (x64-mingw32)                                                   
   Bundler: Using jekyll-sass-converter 2.1.0                                                 
   Bundler: Using rb-fsevent 0.11.0                                                           
   Bundler: Using rb-inotify 0.10.1                                                           
   Bundler: Using listen 3.6.0                                                                
   Bundler: Using jekyll-watch 2.2.1                                                          
   Bundler: Fetching rexml 3.2.5                                                              
   Bundler: Installing rexml 3.2.5                                                            
   Bundler: Using kramdown 2.3.1                                                              
   Bundler: Using kramdown-parser-gfm 1.1.0                                                   
   Bundler: Using liquid 4.0.3                                                                
   Bundler: Using mercenary 0.4.0                                                             
   Bundler: Using pathutil 0.16.2                                                             
   Bundler: Using rouge 3.26.0                                                                
   Bundler: Using safe_yaml 1.0.5                                                             
   Bundler: Using unicode-display_width 1.7.0                                                 
   Bundler: Using terminal-table 2.0.0                                                        
   Bundler: Using jekyll 4.2.0                                                                
   Bundler: Fetching jekyll-feed 0.15.1                                                       
   Bundler: Installing jekyll-feed 0.15.1                                                     
   Bundler: Fetching jekyll-seo-tag 2.7.1                                                     
   Bundler: Installing jekyll-seo-tag 2.7.1                                                   
   Bundler: Fetching minima 2.5.1                                                             
   Bundler: Installing minima 2.5.1                                                           
   Bundler: Fetching thread_safe 0.3.6                                                        
   Bundler: Installing thread_safe 0.3.6                                                      
   Bundler: Fetching tzinfo 1.2.9                                                             
   Bundler: Installing tzinfo 1.2.9                                                           
   Bundler: Fetching tzinfo-data 1.2021.1                                                     
   Bundler: Installing tzinfo-data 1.2021.1                                                   
   Bundler: Fetching wdm 0.1.1                                                                
   Bundler: Installing wdm 0.1.1 with native extensions                                       
   Bundler: Bundle complete! 6 Gemfile dependencies, 35 gems now installed.                   
   Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.              
 New jekyll site installed in D:/myblogs/blog.

五、啟動本地服務預覽部落格 

# cd blog
# bundle
# jekyll s
Configuration file: D:/myblogs/blog/_config.yml
            Source: D:/myblogs/blog
       Destination: D:/myblogs/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 0.713 seconds.
 Auto-regeneration: enabled for 'D:/myblogs/blog'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

打開浏覽器，浏覽位址：http://127.0.0.1:4000/ 即可檢視到頁面了。

六、配置部落格

在站點目錄中有一個_config.yml檔案，有以下配置項：

  • title: 站點的标題
  • email: 電子郵件位址
  • description: 站點的描述資訊
  • baseurl: 站點子路徑，比如：/blog
  • url: 站點位址：比如：http://example.com
  • twitter_username: 推特賬号
  • github_username: github賬号
  • theme: 主題顔色
  • plugins: 插件

根據自身的情況進行配置，如果修改了theme，建議使用：

bundle

指令來進行打包安裝。

七、寫部落格

我們要寫部落格時需要寫在_posts目錄下，如果沒有則建立一個。

檔案名要求按：

年-月-日-标題.md

的形式命名，比如：2021-08-10-welcome-to-jekyll.md

在md檔案中要求前面有标注，格式：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2021-08-10 15:24:37 +0800
categories: jekyll update
---
  • layout 用于展示的排版類型
  • title 部落格的标題
  • date 部落格的寫作日期時間
  • categories 分類
  • tags 标簽

注意：

  1. layout需要與_config.yml檔案中配置主題中有的layout比對。
  2. categories以及tags中的命名不能包括一些特殊符号，比如C++的+号

可以通過在站點目錄使用如下指令檢視主題所在路徑：

D:\myblogs\blog>bundle info --path minima
D:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/minima-2.5.1

主題所在路徑D:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/minima-2.5.1中_layouts目錄下可以看到所有本主題可以使用的layout。

寫好後，可以通過第五步的方式檢視。

八、可能出現的問題

1. Windows下使用jekyll server本地預覽文章可能會出現not found的問題

Windows下使用jekyll server本地預覽文章可能會出現not found的問題，但是在_site檔案夾下這些檔案都存在，這應該是編碼問題導緻。

jekyll server使用的是webrick進行處理的，在D:\Ruby27-x64\lib\ruby\2.7.0\webrick\httpservlet下備份filehandler.rb，然後搜尋force_encoding，

把使用了該函數的變量都使用一次force_encoding(“UTF-8”)。筆者的webrick是1.7.0版本的，搜尋下來有兩處：

後面添加一句：

還有一處：

後面添加一句：

這樣使用：

jekyll s

進行本地預覽就不會出現找不到頁面的問題了。

2. 如果部落格内容中出現了特定辨別怎麼辦？

{% raw %}

jekyll使用的Liquid來進行解析的，比如Liquid規定以{{開始，以}}結束的字元串視作标簽Liquid，但如果部落格内容中恰好需要使用到這樣的符号對，卻不是Liquid标簽，産生了文法沖突怎麼處理？

需要在這樣的文字段前加上{% raw %}辨別，{% endraw %}在文字段後加上把辨別替換成endraw即可。

祝好！

雜記 jekyll github 部落格
上一篇: Jekyll搭建本地環境
下一篇: Web 應用中CSRF與XSS的關系與預防

繼續閱讀