【教學】如何使用Github建立一個完全免費的個人部落格(高自由度且可自行編寫程式碼)

Published: 2020 年 2 月 21 日 in Knowledge by mekitoci.

首先申明這絕對是完全免費，不會在文章推薦伺服器、虛擬主機等。而且操作步驟簡單上手，即使是非IT人員也可以學會。

侷限：只能是靜態網站的個人網站
面向讀者：所有人包括IT人員

首先如果你無法理解“靜態網站”的話，那麼相信我，靜態網站可以滿足你大部分個人網站的需求。

其次這篇文章更多的是給非IT人員。

而且學會自己搭建一個靜態網站是一個很酷的事情，你可以做一些很漂亮的宣傳頁，或者表達自我主張的個人部落格，或者在我以前的文章裡面給別人做一個網頁版生日祝福或者紀念日等等。

Let’s do it!!!!

前言

首先我們要用到的工具是著名的開源社區 Github，我們做的靜態網站最終要託管在上面，這個功能叫做『Github Pages』，是一項免費的靜態文件部署服務。

Step 1::申請 GitHub 帳號

（如果有帳號請直接登入然後跳轉到教學下一步驟）

訪問 Github，點擊SIGN UP按鈕。
網址： https://github.com/
（Sign in是登錄的意思，應該很好理解）
還有Github是全英文的，沒有中文的哦，但這不影響我們使用。

註冊很簡單，只需要用戶名，密碼，信箱即可，不需要手機號。
（對了，用戶名用一個酷一點或者有意義一點的，因為它會出現在你的網址中）

接著，Github 會問你是否需要付費使用。
這裡選擇不用，因為Github提供的免費服務已經能滿足大部分人包括開發者的需要了。付費服務主要是面向團隊以及企業。

後面還會有一些步驟，大概意思就是問你想用Github做什麼，你對Git的熟練程度，因為 Github 網站迭代的原因可能會稍有不同。比如筆者這裡試的時候是這樣子的。

然後 Github 會給你註冊的信箱發送一個確認連結，請點擊連結確認，不激活的話是無法正常使用Github的服務的。這個是Github的反爬蟲系統。
（~~題外話：Github的反爬蟲系統很強很強！~~）

STEP 2:: 創建一個倉庫 (New repository)

接下來我們要創建一個倉庫，倉庫就是保存代碼的地方，也就是保存網站的地方。

這裡我們做一個最簡單的網站：個人簡歷。
1. 首先點擊“Your repositories”，查看個人全部倉庫。
( (第一次肯定是空空如也啊。) )

2. 接著我們新建一個倉庫

3. 這一步很重要，倉庫的名字不可以隨便寫，必須是 <我的名字>.github.io

4. 接著下一步頁面會比較複雜，你會看到一大堆看不懂的東西，其實那些是 git 操作提示。如果你熟練git的話就知道了。
不過我們不管這些，我們只需要創建一個新的文件就行啦！

5. 新文件的名字不可以亂寫哦，必須是 index.html，這裡大家都一樣都寫這個。
（題外話：靜態http文件託管服務的默認訪問文件就是index.html）

上方只是範例打法，建議大家可以複製以下程式碼作為格式

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>J.Y.CHEN 的部落格</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <p>Hello 大家好</p>
    <p>歡迎來到J.Y.CHEN 的部落格</p>
    <p>很高興你來到這裡，你可以學習到很多東西！！</p>
<ul>
    <li><a href="https://github.com/chyang26qw">我的github</a></li>
    <li><a href="http://mekitoci.com">我的BLOG</a></li>
    </ul>
</body>
</html>