在Github/Gitee上搭建免費個人博客網(wǎng)站（進階篇）

時間：2022-08-29 05:12:01 | 來源：網(wǎng)站運營

時間：2022-08-29 05:12:01 來源：網(wǎng)站運營

我在《不需懂代碼，10分鐘在Github上搭建免費且已成型的個人博客網(wǎng)站 》（后面簡稱基礎(chǔ)篇）一文中，介紹了完全不懂代碼的小白如何在10分鐘里利用Github或Gitee（碼云）上搭建一個成型的個人博客網(wǎng)站。當(dāng)時承諾了還要寫“進階篇”，現(xiàn)在過了很久，在網(wǎng)友的催促下才來寫，很不好意思。

下面我介紹一些你可能要用到的技巧，以實用為主，盡量符合你能想到的由淺入深的次序。

另外，由于國內(nèi)訪問Github有時候還是可能不太穩(wěn)定，我在基礎(chǔ)篇中建議用Gitee替代，基本內(nèi)容的操作完全一樣。這里我也把Github和Gitee一起講，它們?nèi)匀环浅Ｏ嗨啤?br>

1、如何修改、刪除或創(chuàng)建文件？

從我這里Fork網(wǎng)站過去后，你的第一件事是改配置（_config.yml文件），然后除了寫博客，就是改“About”（about.html文件），因為你不想里面的內(nèi)容還是介紹我的。

我們在初級篇中講到，每個文件點開后，在頁面右上角有一支筆，點擊可以修改文件。修改好了之后，點擊頁面底部的Commit changes，然后稍等片刻，刷新幾次你的博客網(wǎng)站，就可以看到修改的內(nèi)容了。

然后就在筆的旁邊，還有一個垃圾桶，點擊它可以刪除當(dāng)前文件。

那么創(chuàng)建新文件，就是在每一級目錄文件列表的頁面，右上角有一個“Create new file”，點擊它就可以新建文件。旁邊還有個“Upload files”，想上傳文件也可以。

在Gitee里，這些東西都是中文按鈕，所以看看就懂，這里就不講了。要注意的是，如果你在Gitee不是付費用戶，那么任何的修改都需要再次通過“服務(wù)-Pages”手工更新部署你的網(wǎng)站（詳見第4部分），才會生效。

關(guān)于文件操作知道這些就夠了。更復(fù)雜的操作在Github客戶端上做要方便得多，下面第3部分講如何安裝使用Github客戶端。

2、如何調(diào)整菜單？

你看到網(wǎng)站的右上角的菜單，其實是指向一個個文件。這些文件就是主目錄下的所有.html文件，除了index.html代表Home所以必定在第一個位置之外，其它文件都是按照文件名排序從左到右排列過去的。

所以為了控制菜單次序，需要在文件名前加上1、2、3這樣的數(shù)字。至于這個按鈕的名字，是在文件內(nèi)容中第一行的“title:”后面寫的，所以若你要中文菜單的話，改那個地方就可以了，不需要改文件名。

如果你要增加菜單按鈕，那么也要創(chuàng)建相應(yīng)的.html文件，并如上所述控制好次序。

3、客戶端與本地調(diào)試

以上都是少量修改。如果有比較大量的修改，建議安裝Github客戶端：GitHub Desktop。

下載安裝好后，用你的github賬號登錄，然后選擇你的倉庫名，克?。–lone）到本地。點左邊欄（或左上角）的倉庫名，右邊會出現(xiàn)這樣的內(nèi)容：

上面一行的按鈕是打開文件管理器，點擊你就可以看到你本地電腦上的對應(yīng)Github倉庫的文件目錄，跟網(wǎng)上的目錄結(jié)構(gòu)完全一樣：

然后你就可以在本地修改、刪除、增加文件，包括文件目錄操作。其中_posts是存放你的博客文章的地方，img存放圖片的地方。

若在本地文件夾里有任何改動，當(dāng)你回到Github Desktop時，它會列出你剛才做的改動，然后你點左下角的“Commit”之后，是這個樣子：

然后點右邊的“Push origin”，就把本地的改動同步到網(wǎng)上去了。

現(xiàn)在你想修改頭像就簡單了：先把頭像圖片放到本地img目錄下，修改_config.yml文件中關(guān)于頭像的那一行為你的圖片文件名，然后Commit、Push同步到網(wǎng)上就可以了。

對于大量的修改來說（例如批量刪除文章，或批量修改文章的文件名），本地修改文章比直接在網(wǎng)上改要方便得多。但這還算不上“本地調(diào)試”，本地調(diào)試的預(yù)備過程比較麻煩，這里就不講了，想了解可以去看看BY的原文。

那么有人問，Gitee也有客戶端嗎？答案是沒有。但我悄悄告訴你，Github Desktop是可以用于Gitee的。方法很簡單：點擊左上角的Add，選擇Clone Repository，然后在下面這個界面上選URL，把你Gitee倉庫的URL地址拷貝進去，點擊“Clone”，就可以了。這樣你左邊欄會增加一個Gitee的項目倉庫，類別是“other”。

4、MD文本編輯器

既然說到在本地修改文章了，那不得不提一下MD文本編輯器。MD是Mark Down的縮寫，是一種格式標識文本，用來寫對格式有點兒要求但要求又不高的文章很方便。博客文章就是很合適的一種。在這里，你寫的博客文章都用.md后綴命名。

MarkDown主要格式規(guī)則：

• 標題：# 代表標題，幾級標題就用幾個#號
• 列表：* 代表無序列表，1. 2. 3. 代表有序列表
• 鏈接：[...](...)，中括號中是鏈接名，小括號中是鏈接地址URL
• 粗體：用兩對*號包圍起來，即 **粗體字**

其它規(guī)則要什么就網(wǎng)上搜什么吧。

當(dāng)然，你可以不用專門的MD編輯器，用一般的Note之類的一般文本編輯器也可以。但專門的MD文本編輯器更好用。

Windows上的MarkDown編輯器很多，而Mac電腦上我推薦這個MacDown工具，所見所得功能做得比較好：屏幕分兩半，一半給你輸入文字，一半顯示效果，左右可互換，看你喜歡。菜單中有“格式”這一項，所以上述格式規(guī)則不記得也沒關(guān)系。




最近人們比較推崇一款叫做Typora的Markdown文本編輯器，Windows/MacOS/Linux平臺上的版本都有，目前都還是Beta版的。它真的太棒了，有的人為它激動到哭。有興趣你可以也試一下，不過看樣子這個軟件升級到正式版后有可能要收費，到時候你要看看你的錢包再做決定。

寫完或者修改好后，存盤到相應(yīng)目錄下。然后記得回到Github Desktop客戶端，提交和上傳新文件到倉庫中，刷新幾遍網(wǎng)頁，你的新作就可以出現(xiàn)了。

注意，Github改動文件后，是自動反應(yīng)到Page網(wǎng)站上的（可能有延時，或刷新幾次網(wǎng)頁即可）。但Gitee不是，除非你是Pro版本。Gitee普通版本，需要手工重新部署網(wǎng)站：在倉庫上方的菜單中找到“服務(wù)”菜單，選擇“Gitee Pages”，然后看到這個：

點擊更新，文件改動才會更新到你的網(wǎng)站上。每次改動都必須這樣做。

5、關(guān)于少量修改代碼

進階篇也能做到不需要懂代碼。但是如果你要想修改得多一些，以更符合你自己的想法，可能需要稍微了解一下“HTML標簽”是什么。

HTML標簽一般是成對出現(xiàn)的，你可以理解為一對“括號”，以表明做一件事，例如：

• <p> .. .</p>
• <a> ... </a>
• <div> ... </div>
• <script> ... </script>

等等這樣子的，左括號是一個被尖尖號包起來的單詞，表示開始，然后是一些要做的事（可以有很多行），右括號比左括號多一個“/”，表示結(jié)束。

你不需要知道這些標簽的意思，但你要知道他們是一個整體，因此當(dāng)你要復(fù)制一些東西的時候，要從“左括號”開始到“右括號”結(jié)束整體復(fù)制。你還需要知道它們像括號一樣，也是可以一層套一層嵌套的。

你要做少量修改的時候，先用文件管理器全文搜索的方法，定位到你要改的文件，然后打開該文件定位到要改的內(nèi)容。只改內(nèi)容的文本文字（或某些URL地址），不要改動這些標簽，那你就是安全的，不會把你的網(wǎng)站給弄崩潰。

有了這點“關(guān)于代碼的知識”，就夠用了。這樣你也可以少量修改菜單所對應(yīng)的那幾個HTML文件了。

比如，你可能注意到在我的博客主頁大標題下面，有三個快速鏈接按鈕。這是我出于自己的需要，用不太規(guī)范的代碼簡單寫出來的。如果你不想要這幾個按鈕，或者要改它們的文字和鏈接，請打開index.html文件，刪除或修改第7到23行整段的內(nèi)容即可（我已經(jīng)貼心地在這一段前面寫了<!-- 快速鏈接?？尚薷逆溄雍兔?，或整體刪除 --> 的注釋字樣）。




OK，恭喜你！到此為止，你已經(jīng)基本玩轉(zhuǎn)Github或Gitee的Page個人博客網(wǎng)站了。

接下去，你有興趣繼續(xù)玩下去的話，可能還有兩件事情要關(guān)心一下：

1. 評論系統(tǒng)
2. 獨立域名

我們將在《在Github/Gitee上搭建免費個人網(wǎng)站和博客（延伸篇）》中說說這兩件事。

看完覺得有用請點個贊，謝謝！