Jekyll搭建Github寫作環境

通過搭建Jekyll+Github Pages為記錄思想、整理筆記和分享知識,并將其中承載的價值傳播給他人。

Jekyll 是一個簡單的博客形態的靜態站點生產機器。它有一個模版目錄,其中包含原始文本格式的文檔,通過一個轉換器(如 Markdown)和我們的 Liquid 渲染器轉化成一個完整的可發布的靜態網站,你可以發布在任何你喜愛的服務器上。Jekyll 也可以運行在 GitHub Page 上,也就是說,你可以使用 GitHub 的服務來搭建你的項目頁面、博客或者網站,而且是完全免費的。

Github Pages 是面向用戶、組織和項目開放的公共靜態頁面搭建托管服 務,站點可以被免費托管在 Github 上,你可以選擇使用 Github Pages 默 認提供的域名 github.io 或者自定義域名來發布站點。Github Pages 支持 自動利用 Jekyll 生成站點,也同樣支持純 HTML 文檔,將你的 Jekyll 站 點托管在 Github Pages 上是一個不錯的選擇。

  • 本地搭建Jekyll
  • 創建博客站點
  • 使用Github pages服務生成個人博客

本地搭建Jekyll

本次安裝可以Windows下進行。

1. Jekyll介紹

Jekyll是一個靜態站點生成器,它會根據網頁源碼生成靜態文件。它提供了模板、變量、插件等功能,可以用來生成整個網站。

Jekyll生成的站點,可以直接發布到github上面,這樣我們就有了一個免費的,無限流量的,有人維護的屬于我們的自己的web網站。Jekyll是基于Ruby的程序,可以通過gem來下載安裝。

Jekyll官方文檔:http://jekyllrb.com/

2. 安裝Ruby環境

Windows 用戶可以直接下載RubyInstaller: http://rubyinstaller.org/downloads/ 安裝 ruby 環境

安裝Ruby,再安裝RubyGems(Ruby2.3版本以上無須安裝)

ruby --version
gem update --system

3. 使用gem安裝Jekyll環境

建議使用 RubyGems 鏡像(https://gems.ruby-china.org/)安裝 jekyll。

(1)使用命令,安裝jekyll及所有需要的依賴,但不包括插件。

gem install jekyll

安裝jekyll的時候需要注意一下安裝版本問題。

(2)查看Jekyll是否安裝成功

jekyll -v

博客編寫、測試

1. 創建博客

切換到博客文件夾下,創建博客:

jekyll new blog  #創建你的站點

這樣就會創建一文件夾../blog,其結構如下:

  1. 文件夾_layouts:用于存放模板的文件夾,里面有兩個模板,default.html和post.html
  2. 文件夾_posts:用于存放博客文章的文件夾,里面有一篇markdown格式的文章--2016-01-27-welcome-to-jekyll.markdown
  3. 文件夾css:存放博客所用css的文件夾
  4. _coinfig.yml:jekyll的配置文件,里面可以定義相當多的配置參數,具體配置參數可以參照其官網
  5. index.html:項目的首頁

2. Jekyll基礎目錄結構

|-- _config.yml
|-- index.html
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- css
|-- js
|-- _posts
|   `-- 2015-04-27-Like-Kissing.md
|-- images
|   `-- Leah.png 
|-- CNAME
|-- _404.html
|-- About.md
|—— feed.xml
`-- README.md

目錄文檔詳細說明。如下:

_includes 博客調用的網頁模塊(比如導航欄、底欄、博文內容顯示、評論模塊等),一般不需要管;

_config.yml 博客配置文檔(包括博客標題、favicon、博主 ID、頭像、描述、聯系方式等基本信息都在這個文檔添加或修改);

index.html 博客架構文檔;

_layouts 存放博客調用的頁面模板文件(比如博客主頁、具體博文頁)的文件夾

 css 存放博客系統的頁面渲染文檔文件夾,主要用于調節諸如標題字體、博文字體大小顏色之類; js 存放博客調用的 JS 文檔文件夾

_posts 博客正文存放的文件夾。命名有規定,必須為「日期 + 標題」的模式,即「2015-04-27-Like-Kissing.md」,才能發布到博客里; 

images 圖片文件夾,存放博客相關素材,包括博客 favicon、博主頭像等圖片及博文貼圖素材; CNAME 用于綁定個人域名的文檔;

404.html 「404 Not Found.」站點鏈接無法訪問時的提示頁面。 About.html 博客中的個人說明文檔(About Me),以 html、md 格式為主; feed.xml 博客的 RSS 訂閱; README.md 項目說明文檔。用于 Github 個人項目主頁的說明(描述)。

除此之外,還有諸如 fonts 文件夾,存放博客用的字體文件,或有主題是將 css/js/fonts/images 等文件夾合并到 _assets 為名的主文件夾中。404.html/feed.xml/CNAME 文件并非必須,但一般架構完整的博客都有。

3. 開啟Jekyll服務

本地服務開啟后,Jekyll服務默認端口是4000,所以我打開瀏覽器,輸入:http://localhost:4000 即可查看效果

cd blog      #進入blog目錄,記得一定要進入創建的目錄,否則服務無法開啟
jekyll serve     #啟動你的http服務 

4. 調試

在博客文件夾下中

jekyll build --trace

將所有文章文件根據其模板進行編譯,生成結果,放在根目錄下的_site中


使用Github pages服務生成個人博客

1. 創建我們的倉庫

repository name設置為username.github.com,選擇Public倉庫類型!

2. 為倉庫創建Github Pages

創建倉庫后,選擇setting
點擊Launch automatic page generator,然后編輯下標題和描述,任意選擇一個模板,點擊Publish。

如此,可以通過瀏覽器輸入 http://username.github.io訪問博客主頁。

3. 將本地jekyll代碼部署到Github上的倉庫

前面已說明如何搭建Jekyll,我們可以在本地開發測試,推送代碼到倉庫,發布到線上

4. 克隆倉庫到本地

請確保本地安裝了git客戶端,克隆username.github.com倉庫到本地。

git clone https://github.com/username/username.github.com.git

此你會看見當前存在username.github.com這個目錄,啟動jekyll服務

cd username.github.com
jekyll serve -B

打開http://localhost:4000,即可看見本地創建主頁效果,理論上和http://username.github.com 訪問的應該是一模一樣的。

5. 拷貝本地的jekyll目錄到版本庫

刪除username.github.com下面的示例文件:

rm -rf _site index.html params.json  stylesheets

拷貝本地blog下的所有目錄及文件到username.github.com

cp -r blog/* username.github.com

重啟服務,看見本地jekyll的站點效果

6. 發布

git add --all              #添加到暫存區  
git commit -m "提交jekyll默認頁面" #提交到本地倉庫
git push origin master         #線上的站點是部署在master下面的

稍等10分鐘左右,Github Pages有一定時間緩存,我們刷新username.github.io看看,已經ok了!

參考鏈接:

  1. jekyllcn

  2. http://lingyu.wang/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容