使用GitHub搭建簡易站點：賽博空間游擊隊員必備技能

時間：2023-08-02 21:57:02 | 來源：網(wǎng)站運營

時間：2023-08-02 21:57:02 來源：網(wǎng)站運營

使用GitHub搭建簡易站點：賽博空間游擊隊員必備技能：歡迎加入拜生活教讀者群：541535484

作者：王小嗨

不撥號是上不了網(wǎng)的，今天也是如此。 —— 不鳥萬如一

不知從什么時候起，唾手可得的物件或者知識成為一種司空見慣，消費成為這個時代理所當(dāng)然的正確。消費只需「一剎那」間即刻完成，它無須理會商品背后的艱辛而漫長的生產(chǎn)過程。習(xí)得/傳授 某項技能成為一件可恥的事情，因為人們 習(xí)得/傳授 某項技能勞心勞神。這是消費主義的全面勝利。

我們習(xí)慣于使用信息孤島創(chuàng)制的封閉空間，它無所不在、無所不能，滲透著包裹著我們，構(gòu)建了我們的世界。彷佛我們?nèi)粘Ｊ褂玫碾娮咏K端設(shè)備和互聯(lián)網(wǎng)服務(wù)都是天上掉下來得一樣，魔法一般出現(xiàn)我們的眼前，只要消費就可意義升華。那些「自愿加班」的產(chǎn)線工人、通宵達(dá)旦寫程序的工程師、大雨中電瓶車送外賣的騎手們，她們成了看不見的人，被淹沒在商品價值邏輯之中。

欲望被壓抑被審查之后，才會呈現(xiàn)出「自我」，真實被掩蓋在荒漠之下。賽博空間游擊隊員知曉街頭巷尾每一個監(jiān)控設(shè)備，她們既不畏懼，也不甘心沉寂。透過探索監(jiān)控死角，使得被淹沒的「勞動者與生產(chǎn)關(guān)系」呈現(xiàn)在所有人面前。在賽博空間游擊隊員造夢的時刻，機械復(fù)制時代的技術(shù)與媒介終于成為被壓迫者手中的武器。

GitHub Pages 作為被壓迫者革命武器，應(yīng)該如何上膛？此教程為beta0.1。

后續(xù)迭代，怨不通知。

萬維網(wǎng)、瀏覽器、網(wǎng)站與Github Pages

萬維網(wǎng)（英語：World Wide Web），亦作「WWW」、「Web」，是一個由許多互相鏈接的超文本組成的系統(tǒng)，通過互聯(lián)網(wǎng)訪問。 ——維基百科詞條「萬維網(wǎng)」

我們?nèi)粘４蜷_IE、Chrome、Safari抑或自由的Firefox瀏覽網(wǎng)頁站點，就是通過超文本傳輸協(xié)定（http）訪問了一個遠(yuǎn)程文件，通過瀏覽器訪問的所有網(wǎng)站構(gòu)成了我們熟知的萬維網(wǎng)。

構(gòu)成網(wǎng)站的文件不是從真空中神秘產(chǎn)生，它需要硬盤空間進(jìn)行儲存。網(wǎng)站文件都儲存在遠(yuǎn)方的電腦之中，我們把遠(yuǎn)程存儲這些文件的電腦稱為服務(wù)器，其實服務(wù)器不過就是一臺電腦。

我們可以把遠(yuǎn)程服務(wù)器的網(wǎng)頁文件想象成儲存在移動硬盤上的小電影，這些小電影需要播放器才能播放，而瀏覽器就是相當(dāng)于播放網(wǎng)頁文件的播放器。http協(xié)定就是鏈接移動硬盤和電腦的數(shù)據(jù)線，通過數(shù)據(jù)線（http協(xié)定）和文件瀏覽器（瀏覽器），我們就可以訪問移動硬盤（服務(wù)器）上的文件。

通常服務(wù)器需要購買才能使用，畢竟硬件需要花錢，開機需要聯(lián)網(wǎng)和耗電，這都是成本。令人欣喜的是GitHub免費提供了儲存網(wǎng)頁的空間——Github Pages。

理解了這些萬維網(wǎng)基本運行邏輯，我們才能更好地操作GitHub Pages。Github是一個程序員間協(xié)作開發(fā)代碼的應(yīng)用，其中它提供了一項名為GitHub Pages的服務(wù)，可供我們儲存網(wǎng)頁文件，相當(dāng)于免費贈與我們一個小U盤。

我們只需要將制作好的網(wǎng)頁文件上傳至GitHub提供的儲存空間，一個新的網(wǎng)站就創(chuàng)制出來了。

markdown、HTML與網(wǎng)頁文件

Markdown是一種輕量級標(biāo)記語言，創(chuàng)始人為約翰·格魯伯（英語：John Gruber）。它允許人們「」 使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的XHTML（或者HTML）文檔」 。 ——維基百科詞條「萬維網(wǎng)」
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。 ——維基百科詞條「HTML」

我們訪問的網(wǎng)站，就是通過瀏覽器遠(yuǎn)程讀取html文件，它或者是靜態(tài)文件，或者是由其他語言動態(tài)生成。靜態(tài)文件是早已經(jīng)做好的文件，動態(tài)文件是用戶在訪問站點時，服務(wù)器根據(jù)用戶請求實時生成文件，通過瀏覽器呈現(xiàn)在熒幕上。

通過markdown標(biāo)記語言，我們既可以方便地制作html靜態(tài)文件，也可以將markdown文件存在GitHub上通過Jekyll驅(qū)動實時生成html文件。

寫markdown文件一般需要markdown編輯器，編輯器有本地軟件，也有網(wǎng)頁版。大家可以自行探索，web版編輯器有不少，在這里笨教推薦兩款本地軟件。MWeb和Typora，MWeb僅支持Mac，Typora支持win、Mac和Linux。

markdown語言非常簡單，用于html生產(chǎn)則只需掌握以下幾個最基本的語法。

1. 
   # 一級標(biāo)題
   
2. 
   ## 二級標(biāo)題
   
3. 
   ### 三級標(biāo)題
   
4. 
   **加粗**
   
5. 
   *斜體*
   
6. 
   >引用
   
7. 
   ![圖片標(biāo)題](圖片url)
   
8. 
   <超鏈接URl>
   
9. 
   <email>

更多語法請游擊隊員們自行去搜索學(xué)習(xí)。這里提示一下下，很多人可能不理解插入圖片的操作。不管是在markdown中預(yù)覽中顯示的圖片，還是網(wǎng)頁中圖片，這些圖片都是儲存在某個硬盤，或者本地電腦，或者遠(yuǎn)程服務(wù)器。通過GitHub Pages建站，需要將圖片上傳至GitHub庫中，生成 鏈接/URL。有了url，圖片就可在markdown中使用。

Github Pages搭建站點

通常github建立博客，大家都是通過git操作，但太過復(fù)雜，我們只需直接上傳文件即可建站。

首先注冊GitHub賬戶，我們需要一個Email接受驗證郵件，推薦使用Protonmail。Github網(wǎng)站使用的自然語言為英文，如看不懂請自行使用機器翻譯。

點擊sign up，填入信息，注冊即可。選擇 username/用戶名 要慎重考量，因為我們最后得到的站點主頁地址：http://username.github.io。

接下來就獲取存在我們網(wǎng)頁文件的免費小U盤。注冊完成之后，登錄，再返回主頁，點擊New Repository創(chuàng)建一個git庫。點擊之后，需按照要求驗證郵件。

再回到首頁，重新點擊New Repository創(chuàng)建一個git庫。在Repository Name寫入與妳注冊的username相對應(yīng)的"http://username.github.io"，勾選"Initialize this repository with a README"，點擊創(chuàng)建。

通常過幾分鐘，"http://username.github.io"就可訪問，這時我們的網(wǎng)站已經(jīng)被創(chuàng)制出來了。我們還需要修改它的顯示內(nèi)容，以表達(dá)我們的意見，呈現(xiàn)真實世界。

這時返回首頁，即可看到我們的項目庫已經(jīng)建立，點擊進(jìn)入。

首先，我們需要上傳網(wǎng)頁所包含的圖片，編輯markdown文件需要用到。因為眾所周知的原因，GitHub訪問速度稍慢，我們需要在上傳圖片之前將圖片壓縮，推薦使用http://tinypng.com進(jìn)行壓縮。

如果固定使用一個站點，通常會有很多圖片。就像在本地電腦管理圖片一樣，為了便于管理，我們需要建立圖片文件夾。在GitHub項目庫的頁面中點擊"Create new file"，輸入"文件夾名稱/"，出現(xiàn)上圖頁面時，輸入"readme.md"(readme可以隨便寫)。

返回項目首頁，即可看到名字為"文件夾名稱"的目錄，這時文件夾已經(jīng)創(chuàng)建，點擊進(jìn)入，再點擊"Upload new file"，上傳本地圖片至圖片目錄。

同理，也可建立圖片二級目錄，每一篇文章一個目錄，方便管理。

如只是游擊性質(zhì)的臨時站點，可直接將圖片上傳至根目錄，在項目首頁直接"Upload new file"即可。

上傳完圖片后，找到目錄下圖片文件，點擊這個圖片文件。點擊圖片，即可得到url（上圖紅圈），復(fù)制該url加上前綴https://，就是完整url。按markdown語法寫入markdown文件，就可以顯示該圖片。

一個markdown編寫文章的實例

1. 
   # 一級標(biāo)題
   
   
2. 
   ## 二級標(biāo)題1
   
3. 
   ![圖片標(biāo)題1-c](圖片1url)
   
   
4. 
   *圖片說明*
   
5. 
   內(nèi)容內(nèi)容內(nèi)容
   
6. 
   ## 二級標(biāo)題
   
7. 
   ![圖片標(biāo)題2-c](圖片2url)
   
8. 
   *圖片2說明*
   
9. 
   內(nèi)容內(nèi)容內(nèi)容
   
10. 
    內(nèi)容**內(nèi)容加醋**內(nèi)容
    
11. 
    ### 三級標(biāo)題1
    
12. 
    內(nèi)容內(nèi)容內(nèi)容
    
13. 
    內(nèi)容內(nèi)容內(nèi)容
    
14. 
    ### 三級標(biāo)題2
    
15. 
    內(nèi)容內(nèi)容內(nèi)容
    
16. 
    內(nèi)容內(nèi)容內(nèi)容
    

直接上傳markdown文件建站

通過markdown軟件，我們生成了md擴展名的本地文件，需將md文件上傳到我們的創(chuàng)建項目中，才能依靠Jekyll驅(qū)動生成站點。

在我們創(chuàng)建的項目之后，進(jìn)入項目主頁，點擊Setting，進(jìn)入項目設(shè)置界面。找到挑選主題按鈕，點擊進(jìn)入選擇妳鐘愛的主題。


選擇保存主題之后，重新進(jìn)入項目主頁會發(fā)現(xiàn)有一個"readme.md"文件，將它刪除。

將本地生成的markdown文件重命名為readme，這個readme將作為首頁，瀏覽器訪問"http://username.github.io"即可看到。

注意：在markdown模式，上傳圖片需在選擇主題之后。

在"readme.md"文件中，我們寫入首頁內(nèi)容。它可以是一篇文章，也可以是文章鏈接列表，按自己需求決定。

按照上傳圖片中方法，創(chuàng)建一個pages目錄，存放次級頁面，次級頁面通常為文章頁。將文件編輯成markdown文件，命名為"article.md",上傳至pages目錄，則該文章的訪問地位為"http://username.github.io/pages/article"。

如將article.md直接上傳至項目的根目錄，則訪問地址為"http://username.github.io/article"。

需要注意，我們分享給伙伴網(wǎng)站地址時候一直粘貼完整地址"https://username.github.io/article"，"https://"不要忘記。

生成html文件建站

其實直接上傳markdown文件到GitHub是最簡單建站方法，但因特殊需求，有時候有的人需統(tǒng)計訪客數(shù)據(jù)。需要在html中加入統(tǒng)計代碼，而本地html文件中直接加入統(tǒng)計代碼較為方面。

統(tǒng)計代碼一般使用Google analytics，注冊Google賬戶登錄，添加網(wǎng)站，在admin菜單中獲取統(tǒng)計代碼。

笨教嚴(yán)重聲明，反對竊取訪客隱私，請教友們開啟瀏覽器「防止追蹤」選項，日常訪問不明網(wǎng)站盡量使用瀏覽器的隱私模式。

利用本地markdown編輯軟件，生成html文件，一般方法為在菜單按鈕中找到導(dǎo)出或者生成html。生成后，在本地找到該html，編輯加入相應(yīng)代碼。一般來說，編輯html文件需要編輯器，苯教推薦Notepad+++與Sublime Text。

使用編輯器打開html文件，找到<title>。<title>與</title>之間寫入該網(wǎng)頁的名字，例如文章名字為「文章」，則修改為<title>文章</title>。包括主頁與文章頁都可以編輯title。

使用編輯器打開html文件，找到代碼</body>，將google統(tǒng)計代碼粘貼</body>代碼之前，即可實現(xiàn)訪客統(tǒng)計。

在上傳html模式中，我們需要將項目庫的原有文件全部刪除。與markdown模式不同，在html模式中主頁文件為index.html。我們需要生成的主頁文件命名為index.html。

與markdown模式上傳次級頁面操作方法一樣。將文章編輯成markdown文件，命名為"article.html",上傳至pages目錄，則該文章的訪問地位為"http://username.github.io/pages/article"。

生產(chǎn)html的方法多種多樣，大家也可以使用別種更快捷的方法。只要html上傳到github項目庫，一個可以訪問的網(wǎng)頁就有了。

高階玩法

Github還可以綁定域名，非常簡單，配置一個"CNAME"文件上傳至根目錄，綁定DNS即可。掌握了Github搭建站點，類似的服務(wù)Gitlib也可以搭建。

本教程甚為簡陋，僅供普及概念使用，具體小技巧還需游擊隊員們自行摸索。比如將html里的字體替換成國內(nèi)源，可以加快訪問速度，還有許多小技巧可以提高訪問速度。

Markdown也有很多玩法，比如本地寫文檔生成PDF或者epub，亦或者使用markdown排版微信訂閱號文章，比如本文就使用markdown進(jìn)行排版。

萬維網(wǎng)上還有需要GitHub建站教程，git命令更新網(wǎng)站更為簡單。苯教鼓勵游擊隊員們積極探索。

廣闊天地，大有作為。只要深入發(fā)掘，總能找到武器。