手把手教你在Github上建立自己的個人部落格網站

阿新 • • 發佈：2019-01-12

概述

之前閒著沒事,就利用Github建了一個個人部落格網站,效果還不錯,今天就來分享一下.
建立自己個人部落格網站的好處:
1.面試裝逼,這個不必多說…
2.把平時積累的知識和專案記錄下來,方便日後檢視使用
3.不受其他部落格平臺的限制

準備工作

開始之前,先大致介紹一下用到的技術和相關概念

Github是什麼:

GitHub是一個利用Git進行版本控制、專門用於存放軟體程式碼與內容的共享虛擬主機服務,很多人都把它稱作程式設計師的同性交友網站,具體為啥這麼叫我也不知道

GitHub Pages是什麼？

Github Pages設計的初衷是為託管在GitHub上的專案提供介紹頁面,開發者們可以通過GitHub Pages為他們的每一個專案建立一個用於介紹該專案的靜態網站,不過由於他的空間免費而且穩定,因此用它搭建一個個人部落格網站是再好不過了.

Git是什麼？

Git是一個開源的分散式版本控制系統,可以有效、高速的處理從很小到非常大的專案版本管理.它的作用
和Svn類似,就是一個版本控制的工具,用它可以將我們寫的程式碼提交到Github上.

Jekyll是什麼？

jekyll是一個簡單的免費的Blog生成工具,將純文字轉化為靜態網站和部落格;由於咱們的GitHub Pages生成的是靜態頁面,每次更新部落格都需要手動更改HTML,這就使得每次寫部落格都變得很麻煩,而用了這個工具以後,它會根據預先設定好的格式來生成部落格內容,你就無需關心html程式碼,只需要把重心放在部落格的寫作上.

Liquid是什麼?

Liquid是一種模板語言,可以在HTML頁面中使用它;而他的作用就是使用標記、物件和過濾器的組合來載入一些動態內容.

廢話不多說,下面來講講大致流程
1.登陸你的個Github賬號(註冊的話這裡就不講了…)
2.新建一個倉庫用來儲存個人網站專案
3.把做好的個人網站上傳到Github上
4.上傳成功後,根據域名來訪問你的主頁

入門案例-Hello Github

建立倉庫

先登陸你的Github賬號,沒有賬號的自己去註冊一個(註冊過程這裡就不講了),如下圖新建一個倉庫

Repository name就是你的倉庫名,這個倉庫名必須按圖中的格式來寫,到時候訪問的地址就是這個了,至於下面的Initialize this repository with a README這裡,想搞就搞一下,我這裡由於是演示就不弄了

配置

好了,經過上面的步驟咱們的Github倉庫就算是建好了,下面要來講講本地怎麼配置了;需要用到Git這個工具,請提前準備好.

一.建立一個本地倉庫

1.找一個目錄來作為你本地的倉庫,比如我的是”F:\Cloud”,那麼就在Cloud資料夾下初始化倉庫.

2.初始化倉庫的方式有兩種,一種是用git的圖形化介面來建立,另一種是用git命令來初始化,這裡我選用圖形化介面的方式來建立(極(lan)力(ren)推(bi)薦(bei));

3.來到Cloud目錄下右鍵選擇Git GUI Here–>選擇Create New Repository

二.配置SSH Key

1.還是用Gui的形式來建立,在help中選擇Show SSH key,點選Generate Key(期間啥都不用填,只需要下一步)來生成key

2.把生成的key填寫到Github中,在Settings的SSH and GPG keys那裡填,title隨便寫,主要是用來註明的,如圖

三.使用者配置

使用git命令的方式來配置,右鍵選擇Git Bash Here開啟命令視窗,作如下配置

git config –global user.name “你的Github使用者名稱”
git config –global user.email “你的Github郵箱地址”

上傳程式碼

一.寫程式碼(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1{
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>Hello Github</h1>   
</body>
</html>

二.提交程式碼到Github倉庫

1.在本地做一次提交(以命令列的方式)

git add .
git commit -m “This is the message describing the commit”新增commit資訊

2.把專案提交到Github上

git remote add origin 你的遠端倉庫地址([email protected]:MarcusKun/io.git)
注:在建立好Github倉庫後有兩個地址,一個是https的地址,另一個是SSH地址,也就是上面這個地址.
git push -u origin master(執行這個之前必須先在本地做一次提交操作)

這裡寫圖片描述

3.配置Github Pages
在自己倉庫那裡找到Settings,配置Github Pages,如下圖

4.通過Github Pages那裡給的地址訪問自己的網頁

進階使用-使用Jekyll來打造自己的個人部落格

概述

經過上面的步驟,相信大家已經可以用Github來生成自己的靜態網站了,可是畢竟咱們是要打造部落格網站啊,不可能每次都用html語法來寫部落格吧;好了,這個時候就要用到Jekyll這個工具了,有一點要強調的是,我這裡不會講解從頭打造一個個人部落格網站,而是利用別人提供的Jekyll模板來製作,如果想深入學習的同學可以自行學習Jekyll以及Liquid

一個標準的使用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
├── _data
|   └── members.yml
├── _site
└── index.html

簡單介紹一下每個目錄和檔案的作用

檔案 / 目錄	描述
_config.yml	儲存配置資料。很多配置選項都會直接從命令列中進行設定，但是如果你把那些配置寫在這兒，你就不用非要去記住那些命令了。
_drafts	drafts 是未釋出的文章。這些檔案的格式中都沒有 title.MARKUP 資料。學習如何使用 drafts.
_includes	你可以載入這些包含部分到你的佈局或者文章中以方便重用。可以用這個標籤 {% include file.ext %} 來把檔案 _includes/file.ext 包含進來。
_layouts	layouts 是包裹在文章外部的模板。佈局可以在 YAML 頭資訊中根據不同文章進行選擇。這將在下一個部分進行介紹。標籤 {{ content }} 可以將content插入頁面中。
_posts	這裡放的就是你的文章了。檔案格式很重要，必須要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定製，但是資料和標記語言都是根據檔名來確定的。
_data	放一些其他配置檔案,必須是.yml或者.yaml格式的,比如有一個檔案叫members.yml,如果想引用這個檔案裡的內容就通過site.data.membres來引用
_site	一旦 Jekyll 完成轉換，就會將生成的頁面放在這裡（預設）。最好將這個目錄放進你的 .gitignore 檔案中。

應用

第一步:去JekyllThemes下載一個自己喜歡的模板
第二步:按照之前的步驟把下載好的模板上傳到自己的Github倉庫中
第三步:在_posts資料夾中放入自己寫好的部落格,檔名必須是日期-標題名,例如:2016-10-25-我的第一篇部落格
第四步:上傳部落格到Github中即可訪問自己的部落格