"NightTeam"，一個(gè)值得加星標(biāo)的公眾號(hào)。

趁著周末，搭建了一下 NightTeam 的官方博客和官方主頁，耗時(shí)數(shù)個(gè)小時(shí)，兩個(gè)站點(diǎn)終于完工了。

由于 NightTeam 的域名是 nightteam.cn，所以這里官方博客使用了二級(jí)域名 blog.nightteam.cn，官方主頁使用了根域名 nightteam.cn，現(xiàn)在兩個(gè)站點(diǎn)都已經(jīng)穩(wěn)定運(yùn)行在 GitHub Pages 上面了，大家如果感興趣可以去看一下。

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

下面是兩個(gè)站點(diǎn)的預(yù)覽圖：

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

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

準(zhǔn)備條件

在這里先跟大家說一些準(zhǔn)備條件，有些同學(xué)可能一聽到搭建博客就望而卻步。弄個(gè)博客網(wǎng)站，不得有臺(tái)服務(wù)器嗎？不得搞數(shù)據(jù)庫嗎？不得注冊域名嗎？沒事，如果都沒有，那照樣是能搭建一個(gè)博客的。

GitHub 是個(gè)好東西啊，它提供了 GitHub Pages 幫助我們來架設(shè)一個(gè)靜態(tài)網(wǎng)站，這就解決了服務(wù)器的問題。

Hexo 這個(gè)博客框架沒有那么重量級(jí)，它是 MarkDown 直接寫文章的，然后 Hexo 可以直接將文章編譯成靜態(tài)網(wǎng)頁文件并發(fā)布，所以這樣文章的內(nèi)容、標(biāo)題、標(biāo)簽等信息就沒必要存數(shù)據(jù)庫里面了，是直接純靜態(tài)頁面了，這就解決了數(shù)據(jù)庫的問題。

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

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

新建項(xiàng)目

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

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

安裝環(huán)境

安裝 Node.js

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

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

安裝 Hexo

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

命令如下：

npm install -g hexo-cli

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

初始化項(xiàng)目

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

首先使用如下命令創(chuàng)建項(xiàng)目：

hexo init {name}

這里的 name 就是項(xiàng)目名，我這里要?jiǎng)?chuàng)建 NightTeam 的博客，我就把項(xiàng)目取名為 nightteam 了，用了純小寫，命令如下：

hexo init nightteam

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

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

hexo generate

可以看到輸出結(jié)果里面包含了 js、css、font 等內(nèi)容，并發(fā)現(xiàn)他們都處在了項(xiàng)目根目錄下的 public 文件夾下面了。

然后我們利用 Hexo 提供的 server 命令把博客在本地運(yùn)行起來，命令如下：

hexo server

運(yùn)行之后命令行輸出如下：

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

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

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

部署

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

那么怎么把這個(gè)頁面部署到 GitHub Pages 上面呢，其實(shí) Hexo 已經(jīng)給我們提供一個(gè)命令，利用它我們可以直接將博客一鍵部署，不需要手動(dòng)去配置服務(wù)器或進(jìn)行其他的各項(xiàng)配置。

部署命令如下：

hexo deploy

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

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

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

我的就修改為如下內(nèi)容：

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

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

Deployer not found: git

好，那就讓我們安裝下這個(gè)插件，在項(xiàng)目目錄下執(zhí)行安裝命令如下：

npm install hexo-deployer-git --save

安裝成功之后，執(zhí)行部署命令：

hexo deploy

運(yùn)行結(jié)果類似如下：

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

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

這時(shí)候我們?nèi)?GitHub 上面看看 Hexo 上傳了什么內(nèi)容，打開之后可以看到 master 分支有了這樣的內(nèi)容：

仔細(xì)看看，這實(shí)際上是博客文件夾下面的 public 文件夾下的所有內(nèi)容，Hexo 把編譯之后的靜態(tài)頁面內(nèi)容上傳到 GitHub 的 master 分支上面去了。

這時(shí)候可能就有人有疑問了，那我博客的源碼也想放到 GitHub 上面怎么辦呢？其實(shí)很簡單，新建一個(gè)其他的分支就好了，比如我這邊就新建了一個(gè) 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 上再切換下默認(rèn)分支，比如我就把默認(rèn)的分支設(shè)置為了 source，當(dāng)然不換也可以。

配置站點(diǎn)信息

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

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

修改根目錄下的 _config.yml 文件，找到 Site 區(qū)域，這里面可以配置站點(diǎn)標(biāo)題 title、副標(biāo)題 subtitle 等內(nèi)容、關(guān)鍵字 keywords 等內(nèi)容，比如我的就修改為如下內(nèi)容：

# Sitetitle: NightTeamsubtitle: 一個(gè)專注技術(shù)的組織description: 涉獵的主要編程語言為 Python、Rust、C++、Go，領(lǐng)域涵蓋爬蟲、深度學(xué)習(xí)、服務(wù)研發(fā)和對象存儲(chǔ)等。keywords: "Python, Rust, C++, Go, 爬蟲, 深度學(xué)習(xí), 服務(wù)研發(fā), 對象存儲(chǔ)"author: NightTeam

這里大家可以參照格式把內(nèi)容改成自己的。

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

language: zh-CN

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

修改主題

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

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

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

首先命令行進(jìn)入到項(xiàng)目的根目錄，執(zhí)行如下命令即可：

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

執(zhí)行完畢之后 Next 主題的源碼就會(huì)出現(xiàn)在項(xiàng)目的 themes/next 文件夾下。

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

theme: next

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

主題配置

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

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

樣式

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

scheme: Pisces

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

另外還有幾個(gè)可選項(xiàng)，比如：

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

大家可以自行根據(jù)喜好選擇。

favicon

favicon 就是站點(diǎn)標(biāo)簽欄的小圖標(biāo)，默認(rèn)是用的 Hexo 的小圖標(biāo)，如果我們有站點(diǎn) Logo 的圖片的話，我們可以自己定制小圖標(biāo)。

但這并不意味著我們需要自己用 PS 自己來設(shè)計(jì)，已經(jīng)有一個(gè)網(wǎng)站可以直接將圖片轉(zhuǎn)化為站點(diǎn)小圖標(biāo)，站點(diǎn)鏈接為：https://realfavicongenerator.net^[1]，到這里上傳一張圖，便可以直接打包下載各種尺寸和適配不同設(shè)備的小圖標(biāo)。

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

然后在配置文件里面找到 favicon 配置項(xiàng)，把一些相關(guān)路徑配置進(jìn)去即可，示例如下：

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

配置完成之后刷新頁面，整個(gè)頁面的標(biāo)簽圖標(biāo)就被更新了。

avatar

avatar 這個(gè)就類似站點(diǎn)的頭像，如果設(shè)置了這個(gè)，會(huì)在站點(diǎn)的作者信息旁邊額外顯示一個(gè)頭像，比如我這邊有一張 avatar.png 圖片：

將其放置到 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 選項(xiàng)是是否顯示圓形，rotated 是是否帶有旋轉(zhuǎn)效果，大家可以根據(jù)喜好選擇是否開啟。

效果如下：

配置完成之后就會(huì)顯示頭像。

rss

博客一般是需要 RSS 訂閱的，如果要開啟 RSS 訂閱，這里需要安裝一個(gè)插件，叫做 hexo-generator-feed，安裝完成之后，站點(diǎn)會(huì)自動(dòng)生成 RSS Feed 文件，安裝命令如下：

npm install hexo-generator-feed --save

在項(xiàng)目根目錄下運(yùn)行這個(gè)命令，安裝完成之后不需要其他的配置，以后每次編譯生成站點(diǎn)的時(shí)候就會(huì)自動(dòng)生成 RSS Feed 文件了。

code

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

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

修改前的代碼樣式：

修改后的代碼樣式：

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

top

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

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

enable 默認(rèn)為 true，即默認(rèn)顯示。sidebar 如果設(shè)置為 true，按鈕會(huì)出現(xiàn)在側(cè)欄下方，個(gè)人覺得并不是很好看，就取消了，scrollpercent 就是顯示閱讀百分比，個(gè)人覺得還不錯(cuò)，就將其設(shè)置為 true。

具體的效果大家可以設(shè)置后根據(jù)喜好選擇。

reading_process

reading_process，閱讀進(jìn)度。大家可能注意到有些站點(diǎn)的最上側(cè)會(huì)出現(xiàn)一個(gè)細(xì)細(xì)的進(jìn)度條，代表頁面加載進(jìn)度和閱讀進(jìn)度，如果大家想設(shè)置的話也可以試試，我將其打開了，修改 _config.yml 如下：

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

設(shè)置之后顯示效果如下：

bookmark

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

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

在一些技術(shù)博客上，大家可能注意到在頁面的右上角有個(gè) GitHub 圖標(biāo)，點(diǎn)擊之后可以跳轉(zhuǎn)到其源碼頁面，可以為 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 和標(biāo)題 title，顯示效果如下：

可以看到在頁面右上角顯示了 GitHub 的圖標(biāo)，點(diǎn)擊可以進(jìn)去到 Repository 頁面。

gitalk

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

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

作為一名程序員，我個(gè)人比較喜歡 gitalk，它是利用 GitHub 的 Issue 來當(dāng)評論，樣式也比較不錯(cuò)。

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

首先需要在 _config.yml 文件的 comments 區(qū)域配置使用 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 字段選擇對應(yīng)的名稱即可。

然后找到 gitalk 配置，添加它的各項(xiàng)配置：

# 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 就可以使用了，點(diǎn)擊進(jìn)入文章頁面，就會(huì)出現(xiàn)如下頁面：

GitHub 授權(quán)登錄之后就可以使用了，評論的內(nèi)容會(huì)自動(dòng)出現(xiàn)在 Issue 里面。

pangu

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

pangu 就是來解決這個(gè)問題的，我們只需要在主題里面開啟這個(gè)選項(xiàng)，在編譯生成頁面的時(shí)候，中英文之間就會(huì)自動(dòng)添加空格，看起來更加美觀。

具體的修改如下：

pangu: true

math

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

Next 主題提供了兩個(gè)渲染引擎，分別是 mathjax 和 katex，后者相對前者來說渲染速度更快，而且不需要 JavaScript 的額外支持，但后者支持的功能現(xiàn)在還不如前者豐富，具體的對比可以看官方文檔：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 的使用需要我們額外安裝一個(gè)插件，叫做 hexo-renderer-kramed，另外也可以安裝 hexo-renderer-pandoc，命令如下：

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

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

pjax

可能大家聽說過 Ajax，沒聽說過 pjax，這個(gè)技術(shù)實(shí)際上就是利用 Ajax 技術(shù)實(shí)現(xiàn)了局部頁面刷新，既可以實(shí)現(xiàn) URL 的更換，又可以做到無刷新加載。

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

pjax: true

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

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

這樣 pjax 就開啟了，頁面就可以實(shí)現(xiàn)無刷新加載了。

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

文章

現(xiàn)在整個(gè)站點(diǎn)只有一篇文章，那么我們怎樣來增加其他的文章呢？

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

hexo new hello-world

創(chuàng)建的文章會(huì)出現(xiàn)在?source/_posts?文件夾下，是 MarkDown 格式。

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

---title: 標(biāo)題 # 自動(dòng)創(chuàng)建，如 hello-worlddate: 日期 # 自動(dòng)創(chuàng)建，如 2019-09-22 01:47:21tags: - 標(biāo)簽1- 標(biāo)簽2- 標(biāo)簽3categories:- 分類1- 分類2---

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

這樣在下次編譯的時(shí)候就會(huì)自動(dòng)識(shí)別標(biāo)題、時(shí)間、類別等等，另外還有其他的一些參數(shù)設(shè)置，可以參考文檔：https://hexo.io/zh-cn/docs/writing.html。

標(biāo)簽頁

現(xiàn)在我們的博客只有首頁、文章頁，如果我們想要增加標(biāo)簽頁，可以自行添加，這里 Hexo 也給我們提供了這個(gè)功能，在根目錄執(zhí)行命令如下：

hexo new page tags

執(zhí)行這個(gè)命令之后會(huì)自動(dòng)幫我們生成一個(gè) source/tags/index.md 文件，內(nèi)容就只有這樣子的：

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

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

type: tagscomments: false

然后再在主題的 _config.yml 文件將這個(gè)頁面的鏈接添加到主菜單里面，修改 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

接著重新本地啟動(dòng)看下頁面狀態(tài)，效果如下：

可以看到左側(cè)導(dǎo)航也出現(xiàn)了標(biāo)簽，點(diǎn)擊之后右側(cè)會(huì)顯示標(biāo)簽的列表。

分類頁

分類功能和標(biāo)簽類似，一個(gè)文章可以對應(yīng)某個(gè)分類，如果要增加分類頁面可以使用如下命令創(chuàng)建：

hexo new page categories

然后同樣的，會(huì)生成一個(gè) source/categories/index.md 文件。

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

type: categoriescomments: false

然后再在主題的 _config.yml 文件將這個(gè)頁面的鏈接添加到主菜單里面，修改 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

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

搜索頁

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

如果要添加搜索功能，需要先安裝一個(gè)插件，叫做 hexo-generator-searchdb，命令如下：

npm install hexo-generator-searchdb --save

然后在項(xiàng)目的 _config.yml 里面添加搜索設(shè)置如下：

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 頁面

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

---title: 404 Not Founddate: 2019-09-22 10:41:27---對不起，您所訪問的頁面不存在或者已刪除。您可以<a href="https://blog.nightteam.cn>">點(diǎn)擊此處</a>返回首頁。center><blockquote class="blockquote-center"> NightTeamblockquote>

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

增加了這個(gè) 404 頁面之后就可以

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

部署腳本

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

hexo cleanhexo generatehexo deploy

這樣我們在部署發(fā)布的時(shí)候只需要執(zhí)行：

sh deploy.sh

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

自定義域名

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

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

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

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

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

比如我就在 source 目錄下新建了一個(gè) CNAME 文件，內(nèi)容為：

blog.nightteam.cn

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

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

References

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

文章作者：「夜幕團(tuán)隊(duì) NightTeam」 - 崔慶才

文章審閱：「夜幕團(tuán)隊(duì) NightTeam」 - Loco

夜幕團(tuán)隊(duì)成立于 2019 年，團(tuán)隊(duì)包括崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東。

涉獵的編程語言包括但不限于 Python、Rust、C++、Go，領(lǐng)域涵蓋爬蟲、深度學(xué)習(xí)、服務(wù)研發(fā)、對象存儲(chǔ)等。團(tuán)隊(duì)非正亦非邪，只做認(rèn)為對的事情，請大家小心。

總結(jié)

以上是生活随笔為你收集整理的github项目怎么运行_利用 GitHub 从零开始搭建一个博客的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。