使用Jekyll搭建免費的Github Pages個人博客

一、Git

1、Git概述

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git是一個開源的分布式版本控制系統,可以快速、高效地處理不同規模的項目。
廖雪峰的Git教程

2、Git安裝

如果是在windows環境下,不建議安裝和配置Cygwin這樣的模擬環境,推薦使用msysgit。
msysgit下載地址

3、Git配置

安裝成功之后,還需要做一些配置,設置用戶名和郵箱地址:

$ git config --global user.name USER_NAME
$ git config --global user.email EMAIL_ADDRESS

二、Github

1、Github概述

Github是一個免費的遠程倉庫,用來進行代碼托管。同時,還是一個開源協作社區。因為只支持Git作為唯一的版本庫格式進行托管,所以稱為GitHub。
Github官網主頁

2、Github設置

  • 注冊Github賬號

  • 打開Git Bash,在用戶主目錄下,使用git配置的郵箱地址創建SSH Key

    $ ssh-keygen -t rsa -C EMAIL_ADDRESS

  • 登錄GitHub,進入【Settings】頁面

  • 選擇【SSH and GPG keys】,點擊【New SSH Key】

  • 在Key文本框里粘貼創建SSH Key時生成的id_rsa.pub文件的內容,點擊【Add SSH key】

3、創建遠程倉庫

  • 在Github主頁,點擊【New repository】
  • 輸入倉庫名稱Blogs,點擊【Create repository】
  • 進入新建的倉庫,選擇【Settings】
  • 在【GitHub Pages】組中,點擊【Launch automatic page generator】
  • 編輯標題和描述,選擇主題,點擊【Publish page】
  • 生成博客主頁

三、Github Pages

1、Github Pages概述

Github Pages提供了一個免費的網頁,用來介紹托管在Github上的項目。
Github Pages官網主頁

2、Github Pages使用

由于Github Pages提供免費(300M)、穩定的空間,所以很適合用來創建個人博客。雖然可以使用html來編輯博客,但是顯然這樣做的工作量比較大,并且博客越復雜就越難維護。慶幸的是,可以通過模板引擎快速創建靜態博客。鑒于Github Pages官網推薦了Jekyll模板引擎,下面就介紹如何使用Jekyll來創建博客。

四、Jekyll模板引擎

1、Jekyll概述

Jekyll是一個靜態站點生成工具,不需要數據庫的支持,通過markdown編寫靜態文件,生成html頁面,并且可以先在本地查看效果,滿意之后再提交到Github上,最終在博客主頁上看到結果。
Jekyll官網主頁

2、Jekyll安裝

由于Jekyll是基于Ruby開發的,所以,要想在本地構建一個Jekyll的測試環境,需要具有Ruby的開發和運行環境。下載與本地環境相符的Ruby和RubyDevKit。
RubyInstaller

  • 安裝Ruby

很簡單的Windows安裝程序,不再贅述。

  • 安裝RubyDevKit

Ruby開發包是一個壓縮文件,解壓并進入解壓縮的目錄,執行命令:

$ ruby dk.rb init

生成一個config.yml配置文件,記錄了系統安裝ruby的位置。

初始化成功之后,開始安裝:

$ ruby dk.rb install
  • 安裝并啟動Jekyll

在安裝之前,由于眾所周知的原因,需要修改一下安裝源。

刪除默認安裝源:

$ gem sources --remove https://rubygems.org/

添加新的安裝源:

$ gem sources -a http://gems.ruby-china.org/

確認安裝源:

$ gem source -l

開始安裝:

$ gem install jekyll

安裝成功之后,創建本地博客站點,站點名與遠程倉庫名相同:

$ jekyll new Blogs

進入新建的Blogs目錄,啟動jekyll服務:

$ jekyll serve

Jekyll服務的默認端口是4000。服務成功啟動后,訪問http://localhost:4000 就可以看到默認的站點主頁。

3、工作目錄

在新建的Blogs目錄下有如下的主要文件和文件夾:

  • _posts文件夾,文章默認的存放位置
  • _site文件夾,默認的轉化結果存放位置
  • .gitignore文件,git將忽略該文件中列出的文件或文件夾
  • _config.yml文件,jekyll模板引擎的配置文件,修改之后需要重啟服務
  • index.md文件,默認的主頁

為了能夠更好的使用模板引擎,可以添加如下文件夾(可選):

  • _includes文件夾,存放在模板中可以引用的文件
  • _layouts文件夾,存放模板文件
  • images文件夾,存放資源文件

4、關聯倉庫

打開Git Bash,進入工作目錄Blogs,初始化本地倉庫:

$ git init

創建一個沒有父節點的分支gh-pages,并切換到這個分支上:

$ git checkout --orphan gh-pages

為遠程倉庫在本地添加一個origin引用:

$ git remote add origin https://github.com/username/Blogs.git

將遠程倉庫中的文件拖到本地:

$ git pull origin gh-pages

刪除遠程倉庫中的文件:

$ git rm <filename>

5、編輯文章

在工作目錄下的_posts文件夾中,創建并編輯文章,文件名必須是YYYY-MM-DD-title格式。

文章可以包含如下的頭信息:

---
layout: post
title:  "使用Jekyll搭建免費的Github Pages個人博客"
categories: jekyll update
---

其中,layout表示使用_layouts目錄下的post布局文件。title表示文章的標題。categories是文章生成的html文件存放的目錄,多級目錄用空格分隔。

文章編輯完成并保存之后,刷新站點主頁查看編輯之后的效果。

6、上傳本地文件

在經過本地檢驗,確認沒有問題之后,就可以將本地創建的文章上傳到遠程倉庫。

將當前的改動添加到暫存區:

$ git add .

將暫存區的內容提交到本地倉庫,并添加本次提交的備注:

$ git commit -m "post blogs"

將本地倉庫的內容推送到遠程倉庫的gh-pages分支:

$ git push origin gh-pages

這樣,再次訪問博客主頁就會看到新生成的內容了。

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

推薦閱讀更多精彩內容