Github Pages 建站說明

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

時間：2023-08-02 20:39:01 來源：網(wǎng)站運營

Github Pages 建站說明：說明：本文由我撰寫于https://matt-wzy.github.io/MyPage/buildWebSite-document/ ，主動摘錄至本站，若排版出現(xiàn)問題我會用截圖代替，如果想要一個更好的使用體驗請前往網(wǎng)站閱讀。

我覺得你看完本篇博客將會知道我編寫博文的時候是如何操作的。

從零開始，搭建博客

快進到擁有一個空的倉庫

　　此類創(chuàng)建GitHub賬戶、新建一個repo的教程數(shù)不勝數(shù)，不想贅述。

以防你真的不會，這個鏈接點進去之后看到 找到 GitHub Pages 選項即可

尋找合適的模板

　　不會吧？不會有人搭建博客之前就已經(jīng)會寫而且寫好一個完完整整的靜態(tài)網(wǎng)站框架了吧？

　　實際上大部分人都沒有自己的一套網(wǎng)站模板，如果有請?zhí)^尋找模板直接上傳。這里隨便給個模板網(wǎng)站 ，找到一個你喜歡的之后下載或者去其主頁看看或許有使用說明。

　　本站用的是此模板 ，這個模板有個好處就是全中文說明，及其友好，簡單看看readme和里面的鏈接基本上就啥都會配置了。（不會你issue找我，我教）

上傳，配置

　　對你新建的空倉庫 git clone , 把下下來的zip解壓， 更改一點點內(nèi)容 , git push ，git設置啥的我就不教了，有需要issue私聊。

（上面那個也可以直接用克隆樣板庫的方式完成，隨意就好）

　　打開GitHub pages的方法也比較簡單，settings-pages-打個勾勾就好啦~







　　配置到這一步，你就可以打開看到模板網(wǎng)站啦~~~~

增刪內(nèi)容，更改框架

基本

　　誰不想啥都不動然后立刻開箱使用~~

更改 _config.yml 文件

　　這個是建站必改的配置文件了，這個文件里面包含了有關網(wǎng)頁正常運轉(zhuǎn)的很多配置，你看代碼便會明白它是怎么運作的，不過就目前而言，我們只需要知道這個文件需要被改動而且我們有詳細的改動說明已經(jīng)寫在文件里面的注釋里了。

　　第一個要改的便是網(wǎng)站的名字和描述，這個沒啥好說的，主要是homepage里面展示出來的那樣







　　再有就是repo的名字，照著說明改成你倉庫的名字的就行




　　至此 _config.yml 已經(jīng)基本改完，起碼你的網(wǎng)站刷新完后應該看起來正常（指和模板一摸一樣）。

　　如果想要自定義404頁面工作正常的話，記得在404.md頂上改一下改成這個樣子




--- permalink: /404.html layout: page title: 404 - Page not found ---

　　至此，基礎的配置已經(jīng)結(jié)束了，你還可以在此配置文件里面更改您的頁腳注等等，根據(jù)個人喜愛自行發(fā)揮即可。

　　看到這里，你自然會擔心如果自己配置的時候改錯了會怎么樣：不用擔心，如果你配置的時候產(chǎn)生了嚴重的語法錯誤（比如說該加的空格忘了加），GitHub的Jekyll工具會報錯，然后給你發(fā)一封郵件說明你的repo對應的網(wǎng)頁構建失敗，這時候你簡單看一看是不是哪里的空格一不小心給刪了，補上去重新提交就可。

添加博文、編輯內(nèi)容

　　其實readme里面指向的鏈接中已經(jīng)說的很清楚了 ，以防你還是看不明白我來給你說一下。




　　你的目錄至少看起來應該和這個樣子很像，想開始寫一個博文，你只需要打開_posts文件夾，然后在里面新建一個md為后綴的文件，文件名應該類似于日期-名字，這里我沒有試過中文名是否可用，反正我用的是英文名因為這個名字可是要上URL的。

　　然后按照指示，你需要在新的文件里面插入如下的開頭：

--- layout: post title: Pages 建站說明 date: 2021-04-18 author: Matt-wzy tags: [essay,document] comments: true toc: true ---

　　其中，layout: post 不用改，toc: true 是指打開目錄顯示（桌面版瀏覽器生效），剩下的自己猜猜就猜出來了。主要是懶不想一個個找然后發(fā)出來

圖床

　　你會發(fā)現(xiàn)使用md文件編寫博客的時候無法像編寫word文檔一樣直接粘貼如圖片，如果在typora這樣的編輯器里面直接粘貼會出現(xiàn)文件名+本地文件地址，這樣子的話別人是絕對無法看到你想展示的圖片的，一個合適的解決辦法就是將圖片上傳的圖床并使用圖床地址。而現(xiàn)在互聯(lián)網(wǎng)上圖床有特別多，我個人對于那些要求圖片大小小于0.5M的主流圖床并不感興趣，相反的，我選擇freejishu搭建的圖床 他本人用愛發(fā)電搭建起了一個圖床系統(tǒng)，雖然不知道能用多久，但是用一天爽一天哈哈哈（（（（誰叫他的圖床沒有使用限制哈哈哈當然我也不會傳什么不符合主流價值觀的圖片上去的。

進階

　　如果你不止?jié)M足于開箱即用，那么你可以對模板進行一定的修改。

增加google analytics

　　此網(wǎng)站的模板自帶google analytics支持，但是不知道怎么的，我怎么配置都不生效，于是被迫自己改了改。

　　首先，你需要一個**賬號，然后……算了快進到你拿到G代碼







　　然后下面有代碼添加說明，按照說明加到head里面即可。

　　什么？你不知道怎么加進去？啊哈那是因為我沒說 這個網(wǎng)頁的布局不是說一個html就是一個頁面的，而是一層套一層，層層嵌套，具體我不是有關專業(yè)從業(yè)人員也說不明白為什么，但是你只要知道在代碼里看到如下的內(nèi)容就說明這個頁面引用了另一個頁面內(nèi)的全部代碼。

這里說的是用了head.html里面的全部代碼。

　　現(xiàn)在你就知道了，你只需要找到head.html里面對應的地方加入谷歌給你的分析代碼即可。

　　找到/_include/analytics.html，刪掉原有的部分，然后加入谷歌給你的那一塊代碼，然后再去head.html里面把插入代碼的語句適當往前提，比如說我的就改成了這樣




　　然后你守著谷歌的實時分析數(shù)據(jù)就可以啦~記得提交完之后等一兩分鐘多刷新刷新你的網(wǎng)頁。

增加Aplayer

　　使用說明在這 ，而如何將其添加到網(wǎng)站里面回頭再講，本質(zhì)是加js

　　一個合格的博客文章，怎能沒有BGM的加持呢？對于加BGM，其實很早以前就有大神提出了解決方案，Aplayer做音樂播放器，mettingjs做網(wǎng)絡音樂id解析器，兩者結(jié)合即可達到輸入音樂id即出音樂的作用，如下所示：

　　將這樣棒棒的播放器加入你的網(wǎng)頁只需要分為三步：

增加一言

一言

　　作為一個完善的網(wǎng)頁怎能沒有美麗的修飾？一言可以說是被很多網(wǎng)站所采用的所增加他們網(wǎng)站美觀度的一個小工具，沒有很復雜，就網(wǎng)上選取的一句話，或調(diào)皮，或驚喜，或感觸，總之，你會期待每次刷新所呈現(xiàn)出來的新鮮句子，你會覺得他們永遠不會重復，并且時刻充滿新鮮于驚喜。

　　雖然一言api提供了選擇范圍的接口，但是我懶但是我覺得沒有必要篩選，隨意刷新出來自己所沒能在日常生活中看到的句子，難道不是一件值得慶祝的事情么？

　　具體的構建方法也很簡單，將此代碼放入head中