利用 GitHub 從零開始搭建一個自己的專屬博客

轉載自進擊的Coder（ID：FightingCoder）

轉載自進擊的Coder（ID：FightingCoder）

趁著周末，搭建了一下 NightTeam 的官方博客和官方主頁，耗時數個小時，兩個站點終于完工了。這里寫一篇文章順手記錄了下來。不過這篇原創我發在了 NightTeam 上面了，這邊我就作為轉載了。

由于 NightTeam 的域名是 nightteam.cn，所以這里官方博客使用了二級域名 blog.nightteam.cn，官方主頁使用了根域名 nightteam.cn，現在兩個站點都已經穩定運行在 Github Pages 上面了，大家如果感興趣可以去看一下。

?NightTeam HomePage：https://nightteam.cn/?NightTeam Blog: https://blog.nightteam.cn/

這里的主頁就是用一個基本的靜態頁面搭建了，沒有什么技術含量。博客相對復雜一點，使用了 Hexo 框架，采用了 Next 主題，在搭建的過程中我就順手把搭建的流程大致記錄下來了，在這里擴充一下形成一篇記錄，畢竟好記性不如爛筆頭。

于是，這篇《利用 GitHub 從零開始搭建一個博客》的文章就誕生了。

準備條件

在這里先跟大家說一些準備條件，有些同學可能一聽到搭建博客就望而卻步。弄個博客網站，不得有臺服務器嗎？不得搞數據庫嗎？不得注冊域名嗎？沒事，如果都沒有，那照樣是能搭建一個博客的。

GitHub 是個好東西啊，它提供了 GitHub Pages 幫助我們來架設一個靜態網站，這就解決了服務器的問題。

Hexo 這個博客框架沒有那么重量級，它是 MarkDown 直接寫文章的，然后 Hexo 可以直接將文章編譯成靜態網頁文件并發布，所以這樣文章的內容、標題、標簽等信息就沒必要存數據庫里面了，是直接純靜態頁面了，這就解決了數據庫的問題。

GitHub Pages 允許每個賬戶創建一個名為 {username}.github.io 的倉庫，另外它還會自動為這個倉庫分配一個 github.io 的二級域名，這就解決了域名的問題，當然如果想要自定義域名的話，也可以支持。

所以說，基本上，先注冊個 GitHub 賬號就能搞了，下面我們來正式開始吧。

新建項目

首先在 GitHub 新建一個倉庫（Repository），名稱為 {username}.github.io，注意這個名比較特殊，必須要是 github.io 為后綴結尾的。比如 NightTeam 的 GitHub 用戶名就叫 NightTeam，那我就新建一個 nightteam.github.io，新建完成之后就可以進行后續操作了。

另外如果 GitHub 沒有配置 SSH 連接的建議配置一下，這樣后面在部署博客的時候會更方便。

安裝環境

安裝 Node.js

首先在自己的電腦上安裝 Node.js，-：https://nodejs.org/zh-cn/download/，可以安裝 Stable 版本。

安裝完畢之后，確保環境變量配置好，能正常使用?npm?命令。

安裝 Hexo

接下來就需要安裝 Hexo 了，這是一個博客框架，Hexo 官方還提供了一個命令行工具，用于快速創建項目、頁面、編譯、部署 Hexo 博客，所以在這之前我們需要先安裝 Hexo 的命令行工具。

命令如下：

npm?install?-g?hexo-cli

安裝完畢之后，確保環境變量配置好，能正常使用?hexo?命令。

初始化項目

接下來我們使用 Hexo 的命令行創建一個項目，并將其在本地跑起來，整體跑通看看。

首先使用如下命令創建項目：

hexo?init?{name}

這里的 name 就是項目名，我這里要創建 NightTeam 的博客，我就把項目取名為 nightteam 了，用了純小寫，命令如下：

hexo?init?nightteam

這樣 nightteam 文件夾下就會出現 Hexo 的初始化文件，包括 themes、scaffolds、source 等文件夾，這些內容暫且先不用管是做什么的，我們先知道有什么，然后一步步走下去看看都發生了什么變化。

接下來我們首先進入新生成的文件夾里面，然后調用 Hexo 的 generate 命令，將 Hexo 編譯生成 HTML 代碼，命令如下：

hexo?generate

可以看到輸出結果里面包含了 js、css、font 等內容，并發現他們都處在了項目根目錄下的 public 文件夾下面了。

然后我們利用 Hexo 提供的 serve 命令把博客在本地運行起來，命令如下：

hexo?serve

運行之后命令行輸出如下：

INFO??Start?processingINFO??Hexo?is?running?at?http://localhost:4000?.?Press?Ctrl+C?to?stop.

它告訴我們在本地 4000 端口上就可以查看博客站點了，如圖所示：

這樣一個博客的架子就出來了，我們只用了三個命令就完成了。

部署

接下來我們來將這個初始化的博客進行一下部署，放到 GitHub Pages 上面驗證一下其可用性。成功之后我們可以再進行后續的修改，比如修改主題、修改頁面配置等等。

那么怎么把這個頁面部署到 GitHub Pages 上面呢，其實 Hexo 已經給我們提供一個命令，利用它我們可以直接將博客一鍵部署，不需要手動去配置服務器或進行其他的各項配置。

部署命令如下：

hexo?deploy

在部署之前，我們需要先知道博客的部署地址，它需要對應 GitHub 的一個 Repository 的地址，這個信息需要我們來配置一下。

打開根目錄下的 _config.yml 文件，找到 Deployment 這個地方，把剛才新建的 Repository 的地址貼過來，然后指定分支為 master 分支，最終修改為如下內容：

#?Deployment##?Docs:?https://hexo.io/docs/deployment.htmldeploy:??type:?git??repo:?{git?repo?ssh?address}??branch:?master

我的就修改為如下內容：

#?Deployment##?Docs:?https://hexo.io/docs/deployment.htmldeploy:??type:?git??repo:?git@github.com:NightTeam/nightteam.github.io.git??branch:?master

另外我們還需要額外安裝一個支持 Git 的部署插件，名字叫做 hexo-deployer-git，有了它我們才可以順利將其部署到 GitHub 上面，如果不安裝的話，在執行部署命令時會報如下錯誤：

Deployer?not?found:?git

好，那就讓我們安裝下這個插件，在項目目錄下執行安裝命令如下：

npm?install?hexo-deployer-git?--save

安裝成功之后，執行部署命令：

hexo?deploy

運行結果類似如下：

INFO??Deploying:?gitINFO??Clearing?.deploy_git?folder...INFO??Copying?files?from?public?folder...INFO??Copying?files?from?extend?dirs...On?branch?masternothing?to?commit,?working?directory?cleanCounting?objects:?46,?done.Delta?compression?using?up?to?8?threads.Compressing?objects:?100%?(36/36),?done.Writing?objects:?100%?(46/46),?507.66?KiB?|?0?bytes/s,?done.Total?46?(delta?3),?reused?0?(delta?0)remote:?Resolving?deltas:?100%?(3/3),?done.To?git@github.com:NightTeam/nightteam.github.io.git?*?[new?branch]??????HEAD?->?masterBranch?master?set?up?to?track?remote?branch?master?from?git@github.com:NightTeam/nightteam.github.io.git.INFO??Deploy?done:?git

如果出現類似上面的內容，就證明我們的博客已經成功部署到 GitHub Pages 上面了，這時候我們訪問一下 GitHub Repository 同名的鏈接，比如我的 NightTeam 博客的 Repository 名稱取的是 nightteam.github.io，那我就訪問 http://nightteam.github.io，這時候我們就可以看到跟本地一模一樣的博客內容了。

這時候我們去 GitHub 上面看看 Hexo 上傳了什么內容，打開之后可以看到 master 分支有了這樣的內容：

仔細看看，這實際上是博客文件夾下面的 public 文件夾下的所有內容，Hexo 把編譯之后的靜態頁面內容上傳到 GitHub 的 master 分支上面去了。

這時候可能就有人有疑問了，那我博客的源碼也想放到 GitHub 上面怎么辦呢？其實很簡單，新建一個其他的分支就好了，比如我這邊就新建了一個 source 分支，代表博客源碼的意思。

具體的添加過程就很簡單了，參加如下命令：

git?initgit?checkout?-b?sourcegit?add?-Agit?commit?-m?"init?blog"git?remote?add?origin?git@github.com:{username}/{username}.github.io.gitgit?push?origin?source

成功之后，可以到 GitHub 上再切換下默認分支，比如我就把默認的分支設置為了 source，當然不換也可以。

配置站點信息

完成如上內容之后，實際上我們只完成了博客搭建的一小步，因為我們僅僅是把初始化的頁面部署成功了，博客里面還沒有設置任何有效的信息。下面就讓我們來進行一下博客的基本配置，另外換一個好看的主題，配置一些其他的內容，讓博客真正變成屬于我們自己的博客吧。

下面我就以自己的站點 NightTeam 為例，修改一些基本的配置，比如站點名、站點描述等等。

修改根目錄下的 _config.yml 文件，找到 Site 區域，這里面可以配置站點標題 title、副標題 subtitle 等內容、關鍵字 keywords 等內容，比如我的就修改為如下內容：

#?Sitetitle:?NightTeamsubtitle:?一個專注技術的組織description:?涉獵的主要編程語言為?Python、Rust、C++、Go，領域涵蓋爬蟲、深度學習、服務研發和對象存儲等。keywords:?"Python,?Rust,?C++,?Go,?爬蟲,?深度學習,?服務研發,?對象存儲"author:?NightTeam

這里大家可以參照格式把內容改成自己的。

另外還可以設置一下語言，如果要設置為漢語的話可以將 language 的字段設置為 zh-CN，修改如下：

language:?zh-CN

這樣就完成了站點基本信息的配置，完成之后可以看到一些基本信息就修改過來了，頁面效果如下：

修改主題

目前來看，整個頁面的樣式個人感覺并不是那么好看，想換一個風格，這就涉及到主題的配置了。目前 Hexo 里面應用最多的主題基本就是 Next 主題了，個人感覺這個主題還是挺好看的，另外它支持的插件和功能也極為豐富，配置了這個主題，我們的博客可以支持更多的擴展功能，比如閱覽進度條、中英文空格排版、圖片懶加載等等。

那么首先就讓我們來安裝下 Next 這個主題吧，目前 Next 主題已經更新到 7.x 版本了，我們可以直接到 Next 主題的 GitHub Repository 上把這個主題下載下來。

主題的 GitHub 地址是：https://github.com/theme-next/hexo-theme-next，我們可以直接把 master 分支 Clone 下來。

首先命令行進入到項目的根目錄，執行如下命令即可：

git?clone?https://github.com/theme-next/hexo-theme-next?themes/next

執行完畢之后 Next 主題的源碼就會出現在項目的 themes/next 文件夾下。

然后我們需要修改下博客所用的主題名稱，修改項目根目錄下的 _config.yml 文件，找到 theme 字段，修改為 next 即可，修改如下：

theme:?next

然后本地重新開啟服務，訪問刷新下頁面，就可以看到 next 主題就切換成功了，預覽效果如下：

主題配置

現在我們已經成功切換到 next 主題上面了，接下來我們就對主題進行進一步地詳細配置吧，比如修改樣式、增加其他各項功能的支持，下面逐項道來。

Next 主題內部也提供了一個配置文件，名字同樣叫做 _config.yml，只不過位置不一樣，它在 themes/next 文件夾下，Next 主題里面所有的功能都可以通過這個配置文件來控制，下文所述的內容都是修改的 themes/next/_config.yml 文件。

樣式

Next 主題還提供了多種樣式，風格都是類似黑白的搭配，但整個布局位置不太一樣，通過修改配置文件的 scheme 字段即可，我選了 Pisces 樣式，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：

scheme:?Pisces

刷新頁面之后就會變成這種樣式，如圖所示：

另外還有幾個可選項，比如：

#?scheme:?Muse#scheme:?Mistscheme:?Pisces#scheme:?Gemini

大家可以自行根據喜好選擇。

favicon

favicon 就是站點標簽欄的小圖標，默認是用的 Hexo 的小圖標，如果我們有站點 Logo 的圖片的話，我們可以自己定制小圖標。

但這并不意味著我們需要自己用 PS 自己來設計，已經有一個網站可以直接將圖片轉化為站點小圖標，站點鏈接為：https://realfavicongenerator.net[1]，到這里上傳一張圖，便可以直接打包下載各種尺寸和適配不同設備的小圖標。

圖標下載下來之后把它放在 themes/next/source/images 目錄下面。

然后在配置文件里面找到 favicon 配置項，把一些相關路徑配置進去即可，示例如下：

favicon:??small:?/images/favicon-16x16.png??medium:?/images/favicon-32x32.png??apple_touch_icon:?/images/apple-touch-icon.png??safari_pinned_tab:?/images/safari-pinned-tab.svg

配置完成之后刷新頁面，整個頁面的標簽圖標就被更新了。

avatar

將其放置到 themes/next/source/images/avatar.png 路徑，然后在主題 _config.yml 文件下編輯 avatar 的配置，修改為正確的路徑即可。

#?Sidebar?Avataravatar:??#?In?theme?directory?(source/images):?/images/avatar.gif??#?In?site?directory?(source/uploads):?/uploads/avatar.gif??#?You?can?also?use?other?linking?images.??url:?/images/avatar.png??#?If?true,?the?avatar?would?be?dispalyed?in?circle.??rounded:?true??#?If?true,?the?avatar?would?be?rotated?with?the?cursor.??rotated:?true

這里有 rounded 選項是是否顯示圓形，rotated 是是否帶有旋轉效果，大家可以根據喜好選擇是否開啟。

效果如下：

配置完成之后就會顯示頭像。

rss

博客一般是需要 RSS 訂閱的，如果要開啟 RSS 訂閱，這里需要安裝一個插件，叫做 hexo-generator-feed，安裝完成之后，站點會自動生成 RSS Feed 文件，安裝命令如下：

npm?install?hexo-generator-feed?--save

在項目根目錄下運行這個命令，安裝完成之后不需要其他的配置，以后每次編譯生成站點的時候就會自動生成 RSS Feed 文件了。

code

作為程序猿，代碼塊的顯示還是需要很講究的，默認的代碼塊我個人不是特別喜歡，因此我把代碼的顏色修改為黑色，并把復制按鈕的樣式修改為類似 Mac 的樣式，修改 _config.yml 文件的 codeblock 區塊如下：

codeblock:?#?Code?Highlight?theme??#?Available?values:?normal?|?night?|?night?eighties?|?night?blue?|?night?bright??#?See:?https://github.com/chriskempson/tomorrow-theme??highlight_theme:?night?bright??#?Add?copy?button?on?codeblock??copy_button:????enable:?true????#?Show?text?copy?result.????show_result:?true????#?Available?values:?default?|?flat?|?mac????style:?mac

修改前的代碼樣式：

修改后的代碼樣式：

嗯，個人覺得整體看起來逼格高了不少。

top

我們在瀏覽網頁的時候，如果已經看完了想快速返回到網站的上端，一般都是有一個按鈕來輔助的，這里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的設置如下：

back2top:??enable:?true?#?Back?to?top?in?sidebar.??sidebar:?false??#?Scroll?percent?label?in?b2t?button.??scrollpercent:?true

enable 默認為 true，即默認顯示。sidebar 如果設置為 true，按鈕會出現在側欄下方，個人覺得并不是很好看，就取消了，scrollpercent 就是顯示閱讀百分比，個人覺得還不錯，就將其設置為 true。

具體的效果大家可以設置后根據喜好選擇。

reading_process

reading_process，閱讀進度。大家可能注意到有些站點的最上側會出現一個細細的進度條，代表頁面加載進度和閱讀進度，如果大家想設置的話也可以試試，我將其打開了，修改 _config.yml 如下：

reading_progress:??enable:?true?#?Available?values:?top?|?bottom??position:?top??color:?"#222"??height:?2px

設置之后顯示效果如下：

bookmark

書簽，可以根據閱讀歷史記錄，在下次打開頁面的時候快速幫助我們定位到上次的位置，大家可以根據喜好開啟和關閉，我的配置如下：

bookmark:??enable:?false?#?Customize?the?color?of?the?bookmark.??color:?"#222"??#?If?auto,?save?the?reading?progress?when?closing?the?page?or?clicking?the?bookmark-icon.??#?If?manual,?only?save?it?by?clicking?the?bookmark-icon.??save:?auto

github_banner

在一些技術博客上，大家可能注意到在頁面的右上角有個 GitHub 圖標，點擊之后可以跳轉到其源碼頁面，可以為 GitHub Repository 引流，大家如果想顯示的話可以自行選擇打開，我的配置如下：

#?`Follow?me?on?GitHub`?banner?in?the?top-right?corner.github_banner:??enable:?true??permalink:?https://github.com/NightTeam/nightteam.github.io??title:?NightTeam?GitHub

記得修改下鏈接 permalink 和標題 title，顯示效果如下：

可以看到在頁面右上角顯示了 GitHub 的圖標，點擊可以進去到 Repository 頁面。

gitalk

由于 Hexo 的博客是靜態博客，而且也沒有連接數據庫的功能，所以它的評論功能是不能自行集成的，但可以集成第三方的服務。

Next 主題里面提供了多種評論插件的集成，有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 這些。

作為一名程序員，我個人比較喜歡 gitalk，它是利用 GitHub 的 Issue 來當評論，樣式也比較不錯。

首先需要在 GitHub 上面注冊一個 OAuth Application，鏈接為：https://github.com/settings/applications/new，注冊完畢之后拿到 Client ID、Client Secret 就可以了。

首先需要在 _config.yml 文件的 comments 區域配置使用 gitalk：

#?Multiple?Comment?System?Supportcomments:??#?Available?values:?tabs?|?buttons??style:?tabs??#?Choose?a?comment?system?to?be?displayed?by?default.??#?Available?values:?changyan?|?disqus?|?disqusjs?|?facebook_comments_plugin?|?gitalk?|?livere?|?valine?|?vkontakte??active:?gitalk

主要是 comments.active 字段選擇對應的名稱即可。

然后找打 gitalk 配置，添加它的各項配置：

#?Gitalk#?Demo:?https://gitalk.github.io#?For?more?information:?https://github.com/gitalk/gitalkgitalk:??enable:?true??github_id:?NightTeam??repo:?nightteam.github.io?#?Repository?name?to?store?issues??client_id:?{your?client?id}?#?GitHub?Application?Client?ID??client_secret:?{your?client?secret}?#?GitHub?Application?Client?Secret??admin_user:?germey?#?GitHub?repo?owner?and?collaborators,?only?these?guys?can?initialize?gitHub?issues??distraction_free_mode:?true?#?Facebook-like?distraction?free?mode??#?Gitalk's?display?language?depends?on?user's?browser?or?system?environment??#?If?you?want?everyone?visiting?your?site?to?see?a?uniform?language,?you?can?set?a?force?language?value??#?Available?values:?en?|?es-ES?|?fr?|?ru?|?zh-CN?|?zh-TW??language:?zh-CN

配置完成之后 gitalk 就可以使用了，點擊進入文章頁面，就會出現如下頁面：

GitHub 授權登錄之后就可以使用了，評論的內容會自動出現在 Issue 里面。

pangu

我個人有個強迫癥，那就是寫中文和英文的時候中間必須要留有間距，一個簡單直接的方法就是中間加個空格，但某些情況下可能習慣性不加或者忘記加了，這就導致中英文混排并不是那么美觀。

pangu 就是來解決這個問題的，我們只需要在主題里面開啟這個選項，在編譯生成頁面的時候，中英文之間就會自動添加空格，看起來更加美觀。

具體的修改如下：

pangu:?true

math

可能在一些情況下我們需要寫一個公式，比如演示一個算法推導過程，MarkDown 是支持公式顯示的，Hexo 的 Next 主題同樣是支持的。

Next 主題提供了兩個渲染引擎，分別是 mathjax 和 katex，后者相對前者來說渲染速度更快，而且不需要 JavaScript 的額外支持，但后者支持的功能現在還不如前者豐富，具體的對比可以看官方文檔：https://theme-next.org/docs/third-party-services/math-equations。

所以我這里選擇了 mathjax，通過修改配置即可啟用：

math: ?enable: true

# Default (true) will load mathjax / katex script on demand. ?# That is it only render those page which has `mathjax: true` in Front-matter. ?# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE. ?per_page: true

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support. ?mathjax: ? ?enable: true ? ?# See: https://mhchem.github.io/MathJax-mhchem/ ? ?mhchem: true

mathjax 的使用需要我們額外安裝一個插件，叫做 hexo-renderer-kramed，另外也可以安裝 hexo-renderer-pandoc，命令如下：

npm?un?hexo-renderer-marked?--savenpm?i?hexo-renderer-kramed?--save

另外還有其他的插件支持，大家可以到官方文檔查看。

pjax

可能大家聽說過 Ajax，沒聽說過 pjax，這個技術實際上就是利用 Ajax 技術實現了局部頁面刷新，既可以實現 URL 的更換，有可以做到無刷新加載。

要開啟這個功能需要先將 pjax 功能開啟，然后安裝對應的 pjax 依賴庫，首先修改 _config.yml 修改如下：

pjax:?true

然后安裝依賴庫，切換到 next 主題下，然后安裝依賴庫：

$?cd?themes/next$?git?clone?https://github.com/theme-next/theme-next-pjax?source/lib/pjax

這樣 pjax 就開啟了，頁面就可以實現無刷新加載了。

另外關于 Next 主題的設置還有挺多的，這里就介紹到這里了，更多的主題設置大家可以參考官方文檔：https://theme-next.org/docs/。

文章

現在整個站點只有一篇文章，那么我們怎樣來增加其他的文章呢？

這個很簡單，只需要調用 Hexo 提供的命令即可，比如我們要新建一篇「HelloWorld」的文章，命令如下：

hexo?new?hello-world

創建的文章會出現在?source/_posts?文件夾下，是 MarkDown 格式。

在文章開頭通過如下格式添加必要信息：

---title:?標題?#?自動創建，如?hello-worlddate:?日期?#?自動創建，如?2019-09-22?01:47:21tags:?-?標簽1-?標簽2-?標簽3categories:-?分類1-?分類2---

開頭下方撰寫正文，MarkDown 格式書寫即可。

這樣在下次編譯的時候就會自動識別標題、時間、類別等等，另外還有其他的一些參數設置，可以參考文檔：https://hexo.io/zh-cn/docs/writing.html。

標簽頁

現在我們的博客只有首頁、文章頁，如果我們想要增加標簽頁，可以自行添加，這里 Hexo 也給我們提供了這個功能，在根目錄執行命令如下：

hexo?new?page?tags

執行這個命令之后會自動幫我們生成一個 source/tags/index.md 文件，內容就只有這樣子的：

---title:?tagsdate:?2019-09-26?16:44:17---

我們可以自行添加一個 type 字段來指定頁面的類型：

type:?tagscomments:?false

然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面，修改 menu 字段如下：

menu:??home:?/?||?home??#about:?/about/?||?user??tags:?/tags/?||?tags?#categories:?/categories/?||?th??archives:?/archives/?||?archive??#schedule:?/schedule/?||?calendar??#sitemap:?/sitemap.xml?||?sitemap??#commonweal:?/404/?||?heartbeat

這樣重新本地啟動看下頁面狀態，效果如下：

可以看到左側導航也出現了標簽，點擊之后右側會顯示標簽的列表。

分類頁

分類功能和標簽類似，一個文章可以對應某個分類，如果要增加分類頁面可以使用如下命令創建：

hexo?new?page?categories

然后同樣地，會生成一個 source/categories/index.md 文件。

我們可以自行添加一個 type 字段來指定頁面的類型：

type:?categoriescomments:?false

然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面，修改 menu 字段如下：

menu:??home:?/?||?home??#about:?/about/?||?user??tags:?/tags/?||?tags??categories:?/categories/?||?th??archives:?/archives/?||?archive?#schedule:?/schedule/?||?calendar??#sitemap:?/sitemap.xml?||?sitemap??#commonweal:?/404/?||?heartbeat

這樣頁面就會增加分類的支持，效果如下：

搜索頁

很多情況下我們需要搜索全站的內容，所以一個搜索功能的支持也是很有必要的。

如果要添加搜索的支持，需要先安裝一個插件，叫做 hexo-generator-searchdb，命令如下：

npm?install?hexo-generator-searchdb?--save

然后在項目的 _config.yml 里面添加搜索設置如下：

search:??path:?search.xml??field:?post??format:?html??limit:?10000

然后在主題的 _config.yml 里面修改如下：

#?Local?search#?Dependencies:?https://github.com/wzpan/hexo-generator-searchlocal_search:??enable:?true??#?If?auto,?trigger?search?by?changing?input.??#?If?manual,?trigger?search?by?pressing?enter?key?or?search?button.??trigger:?auto??#?Show?top?n?results?per?article,?show?all?results?by?setting?to?-1??top_n_per_article:?5??#?Unescape?html?strings?to?the?readable?one.??unescape:?false??#?Preload?the?search?data?when?the?page?loads.??preload:?false

這里用的是 Local Search，如果想啟用其他是 Search Service 的話可以參考官方文檔：https://theme-next.org/docs/third-party-services/search-services。

404 頁面

另外還需要添加一個 404 頁面，直接在根目錄 source 文件夾新建一個 404.md 文件即可，內容可以仿照如下：

---title: 404 Not Founddate: 2019-09-22 10:41:27---

NightTeam

這里面的一些相關信息和鏈接可以替換成自己的。

增加了這個 404 頁面之后就可以

完成了上面的配置基本就完成了大半了，其實 Hexo 還有很多很多功能，這里就介紹不過來了，大家可以直接參考官方文檔：https://hexo.io/zh-cn/docs/ 查看更多的配置。

部署腳本

最后我這邊還增加了一個簡易版的部署腳本，其實就是重新 gererate 下文件，然后重新部署。在根目錄下新建一個 deploy.sh 的腳本文件，內容如下：

hexo?cleanhexo?generatehexo?deploy

這樣我們在部署發布的時候只需要執行：

sh?deploy.sh

就可以完成博客的更新了，非常簡單。

自定義域名

將頁面修改之后可以用上面的腳本重新部署下博客，其內容便會跟著更新。

另外我們也可以在 GitHub 的 Repository 里面設置域名，找到 Settings，拉到下面，可以看到有個 GitHub Pages 的配置項，如圖所示：

下面有個 custom domain 的選項，輸入你想自定義的域名地址，然后添加 CNAME 解析就好了。

另外下面還有一個 Enforce HTTPS 的選項，GitHub Pages 會在我們配置自定義域名之后自動幫我們配置 HTTPS 服務。剛配置完自定義域名的時候可能這個選項是不可用的，一段時間后等到其可以勾選了，直接勾選即可，這樣整個博客就會變成 HTTPS 的協議的了。

另外有一個值得注意的地方，如果配置了自定義域名，在目前的情況下，每次部署的時候這個自定義域名的設置是會被自動清除的。所以為了避免這個情況，我們需要在項目目錄下面新建一個 CNAME 文件，路徑為 source/CNAME，內容就是自定義域名。

比如我就在 source 目錄下新建了一個 CNAME 文件，內容為：

blog.nightteam.cn

這樣避免了每次部署的時候自定義域名被清除的情況了。

以上就是從零搭建一個 Hexo 博客的流程，希望對大家有幫助。

References

[1]?https://realfavicongenerator.net:?https://realfavicongenerator.net/

人工智能

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。