基於GitHub Pages+Jekyll搭建我的博客

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

1、概述

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

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

2、搭建步驟

一、創建Github Pages站點

要求:本地安裝git,擁有我的的github帳號github

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

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

$ 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的頁面ruby

二、安裝配置jekyll

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

注意:全部安裝過程當中涉及到的目錄路徑最好不要出現空格服務器

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

(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」,最後成功了。

三、搭建項目

裝完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家的開發工具

四、項目相關配置文件

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

本文原文地址

相關文章
相關標籤/搜索