博客 / 詳情

返回

基於GitHub Pages+Jekyll搭建個人博客

看到很多大神們都有自己的個人網站,覺得很高大上,於是我就懷着巨強的好奇心去看各種教程和各種例子,總算了解其中的規則,然後就試着自己搭建了一個自己的網站,在折騰了兩三天後總算把自己的網站搞起來了,很不容易,下面我大致給大家介紹下我的搭建過程,但是具體我沒細講,每種環境的安裝百度都可以搜索到很詳細的教程,我只是在這給大家列舉過程中需要注意到的點。

一、概述

Jekyll 基於Ruby的靜態網頁生成系統,採用模板將Markdown(或Textile)文件轉換為統一的網頁

GitHub Pages 免費的靜態站點,三個特點:免費託管、自帶主題、支持自制頁面和Jekyll

二、搭建步驟

1、建立Github Pages站點

要求:本地安裝git,擁有個人的github賬號

首先,在你的github上建立一個以xxx.github.io為命名的代碼倉庫,其中xxx代表的是你的github賬號名,如我的賬號名是MealiaLin,則建立的是
mealialin.github.io,同時在底部Add .gitigore選擇Jekyll模板,這樣Jekyll產生的臨時文件,
例如_site目錄就不會添加到源代碼管理中,當然你也可以以後手動配置

建立完代碼倉庫後,將代碼倉庫克隆到本地

$ git clone https://github.com/xxx/xxx.github.io.git

然後在本地的代碼倉庫裏面創建一個測試頁面並推送到github的代碼倉庫

$ cd xxx.github.io
$ echo "Hello World" > index.html
$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master

推送完代碼後等一段時間,快的話幾分鐘,慢的話要二十分鐘或者半個小時吧,等github運行編譯你的代碼,
完了之後在瀏覽器輸入你的項目名稱:xxx.github.io,如果一切正常,你就能看到一個顯示Hello World的頁面

2、安裝配置jekyll

這一塊很麻煩,尤其是基於windows環境的,坑太多,不過這種東西,都是踩着坑過河,習慣了就好,其實整個過程很簡單,如果不算被坑的話半天就能
搭完整個環境和項目了,個人來説,我在這一步卡了一天多了,接下來跟大家講講的我步驟,千萬要記住,不要偷工減料,嚴格來做,哪一步裝錯了或者裝少了
什麼,建議卸了重頭再來,畢竟重做比補坑簡單多了

注意:所有安裝過程中涉及到的目錄路徑最好不要出現空格

(1)安裝ruby,根據相關教程,無腦點就行,但是有個注意點,安裝的路徑中,連同命名,不要出現空格!!!

(2)ruby安裝完,會出現有個選項,讓你安裝MSYS2這個東東,如果沒有勾選,後面自己打開cmd,輸入“ridk install”進行MSYS2的安裝,會出現然你選擇123,你選3就行。這個過程會下載很多安裝包什麼的,耐心等待,一定要耐心,要完整裝完才行,裝好會讓你再做一次123選擇,這個時候不需要選了,直接enter退出就行了。

(3)安裝DevKit,在官網下載DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe,然後點擊運行,同樣,安裝目錄不要出現空格,可以百度這個相關的安裝,還是比較簡單的

(4)然後安裝RubyGems,從官網下載壓縮包,解壓到你想要的目錄下,路徑不要有空格,然後cmd命令指到這個文件夾下面,輸入“ruby setup.rb”執行安裝,同樣也可百度

(5)安裝bundler,輸入“gem install bundler”執行安裝

(6)上面的安裝基本缺一不可,然後就可以安裝jekyll了,執行“gem install jekyll”,最後成功了。

3、搭建項目

裝完jekyll,項目代碼就好辦了,項目就可以在本地運行了。

(1)在你的本地代碼倉庫中,創建或使用模板,創建模板使用git bash輸入命令“jekyll new project-name”就行了,但是創建模板
極其簡陋,所以推薦大家使用第三方主題模板,找一個自己喜歡的主題放到你的本地代碼倉庫就行了。

(2)環境有了,模板也有了,接下來是本地運行代碼了。首先,有些模板需要依賴,所以在你的本地代碼倉庫目錄下使用cmd命令運行bundle install
命令安裝依賴包,有時候用這個命令不行,會出現缺什麼什麼的,可以使用“jekyll install xxx”來一個個安裝缺的東西。裝完以後運行
jekyll serve來啓動本地服務器,默認使用4000端口,如果需要更換端口,可以運行“jekyll serve -P $POST”指定其他的端口。

(3)啓動服務器了之後,在瀏覽器輸入:“127.0.0.1:4000”就可以進行本地預覽了,建議使用webstorm開發,本人超喜歡用ide家的開發工具

4、項目相關配置文件

jekyll項目的配置文件主要在於_config.yml裏面,模板的配置都會有相關介紹,根據你選的模板在裏面進行相應的信息修改就可以將模板轉化為你的東西了

本文原文地址

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.