1. 程式人生 > >使用github和jekyll搭建個人免費託管部落格

使用github和jekyll搭建個人免費託管部落格

其實部落格四月初的時候就建好了,當時自己是在vps上面使用LAMP配合WordPress來建的,後來由於種種原因,我把部落格遷到了github重新開始。
好了,廢話不多說,正題開始:

關於github的配置

準備工作:在github申請一個賬號,然後建立一個名為<使用者名稱>.github.io的倉庫,比如我的使用者名稱是ghccc,那麼我的倉庫名字就是ghccc.github.io

首先,下載配置git,我用的ubuntu16.04系統,所以在終端中鍵入:

sudo apt-get install git

開始安裝,如果安裝過程提示缺少某些依賴包,按照提示一個個安裝即可,其他系統請參考

官網說明
安裝完git之後在本地建立一個名字和你剛剛建立的倉庫名字一樣的資料夾,比如我剛剛建立的倉庫名為ghccc.github.io,本地資料夾名字也就是ghccc.github.io,然後用git初始化此目錄,並新增遠端倉庫。

在ubuntu16.04命令列模式下操作為:

mkdir ghccc.github.io
cd ghccc.github.io
git init
git remote add [email protected]:uesrname/username.github.io.git

為了以後推送方便設定ssh,配置請參考如何建立git公鑰


git相關配置已經完成,接下來就是正式的搭建部落格。

首先簡單說明一下jekyll是什麼

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

jekyll的基本目錄結構

├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site
├── .jekyll-metadata
└── index.html

簡單介紹一下他們的作用:

_config.yml
儲存配置資料

_drafts
儲存未釋出的草稿

_includes
可以用來存放一些小的可複用的模組,方便通過{ % include file.ext %}(去掉前兩個{中或者{與%中的空格,下同)靈活的呼叫。

_layouts
layouts(佈局)是包裹在文章外部的模板。佈局可以在 YAML 頭資訊中根據不同文章進行選擇。

_posts
文章存放位置

_site
這個是Jekyll生成的最終的文件,不用去關心。最好把他放在你的.gitignore檔案中。

.jekyll-metadata
該檔案幫助 Jekyll 跟蹤哪些檔案從上次建立站點開始到現在沒有被修改,哪些檔案需要在下一次站點建立時重新生成。最好把它加入.gitignore檔案中。

index.html
如果這些檔案中包含 YAML 頭資訊 部分,Jekyll 就會自動將它們進行轉換。

jekyll的配置

jekyll的配置寫在_config.yml中,具體配置有很多,在此放出我的配置,更詳細的內容請參考jekyll的官方配置文件

title: 善惡彼岸
subtitle: 個人世界
description: 歡迎來到我的世界~
avatarTitle: ghccc
avatarDesc: 折騰/作死
url: “www.ghccc.tk”
comment:
social:
weibo:
github: ghccc
twitter:
mail:
baidu:
id: 89149bc63ddd0fbda82902ae936b8a22
id: UA-98133145-1
host: auto
permalink: /:year/:month/:title/
highlighter: rouge
textColor: #FF000
cover_color: clear
blog_button:
title: 部落格主頁
nav:
- {title: 所有文章, description: archive, url: ‘/archive’}
- {title: 標籤, description: tags, url: ‘/tags’}
- {title: 關於我, description: about, url: ‘/about’}
gems: [jekyll-paginate]
paginate: 20
paginate_path: “page/:num/”

如果不想自己配置模板怎麼辦

可以去這裡尋找自己中意的模板,或者你也可以直接fork我的模板,然後把原始碼下載下來稍加修改之後放到剛才建立的本地目錄裡面。

如何修改

1.修改配置檔案
首先開啟
_config.yml檔案,修改如下選項:

  • titile:你的部落格標題
  • subtitle:你的部落格子標題
  • description:你的部落格描述
  • avatarTitle:你的頭像裡的標題
  • avatarDesc:你的頭像描述
  • url:改成你的域名
  • comment裡的duoshuo:改成你的多說的使用者名稱
  • social裡面的
  • weibo:你的微薄id(不是使用者暱稱)
  • github:你的github使用者名稱
  • mail:你的郵箱
    其他的可以補充,沒有的可以不寫,將原文中的刪除即可
  • baidu: id:你的百度統計的id
  • ga: id:你的Google Analytics的id

2.修改個人介紹檔案
about.md

在裡面寫上一段自我介紹就好

3.頭像

開啟images資料夾,將你自己的頭像檔案改名為
avatar.jpg

4.網站圖示

如果你想使用自己的個性網站圖示,同樣的將你的圖示圖片放在該資料夾,並重命名為favicon.png

5.部落格文章

開啟
_posts資料夾,將其清空,然後把自己寫的文章放進去。
這裡面,你在新建部落格時必須包含前6行的內容,其中title後寫部落格標題,date後時間(但格式要保持一致),tag後寫標籤。後面的內容則是markdown語法的內容。 將上述檔案儲存,命名為:2016-08-04-MyFirstBlog.md即可。

推送到遠端倉庫:

cd username.github.io
git add remote username.github.io
git add -A
git commit -m “build blog”
git push

注:這裡的“username”指你的github使用者名稱

這樣部落格就被部署在github上了,過十分鐘左右就可以通過ghcc.github.io進行訪問。

關於自定義域名

我用的是.tk的免費域名ghccc.tk,申請完域名之後記得在nameserver裡面新增幾條A記錄,然後在github的倉庫設定頁面github pages欄目下面可以直接填入你剛剛申請的域名。
ps:使用github提供的域名可以使用github pages自帶的強制https加密選項,如果是自定義域名只能自己安裝ssl加密證書。

評論和統計

雖然多說很好用,但是六月一號就要關閉了,所以只好遷移到網易雲跟帖,jekyll評論程式碼接入請看官方文件
五月一號修改:評論系統換成了disqus,因為被牆,所以你們懂的……
用的是百度統計Google analytics,接入方式很簡單,獲取統計id,然後在_config.yml中填入id即可。

小綠鎖

我用的是cloudflare的ssl加密,目前看來還比較穩定,登入之後照著官方指導配置就好。

圖床

打算用七牛雲當做圖床,目前還未配置,待補充。

國內映象

因為github禁止百度爬蟲進入,所以網站內容無法被百度收錄,初步打算在coding上建立一個映象站點,然後使用DNSPOD,將國內使用者解析到coding上,國外使用者解析到github上。(注:此方法試了兩天一直未成功,暫時放棄)