使用GitHub搭建本身的Blog

寫在前面的廢話

這是我剛搭好的博客，能夠看看樣子 zander2014.github.io/

你們好，我是一個小馬農，相信你們在打開我這華麗的博客時，就已經火燒眉毛的想問"哥，這是怎麼弄的，太炫了，花了多少錢？我也想整一個。"

別急嘛大兄弟，今天你既然來了，哥也知道你的心思，這就慢慢的給你道來，這個炫酷的blog不花一分錢，動動手指，你就擁有。

關於Github Pages

就是這個啦，Github Pages，咱們用它提供的服務來搭建本身的博客，它就至關於一個免費的服務器。

• 好處：

  徹底免費、不須要維護、隨意DIY主題，默認Https，可綁定本身的域名，總之簡單的操做以後，你只管寫你的文章就好。

• 限制：

  倉庫（也就是你的網站）不要超過1G，不要頻繁提交更新（<=10次/小時），每月帶寬上限100G。總之做爲一個小型我的博客來講徹底夠用，若是不夠用，那麼恭喜你已經小有成就，花點錢本身搭建的服務也是小case了。

關於Jekyll

有了服務器，咱們用什麼來寫本身的blog界面呢？之前用過WordPress或者其餘前端框架的都知道，要有一個框架來寫，要否則本身純手工造輪子有多麻煩。

噹噹噹當！Jekyll就是這樣一個框架啦，能夠去官網(中文/English)自行學習如何搭建環境、建立網站、尋找模板資源等等。

• 好處：

  Github Pages原生支持的框架，生成的是純靜態網站，上手簡單，出問題會少一點，解決問題也會快一點。除了官網的資源外，還能夠在Github上找到不少開源的模板（怎麼找？固然是搜關鍵字找啦！每一個人的口味都不同，我就不舉例子了）。

• 限制：

  其實也沒什麼限制，就是官網的模板說實話，風格偏國外風，想挑出幾個能接受的還真很少，固然咱們也能夠選擇其餘靜態模板框架，好比Hexo、Hugo、Pelican、Gridea，使用方法能夠參考官方的，也能夠本身搜一些博客學學，再或者找一些H5模板也能夠。

關於NexT

NexT，就是我這個網站選擇的一個Jekyll的模板，它以前有hexo的版本，後來改寫了Jekyll的版本，這個模板的風格相信你們如今已經看到了，話很少說，想本身搭建的就去官方教程看看，剩下的人，跟我走。

開始搭建Blog

登陸github

什麼？你尚未這個大型同性交友網站的帳號？沒有註冊過的同窗抓緊去官網註冊，並登陸。

有關注冊時相關信息的填寫，以及登陸後我的信息的補全，就不一一介紹了，相信天天上網的大家，都開始要搭建本身的博客了，這些流程已經爛熟於心了。

新建Repository

1. 選擇New repository

   頁面右上角有個"+"號，點擊後在彈窗中選擇New repository

   

2. 填寫Repository name

   

   **注意：**填寫1處的Repository name，格式爲xxx.github.io，xxx就是你的用戶名，好比個人就是Zander2014.github.io，xxx必須和你的用戶名匹配，也就是說，一個帳戶只能在Github上建立一個blog倉庫。

   而後點擊2處的Create repository按鈕，倉庫就建立成功了。

進入Setting設置GitHub Pages

1. 不出意外的話，界面會自動跳到你的倉庫首頁，此時選擇Setting界面。

   

2. 而後往下翻，會看到GitHub Pages，點擊Choose a theme

   

3. 進入主題界面，選擇一個本身喜歡的主題（其實沒幾個主題，相信你都不會喜歡，先隨便選一個看的過去的吧一，後面再替換本身喜歡的模板），點擊Select Theme

   

4. 隨後跳轉到一個界面，而後往下翻，點擊Commit changes

   

查看Blog

到此你的網站就搭建好了，直接訪問你以前填寫的地址就行了，好比個人zander2014.github.io

而後在本身的Github->Code界面寫本身的文章就行了

此處只是一個講解的例子，便於理解github上文件是什麼回事，能夠跳過

1. 好比我點擊Add file，這裏能夠選擇直接建立(Create new file)或者上傳文件(upload files)，我選擇直接建立一個，會跳到一個編輯界面，

   

2. 而後隨便寫點東西，起名test.html，文件內容支持markdown文件格式（md規則須要本身學習一下，也能夠下相關軟件，操做更方便），點擊頁面下面Commit new file按鈕，回到首頁，看見多了一個test.html的文件

   

3. 此時咱們在瀏覽器訪問zander2014.github.io/test.html

   

大概知道是什麼意思了吧，GitHub->Code界面，就是你Zander2014.github.io的根地址，默認會訪問index.md，剩下的就是你怎麼建立文件的目錄結構，怎麼訪問就行了。

網站同步

手動建立上傳文件，咱們會懷疑人生的，並且還沒辦法控制版本，因此咱們須要藉助版本控制工具去管理，其實就是用Git，對Git不熟的同窗快去官網，或者大神的網站去學習。

那麼操做方式也有兩種：

• 命令行（須要先安裝好git環境，而後在終端使用git命令，大神通常都用這個）
• 客戶端（也就是圖形界面的方式管理命令，小白通常都用這個）

命令行方式

1. 打開Terminal(終端)，進入你本身想存放網站的目錄（好比我就在個人用戶主目錄）

2. 新建一個目錄，用來存放個人網站倉庫（好比我建立一個blog），進入blog目錄

   

3. 克隆個人網站倉庫到blog目錄 點擊Code按鈕，彈框中2處，能夠切換使用https仍是ssh的方式，而後點擊3處的圖標複製地址。

   

   由於ssh涉及到建立密鑰和添加密鑰的一些步驟，咱們就使用https的地址，使用簡單，git clone https://github.com/Zander2014/Zander2014.github.io.git

   

4. 在咱們克隆好的目錄中，咱們能夠建立文件，提交文件等等，主要用到的命令無非就是下面幾個：

   git add（添加文件到本地倉庫）

   git commit（提交文件到本地倉庫）

   git push（推送本地倉庫文件到遠程倉庫，也就是傳到github上）

   git pull（從遠程倉庫拉取文件到本地倉庫）

客戶端方式

官方客戶端 https://desktop.github.com/

其餘客戶端，好比[Sourcetree](https://confluence.atlassian.com/get-started-with-sourcetree/)等。

這些客戶端都有圖形界面，有入門教程，很簡單，照着學一學就會了。
複製代碼

安裝NexT

1. 確保已安裝Ruby 2.1.0 或更高版本：

   $ ruby --version
   複製代碼

   若是沒安裝過，使用homebrew去安裝，執行brew install ruby

   若是homebrew安裝很慢的話，多是資源的問題，使用鏡像資源會快不少，使用方法

2. 安裝Bundler：

   $ gem install bundler
   複製代碼

   若是報錯

   ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

   這是權限問題，咱們能夠直接在命令前加sudo，sudo gem install bundler

3. 下載 NexT 主題：

   $ git clone https://github.com/Simpleyyt/jekyll-theme-next.git
   //能夠用命令clone到本地，也能夠直接下載項目
   複製代碼

   由於咱們已經建立好了本身的倉庫，因此咱們把下載好的NexT資源，所有拷貝到咱們的倉庫目錄中去，拷貝到同級，會覆蓋以前的一個_config.yml文件，選擇替換，也就是像下面這樣，

   

   而後進入咱們的倉庫目錄

   $ cd Zander2014.github.io
   複製代碼

4. 安裝依賴：

   $ bundle install
   複製代碼

5. 運行 Jekyll：

   $ bundle exec jekyll server
   複製代碼

此時便可使用瀏覽器訪問 http://localhost:4000，檢查站點是否正確運行。

以後把代碼提交到遠程GitHub倉庫，就能夠在瀏覽器輸入zander2014.github.io看見了

若是須要使用其餘模板的話，每一個資源都有他們的使用方法，具體參考模板的教程就能夠了，大體流程同樣，下載資源、替換資源、運行就行了

寫Blog

如今你只須要找一個趁手的 Markdown 編輯器：Typora、熊掌記、印象筆記、zen、有道雲筆記、Ulysses。

在電腦上編輯你的文章，而後放到倉庫項目中的 _posts 文件夾裏，並使用前面提到的兩種方式將文章同步到 GitHub 上便可。

注意：

• **文件格式：**年-月-日-標題.markdown

• 文章內容頂部：必須有下面的 YAML 頭信息：

  ---
  layout: post
  title: Blogging Like a Hacker
  ---
  複製代碼