HexoGithub：個(gè)人博客網(wǎng)站搭建完全教程(看這篇就夠了)

2024-03-23 分類：網(wǎng)站建設(shè)

個(gè)人博客網(wǎng)站搭建完全教程(看這篇就夠了)閱讀須知

注意，這篇文章篇幅較長，主要針對新手，每一步很詳細(xì)，所以可能會(huì)顯得比較啰嗦，建議基礎(chǔ)比較好小伙伴根據(jù)右側(cè)目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝( ⊙ o ⊙ )。教程內(nèi)容隨意復(fù)制使用，引用的話請加一個(gè)參考鏈接，謝謝！

博客開源

倒騰了一兩周總算把個(gè)人博客網(wǎng)站完善了，目前這個(gè)版本使用應(yīng)該是夠了，當(dāng)然還有一些優(yōu)化項(xiàng)和功能增加后續(xù)在慢慢更新，為了回饋開源，今天準(zhǔn)備把我自己修改完善的blog網(wǎng)站源代碼開源。這不是生成后的網(wǎng)頁文件，是您可以直接使用的源碼，您只需要把博客相關(guān)信息換成您自己的就可以部署了，對于新手或者不懂編程的小伙伴來說，簡直是福音，極大簡化了您構(gòu)建博客的工作量和復(fù)雜度，每個(gè)人都可以下載并修改成自己喜歡樣式！如果你有修改想法，歡迎PR！最后，我們還是給這個(gè)開源小項(xiàng)目取個(gè)名字吧，就叫hexo-blog-fly吧，怎么樣？<<<<<源代碼下載>>>>>

本博客基于Hexo框架搭建，用到hexo-theme-matery主題,并在此基礎(chǔ)之上做了很多修改，修復(fù)了一些bug，增加了一些新的特性和功能，博客地址：https://shw2018.github.io，博客演示：sunhwee.com。

簡單使用方法：

star本項(xiàng)目倉庫o安裝Git, 安裝nodeJS你可以直接fork一份源碼到你的倉庫，clone到本地在本地博客倉庫運(yùn)行npm i命令安裝依賴包修改配置信息，改成自己的信息運(yùn)行命令hexo clean（清除生成文件），hexo g（生成網(wǎng)頁），hexo s（本地預(yù)覽），hexo d（部署）

更多詳情教程，強(qiáng)烈推薦看我寫的：Hexo+Github博客搭建完全教程

有什么問題可以在文章最后評論區(qū)留言和討論，當(dāng)然，歡迎文章最后打賞投幣，請博主一杯冰闊樂，笑～

最后，如果項(xiàng)目和教程對你有所幫助或者你看見了還算比較喜歡，歡迎給我github項(xiàng)目倉庫點(diǎn)個(gè)star，謝謝您！

前言

去年在博客園注冊了自己的第一個(gè)博客，當(dāng)時(shí)初衷就是想拿來作為自己的在線筆記本，做做學(xué)習(xí)記錄，分享一些學(xué)到的東西，使用第三方提供的博客服務(wù)其實(shí)也挺方便，現(xiàn)在市面上提供類似服務(wù)的博客網(wǎng)站也很多，如CSDN，博客園，簡書等平臺，可以直接在上面發(fā)表，用戶交互做的好，寫的文章百度也能搜索的到。但是缺點(diǎn)是比較不自由，會(huì)受到平臺的各種限制和惡心的廣告，個(gè)性化不足。而自己購買域名和服務(wù)器，搭建博客的成本實(shí)在是太高了，不光是說這些購買成本，單單是花力氣去自己搭這么一個(gè)網(wǎng)站，還要定期的維護(hù)它，對于我們大多數(shù)人來說，也是沒有這樣的精力和時(shí)間。那么，我們能不能自己定制一個(gè)自己喜歡的個(gè)性化博客，同時(shí)也不用付出太高的成本啦？

這就引出了第三種選擇，基于開源框架搭建博客，然后直接在github page平臺上托管我們的博客。這樣就可以安心的來寫作，又不需要定期維護(hù)，基于這個(gè)想法，今年8月初的時(shí)候開始搭建第一個(gè)屬于自己的獨(dú)立博客，前后斷續(xù)弄了近一周，到現(xiàn)在稍微有點(diǎn)模樣了。我想可能有很多小伙伴應(yīng)該也想過搭建一個(gè)自己的博客，當(dāng)然，網(wǎng)上也有一堆詳細(xì)教程。寫這篇博客的目的大概有兩個(gè)，第一個(gè)是當(dāng)做自己的搭建記錄，方便以后自己隨時(shí)查看提示修改，第二個(gè)是稍稍總結(jié)一下具體的搭建步驟以及一些支持個(gè)性化定制的博客源碼修改的教程，稍稍分享一下這些修改經(jīng)驗(yàn)，當(dāng)然，更多的一些個(gè)性化操作需要你自己以后在這個(gè)基礎(chǔ)上慢慢去摸索，有些寫的不太好的地方還希望看到的小伙伴多多包涵。

博客初步的頁面效果可以看一下我的博客：sunhwee.com，歡迎大家支持。

本博客基于Hexo，所以首先要了解一下我們搭建博客所要用到的框架。Hexo是高效的靜態(tài)網(wǎng)站生成框架，它基于Node.js，快速，簡單且功能強(qiáng)大，是搭建博客的選框架。大家可以進(jìn)入hexo官網(wǎng)進(jìn)行詳細(xì)查看，因?yàn)镠exo的創(chuàng)建者是臺灣人，對中文的支持很友好，可以選擇中文進(jìn)行查看。通過Hexo，你可以直接使用Markdown語法來撰寫博客。相信很多小伙伴寫工程都寫過README.md文件吧，對，就是這個(gè)格式的！寫完后只需兩三條命令即可將生成的網(wǎng)頁上傳到github或者coding等代碼管理托管平臺，然后別人就可以瀏覽你的博客網(wǎng)頁啦。是不是很簡單？你無需關(guān)心網(wǎng)頁源代碼的具體生成細(xì)節(jié)，只需要用心寫好你的博客文章內(nèi)容就行了。

簡單總結(jié)：Hexo, 產(chǎn)品成熟，使用簡單，功能強(qiáng)大，有豐富的各種插件資源；但，像發(fā)布后臺、站內(nèi)搜索，評論系統(tǒng)類似訴求，雖然有對應(yīng)的工具，但也需要自己折騰下，后續(xù)我們一步一步介紹。

教程大致分三個(gè)部分，

第一部分：hexo的初級搭建還有部署到github page上，以及個(gè)人域名的綁定。第二部分：hexo的基本配置，更換主題，實(shí)現(xiàn)多終端工作，以及在coding page部署實(shí)現(xiàn)國內(nèi)外分流第三部分：hexo添加各種功能，包括搜索的SEO，閱讀量統(tǒng)計(jì)，訪問量統(tǒng)計(jì)和評論系統(tǒng)等。第一部分搭建

hexo的初級搭建還有部署到github page上，以及個(gè)人域名的綁定。

Hexo搭建步驟1.安裝Git2.安裝Node.js3.安裝Hexo4.GitHub創(chuàng)建個(gè)人倉庫5.生成SSH添加到GitHub6.將hexo部署到GitHub7.設(shè)置個(gè)人域名8.發(fā)布文章1. 安裝Git

為了把本地的網(wǎng)頁文件上傳到github上面去，需要用到工具———Git[下載地址]。Git是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)，可以有效、高速的處理從很小到非常大的項(xiàng)目版本管理。Git非常強(qiáng)大，建議每個(gè)人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以看一下。Git教程

windows：到git官網(wǎng)上下載.exe文件,Download git,安裝選項(xiàng)還是全部默認(rèn)，只不過最后一步添加路徑時(shí)選擇Use Git from the Windows Command Prompt，這樣我們就可以直接在命令提示符里打開git了。

順便說一下，windows在git安裝完后，就可以直接使用git bash來敲命令行了，不用自帶的cmd，cmd有點(diǎn)難用。

linux：對linux來說實(shí)在是太簡單了，因?yàn)樽钤绲膅it就是在linux上編寫的，只需要一行代碼

sudo apt-getinstall git

安裝完成后在命令提示符中輸入git --version來查看一下版本驗(yàn)證是否安裝成功。

2. 安裝nodejs

Hexo是基于node.js編寫的，所以需要安裝一下node.js和里面的npm工具。

windows：下載穩(wěn)定版或者最新版都可以Node.js，安裝選項(xiàng)全部默認(rèn)，一路點(diǎn)擊Next。最后安裝好之后，按Win+R打開命令提示符，輸入node -v和npm -v，如果出現(xiàn)版本號，那么就安裝成功了。

linux：命令行安裝：

sudo apt-getinstallnodejs sudo apt-getinstallnpm

不過不推薦命令行安裝，有時(shí)候有問題，建議直接到官網(wǎng)去下載編譯好的壓縮文件，如下所示:

然后解壓到你指定的文件夾即可，比如我解壓到我系統(tǒng)的/home/shw/MySoftwares目錄下了，如圖:

注意本壓縮包是.tar.xz格式的，需要兩次解壓

配置一下環(huán)境變量

sudovim /etc/profile

復(fù)制下面兩行到剛打開的profile文件最底部(注意node的安裝地址/home/shw/MySoftwares/node-v12.8.0-linux-x64換成自己的)：

exportNODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64exportPATH=$PATH:$NODE_HOME/bin

保存后退出，再執(zhí)行下面命令將環(huán)境變量生效：

source/etc/profile

將目錄軟鏈接到全局環(huán)境下（命令后面的/usr/local/bin/node是固定的）

sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/node /usr/local/bin/node sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/npm /usr/local/bin/npm

這樣安裝好了以后使用npm安裝的包(比如：ionic serve)，使用包的命令時(shí)可能會(huì)提示找不到命令，沒關(guān)系，在用戶目錄下終端執(zhí)行下面命令(固定寫法)：

echo-e"export PATH=$(npm prefix -g)/bin:$PATH">> ~/.bashrc &&source~/.bashrc

這樣我們在所有用戶下，都可以使用npm，也可以使用npm安裝的包的命令。成功地將nodejs安裝并配置到全局環(huán)境下。

安裝完后，打開命令行終端，輸入:

node-vnpm-v

檢查一下有沒有安裝成功

添加國內(nèi)鏡像源

如果沒有梯子的話，可以使用阿里的國內(nèi)鏡像進(jìn)行加速。

npmconfig set registry https://registry.npm.taobao.org3. 安裝Hexo

前面git和nodejs安裝好后，就可以安裝hexo了，你可以先創(chuàng)建一個(gè)文件夾MyBlog，用來存放自己的博客文件，然后cd到這個(gè)文件夾下（或者在這個(gè)文件夾下直接右鍵git bash打開）。

比如我的博客文件都存放在D:\Study\MyBlog目錄下。

在該目錄下右鍵點(diǎn)擊Git Bash Here，打開git的控制臺窗口，以后我們所有的操作都在git控制臺進(jìn)行，就不用Windows自帶的cmd了。

定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo?？赡軙?huì)有幾個(gè)報(bào)錯(cuò)，無視它就行。

npminstall -g hexo-cli

安裝完后輸入hexo -v驗(yàn)證是否安裝成功。

至此hexo就安裝完了。

接下來初始化一下hexo,即初始化我們的網(wǎng)站，輸入hexo init初始化文件夾

hexoinitMyBlog

這個(gè)MyBlog可以自己取什么名字都行，然后，接著輸入npm install安裝必備的組件。

cdMyBlog //進(jìn)入這個(gè)MyBlog文件夾npminstall

新建完成后，指定文件夾MyBlog目錄下載：

node_modules:依賴包public：存放生成的頁面scaffolds：生成文章的一些模板source：用來存放你的文章themes：主題**_config.yml:博客的配置文件**

這樣本地的網(wǎng)站配置也弄好了，輸入hexo g生成靜態(tài)網(wǎng)頁，然后輸入hexo s打開本地服務(wù)器，

hexoghexoserver(或者簡寫:hexo s）)

然后瀏覽器打開http://localhost:4000/，就可以看到我們的博客啦，效果如下：

按ctrl+c關(guān)閉本地服務(wù)器。

4. 注冊Github賬號創(chuàng)建個(gè)人倉庫

接下來就去注冊一個(gè)github賬號，用來存放我們的網(wǎng)站。大多數(shù)小伙伴應(yīng)該都有了吧，作為一個(gè)合格的程序猿（媛）還是要有一個(gè)的。

打開https://github.com/，新建一個(gè)項(xiàng)目倉庫New repository，如下所示：

然后如下圖所示，輸入自己的項(xiàng)目名字，后面一定要加.github.io后綴，README初始化也要勾上。

要?jiǎng)?chuàng)建一個(gè)和你用戶名相同的倉庫，后面加.http://github.io，只有這樣，將來要部署到GitHub page的時(shí)候，才會(huì)被識別，也就是http://xxxx.github.io，其中xxx就是你注冊GitHub的用戶名。例如我的：http://shw2018.github.io

5. 生成SSH添加到GitHub

生成SSH添加到GitHub，連接Github與本地。右鍵打開git bash，然后輸入下面命令：

git config --globaluser.name"yourname"git config --globaluser.email"youremail"

這里的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應(yīng)它的賬戶。例如我的：

git config --globaluser.name"shw2018"git config --globaluser.email"hwsun@std.uestc.edu.cn"

可以用以下兩條，檢查一下你有沒有輸對

gitconfiguser.namegitconfiguser.email

然后創(chuàng)建SSH,一路回車

ssh，簡單來講，就是一個(gè)秘鑰，其中，id_rsa是你這臺電腦的私人秘鑰，不能給別人看的，id_rsa.pub是公共秘鑰，可以隨便給別人看。把這個(gè)公鑰放在GitHub上，這樣當(dāng)你鏈接GitHub自己的賬戶時(shí)，它就會(huì)根據(jù)公鑰匹配你的私鑰，當(dāng)能夠相互匹配時(shí)，才能夠順利的通過git上傳你的文件到GitHub上。

ssh-keygen -t rsa -C"youremail"

這個(gè)時(shí)候它會(huì)告訴你已經(jīng)生成了.ssh的文件夾。在你的電腦中找到這個(gè)文件夾?；蛘遟it bash中輸入

cat ~/.ssh/id_rsa.pub

將輸出的內(nèi)容復(fù)制到框中，點(diǎn)擊確定保存。

打開github，在頭像下面點(diǎn)擊settings，再點(diǎn)擊SSH and GPG keys，新建一個(gè)SSH，名字隨便取一個(gè)都可以，把你的id_rsa.pub里面的信息復(fù)制進(jìn)去。如圖：

在git bash輸入ssh -T git@github.com，如果如下圖所示，出現(xiàn)你的用戶名，那就成功了。

6. 將hexo部署到GitHub

這一步，我們就可以將hexo和GitHub關(guān)聯(lián)起來，也就是將hexo生成的文章部署到GitHub上，打開博客根目錄下的_config.yml文件，這是博客的配置文件，在這里你可以修改與博客配置相關(guān)的各種信息。

修改最后一行的配置：

deploy:type: gitrepository:https://github.com/shw2018/shw2018.github.iobranch: master

repository修改為你自己的github項(xiàng)目地址即可，就是部署時(shí)，告訴工具，將生成網(wǎng)頁通過git方式上傳到你對應(yīng)的鏈接倉庫中。

這個(gè)時(shí)候需要先安裝deploy-git，也就是部署的命令,這樣你才能用命令部署到GitHub。

npminstallhexo-deployer-git--save

然后

hexocleanhexogeneratehexodeploy

其中hexo clean清除了你之前生成的東西，也可以不加。hexo generate顧名思義，生成靜態(tài)文章，可以用hexo g縮寫，hexo deploy部署文章，可以用hexo d縮寫

注意deploy時(shí)可能要你輸入username和password。

得到下圖就說明部署成功了，過一會(huì)兒就可以在http://yourname.github.io 這個(gè)網(wǎng)站看到你的博客了！！

7. 設(shè)置個(gè)人域名

不過，這一步不是必要的，如果目前還不想買域名可以先跳過，繼續(xù)看后面的，以后想買域名了在還看這塊

首先你得購買一個(gè)專屬域名，xx云都能買，看你個(gè)人喜好了。

這篇以騰訊云為例，騰訊云官網(wǎng)購買：

然后實(shí)名認(rèn)證后進(jìn)入騰訊云控制臺，點(diǎn)云解析進(jìn)去，找到你剛買的域名，點(diǎn)進(jìn)去添加兩條解析記錄，如下圖所示：

然后打開你的github博客項(xiàng)目，點(diǎn)擊settings，拉到下面Custom domain處，填上你自己的域名，保存：

這時(shí)候你的項(xiàng)目根目錄應(yīng)該會(huì)出現(xiàn)一個(gè)名為CNAME的文件了。如果沒有的話，打開你本地博客/source目錄，我的是D:\Study\MyBlog\source，新建CNAME文件，注意沒有后綴。然后在里面寫上你的域名，保存。最后運(yùn)行hexo g、hexo d上傳到github。

過不了多久，再打開你的瀏覽器，輸入你自己的專屬域名，就可以看到搭建的網(wǎng)站啦！

8. 寫文章、發(fā)布文章

首先在博客根目錄下右鍵打開git bash，安裝一個(gè)擴(kuò)展npm i hexo-deployer-git。

然后輸入hexo new post "article title"，新建一篇文章。

然后打開D:\Study\MyBlog\source\_posts的目錄，可以發(fā)現(xiàn)下面多了一個(gè)文件夾和一個(gè).md文件，一個(gè)用來存放你的圖片等數(shù)據(jù)，另一個(gè)就是你的文章文件啦。你可以會(huì)直接在vscode里面編寫markdown文件，可以實(shí)時(shí)預(yù)覽，也可以用用其他編輯md文件的軟件的工具編寫。編寫完markdown文件后，根目錄下輸入hexo g生成靜態(tài)網(wǎng)頁，然后輸入hexo s可以本地預(yù)覽效果，最后輸入hexo d上傳到github上。這時(shí)打開你的github.io主頁就能看到發(fā)布的文章啦。

到這兒基本第一部分就完成了，已經(jīng)完整搭建起一個(gè)比較簡陋的個(gè)人博客了，接下來我們就可以對我們的博客進(jìn)行個(gè)性化定制了。

第二部分定制

我們要定制自己的博客的話，首先就要來了解一下Hexo博客的一些目錄和文件的作用，以及如何平滑更換漂亮的主題模板并加入自己的定制源代碼實(shí)現(xiàn)個(gè)性化定制

1. Hexo相關(guān)目錄文件1.1 博客目錄構(gòu)成介紹

從上圖可以看出，博客的目錄結(jié)構(gòu)如下：

-node_modules-public-scaffolds-source-_data-_posts-about-archives-categories-friends-tags-themes

node_modules是node.js各種庫的目錄，public是生成的網(wǎng)頁文件目錄，scaffolds里面就三個(gè)文件，存儲著新文章和新頁面的初始設(shè)置，source是我們最常用到的一個(gè)目錄，里面存放著文章、各類頁面、圖像等文件，themes存放著主題文件，一般也用不到。

我們平時(shí)寫文章只需要關(guān)注source/_posts這個(gè)文件夾就行了。

1.2 hexo基本配置

在文件根目錄下的_config.yml，就是整個(gè)hexo框架的配置文件了?？梢栽诶锩嫘薷拇蟛糠值呐渲谩Ｔ敿?xì)可參考官方的配置描述。

1.2.1 網(wǎng)站

參數(shù)描述title網(wǎng)站標(biāo)題subtitle網(wǎng)站副標(biāo)題description網(wǎng)站描述author您的名字language網(wǎng)站使用的語言timezone網(wǎng)站時(shí)區(qū)。Hexo默認(rèn)使用您電腦的時(shí)區(qū)。時(shí)區(qū)列表。比如說：America/New_York, Japan, 和UTC。

在這里，你需要把url改成你的網(wǎng)站域名。

permalink，也就是你生成某個(gè)文章時(shí)的那個(gè)鏈接格式。

比如我新建一個(gè)文章叫temp.md，那么這個(gè)時(shí)候他自動(dòng)生成的地址就是http://yoursite.com/2018/09/05/temp。

以下是官方給出的示例，關(guān)于鏈接的變量還有很多，需要的可以去官網(wǎng)上查找永久鏈接。

參數(shù)結(jié)果:year/:month/:day/:title/2019/08/10/hello-world:year-:month-:day-:title.html2019-08-10-hello-world.html:category/:titlefoo/bar/hello-world

再往下翻，中間這些都默認(rèn)就好了。

theme: landscap

theme就是選擇什么主題，也就是在themes這個(gè)文件夾下，在官網(wǎng)上有很多個(gè)主題，默認(rèn)給你安裝的是lanscape這個(gè)主題。當(dāng)你需要更換主題時(shí)，在官網(wǎng)上下載，把主題的文件放在themes文件夾下，再修改這個(gè)主題參數(shù)就可以了。

1.2.3 Front-matter

Front-matter是md文件最上方以---分隔的區(qū)域，用于指定個(gè)別文件的變量，舉例來說：

title:Hexo+Github博客搭建記錄date:2019-08-1021:44:44

下是預(yù)先定義的參數(shù)，您可在模板中使用這些參數(shù)值并加以利用。

其中，分類和標(biāo)簽需要區(qū)別一下，分類具有順序性和層次性，也就是說Foo，Bar不等于Bar，F(xiàn)oo；而標(biāo)簽沒有順序和層次。

---title:Hexo+Github博客搭建記錄date:2019-08-1021:44:44author:洪衛(wèi)img:/medias/banner/7.jpgcoverImg:/medias/banner/7.jpgtop:truecover:truetoc:truepassword:5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110mathjax:truesummary:這是你自定義的文章摘要內(nèi)容，如果這個(gè)屬性有值，文章卡片摘要就顯示這段文字，否則程序會(huì)自動(dòng)截取文章的部分內(nèi)容作為摘要tags:-Hexo-Github-博客categories:-軟件安裝與配置---1.2.4 layout（布局）

1.2.4.1 post

當(dāng)你每一次使用代碼

hexonewXXX

它其實(shí)默認(rèn)使用的是post這個(gè)布局，也就是在source文件夾下的_post里面。

Hexo有三種默認(rèn)布局：post、page和draft，它們分別對應(yīng)不同的路徑，而您自定義的其他布局和post相同，都將儲存到source/_posts文件夾。

而new這個(gè)命令其實(shí)是：

hexonew[layout] </code></pre>只不過這個(gè)layout默認(rèn)是post罷了。1.2.4.2 page如果你想另起一頁，那么可以使用<pre id="b414940a-ea5a-4251-9525-4998f15b95a9"><code id="e38a4ee4-ac5d-4035-b541-69ab0b283c34">hexonewpage newpage</code></pre>系統(tǒng)會(huì)自動(dòng)給你在source文件夾下創(chuàng)建一個(gè)newpage文件夾，以及newpage文件夾中的index.md，這樣你訪問的newpage對應(yīng)的鏈接就是http://xxx.xxx/newpage1.2.4.3 draftdraft是草稿的意思，也就是你如果想寫文章，又不希望被看到，那么可以<pre id="e1f8477c-920b-43a9-9f87-c23ccb24cbd9"><code id="50872aa1-0abf-4c5f-ab41-73ec87af3d66">hexonewdraft newdraft</code></pre>這樣會(huì)在source/_draft中新建一個(gè)newdraft.md文件，如果你的草稿文件寫的過程中，想要預(yù)覽一下，那么可以使用<pre id="9c8ff9d3-eb4a-4622-baaa-d9ceb6ee4844"><code id="0bdd0533-5a43-4f9e-bd50-039bfa5a4c9a">hexo server--draft</code></pre>在本地端口中開啟服務(wù)預(yù)覽。如果你的草稿文件寫完了，想要發(fā)表到post中，<pre id="6f000c24-dc6d-48c2-b8b7-c583e309adc4"><code id="142fcb80-581e-4341-ace7-13bd35172798">hexopublish draft newdraft</code></pre>就會(huì)自動(dòng)把newdraft.md發(fā)送到post中。<h1 id="2d867380-7d6c-4e72-b191-d48196a47c98">2. 更換主題</h1><hr id="18388e95-fd96-4b4b-b9e0-964441928e9a"></hr>我們在了解Hexo博客文件基礎(chǔ)之后，知道主題文件就放在themes文件下，那么我們就可以去Hexo官網(wǎng)下載喜歡的主題，復(fù)制進(jìn)去然后修改參數(shù)即可。網(wǎng)上大多數(shù)主題都是github排名第一的Next主題，但是我個(gè)人不是很喜歡，我在網(wǎng)上看到一個(gè)主題感覺還不錯(cuò)：hexo-theme-matery，地址在傳送門。這個(gè)主題看著比較漂亮，并且響應(yīng)式比較友好，點(diǎn)起來很舒服，功能也比較很多。<blockquote id="accd9ed5-d447-4e69-b5e9-24efb1809ebe">當(dāng)然，人各有異，這個(gè)主題風(fēng)格也不一定是你喜歡，那么你也可以跟著這教程類似的方法替換成你喜歡的就行了。</blockquote><blockquote id="a4beea50-7547-4f32-90d5-0427b2e58b01">特性：</blockquote><ul id="7187cd56-da22-4c24-95cc-d8ad5eea33db"><li id="daeb8b56-c428-4bc6-9e29-a8e04f132299">簡單漂亮，文章內(nèi)容美觀易讀</li><li id="6722a023-2597-49f7-8808-d24e1972e32f">Material Design 設(shè)計(jì)</li><li id="240d3483-d994-4d3c-bd02-3bdf9e1304bd">響應(yīng)式設(shè)計(jì)，博客在桌面端、平板、手機(jī)等設(shè)備上均能很好的展現(xiàn)</li><li id="0e58dab8-e434-4ea6-b51b-0bb3dabd8aab">首頁輪播文章及每天動(dòng)態(tài)切換Banner圖片</li><li id="2304ec53-b9eb-4d1f-919f-8856e8755142">瀑布流式的博客文章列表（文章無特色圖片時(shí)會(huì)有24張漂亮的圖片代替）</li><li id="c9ab7b23-39de-4216-b266-90911c8078f2">時(shí)間軸式的歸檔頁</li><li id="96d1403a-e038-4944-9afe-0daaec050a77">詞云的標(biāo)簽頁和雷達(dá)圖的分類頁</li><li id="26046f26-7690-40d9-8c35-72ec7296fce2">豐富的關(guān)于我頁面（包括關(guān)于我、文章統(tǒng)計(jì)圖、我的項(xiàng)目、我的技能、相冊等）</li><li id="a812f9c0-c634-4619-b902-400a98ba22a5">可自定義的數(shù)據(jù)的友情鏈接頁面</li><li id="d873bf51-1bde-4f90-8704-d1326823d593">支持文章置頂和文章打賞</li><li id="f63759e7-a5c8-45de-8bc5-d30604c116fb">支持MathJax</li><li id="7f83ffdb-5f37-483e-bfa7-80f58df23291">TOC目錄</li><li id="ab4dae0e-cb30-4ecf-bada-4c954bf4a444">可設(shè)置復(fù)制文章內(nèi)容時(shí)追加版權(quán)信息</li><li id="e697ab3b-1d33-49cf-b4f8-706ce63c8b3f">可設(shè)置閱讀文章時(shí)做密碼驗(yàn)證</li><li id="623bd20c-a7f0-47f1-a224-2ac1ab1e1984">Gitalk、Gitment、Valine 和 Disqus 評論模塊（推薦使用Gitalk）</li><li id="44678556-01c9-49ed-a4d1-1327b9225a67">集成了不蒜子統(tǒng)計(jì)、谷歌分析（Google Analytics）和文章字?jǐn)?shù)統(tǒng)計(jì)等功能</li><li id="3911c977-6a95-42f0-87e9-905a487bb5d0">支持在首頁的音樂播放和視頻播放功能</li></ul>他的介紹文檔寫得非常的詳細(xì)，還有中英文兩個(gè)版本。效果圖如下：首先先按照文檔教程安裝一遍主題，然后是可以正常打開的，如果你是一般使用的話，基本沒啥問題了。不過有些地方有些地方可以根據(jù)你自己的習(xí)慣和喜好修改一下，下面記錄一下我這個(gè)博客修改了的一些地方。<h1 id="74f00798-523e-47d9-b996-17ccac867ab1">2.1 新建文章模板修改</h1><hr id="c02357ac-0560-471a-9f3e-6dfd9b15cbc6"></hr>首先為了新建文章方便，我們可以修改一下文章模板，建議將/scaffolds/post.md修改為如下代碼：<pre id="609bf736-88c8-4542-a103-09dc5d094a8f"><code id="2c1ba3df-8b96-4590-abc5-576ae47aeb16">---title:{{title}}date:{{date}}author:img:coverImg:top:falsecover:falsetoc:truemathjax:falsepassword:summary:tags:categories:---</code></pre>這樣新建文章后一些Front-matter參數(shù)不用你自己補(bǔ)充了，修改對應(yīng)信息就可以了。<h1 id="b5ce89c2-17cd-4c07-8f8b-d75dc063bfc9">2.2 添加404頁面</h1><hr id="f08631be-b6d9-4b56-b9e1-d70dc23857c6"></hr>原來的主題沒有404頁面，我們加一個(gè)。首先在/source/目錄下新建一個(gè)404.md，內(nèi)容如下：<pre id="4e994713-525d-4091-a685-d380dba61172"><code id="19a8fe9e-bec4-450f-b241-90b64ffe3f4d">title:404date:2019-08-516:41:10type:"404"layout:"404"description:"Oops～，我崩潰了！找不到你想要的頁面 :("</code></pre>然后在/themes/matery/layout/目錄下新建一個(gè)404.ejs文件，內(nèi)容如下：<pre id="d53035c8-e37f-40e0-adac-836d5ca35ed2"><code id="67e73041-39a9-473a-8e86-3a5622c10c44"><styletype="text/css">/* dont remove. */.about-cover{height:75vh; }</style><divclass="bg-cover pd-header about-cover"><divclass="container"><divclass="row"><divclass="col s10 offset-s1 m8 offset-m2 l8 offset-l2"><divclass="brand"><divclass="title center-align">404</div><divclass="description center-align"><%=page.description%></div></div></div></div></div></div><script>// 每天切換 banner 圖. Switch banner image every day.$(.bg-cover).css(background-image,url(/medias/banner/+newDate().getDay() +.jpg));</script></code></pre><h1 id="b96f0d39-d220-4255-9f2d-b8ed05fa8ee8">2.3關(guān)于頁面增加簡歷（可選）</h1><hr id="6d8fe216-ce99-4c3f-a074-01a57f06c96c"></hr>修改/themes/matery/layout/about.ejs，找到<div class="card">標(biāo)簽，然后找到它對應(yīng)的</div>標(biāo)簽，接在后面新增一個(gè)card，語句如下：<pre id="d2a33a4c-5595-4e86-a4a9-537d326cec18"><code id="08d1d0fb-49f0-4487-ada7-09d5d95af3c2"><divclass="card"><divclass="card-content"><divclass="card-content article-card-content"><divclass="title center-align"data-aos="zoom-in-up"><iclass="fa fa-address-book"></i><%-__(myCV) %></div><divid="articleContent"data-aos="fade-up"><%-page.content%></div></div></div></div></code></pre>這樣就會(huì)多出一張card，然后可以在/source/about/index.md下面寫上你的簡歷了，當(dāng)然這里的位置隨你自己設(shè)置，你也可以把簡歷作為第一個(gè)card。<h1 id="86d2c792-7287-47c9-8c6e-d2fa38b46940">2.4 數(shù)學(xué)公式渲染和代碼高亮</h1><hr id="6d442dbf-33d8-4a1d-a387-f34e082937f9"></hr>2.4.1 解決mathjax與代碼高亮的沖突如果你按照教程安裝了代碼高亮插件hexo-prism-plugin，單獨(dú)使用是沒有問題的，但如果你又使用了mathjax，并且按照網(wǎng)上教程，安裝kramed插件并修改了js文件里的正則表達(dá)式（為了解決markdown和mathjax的語法沖突），那你的代碼就無法高亮了。解決方法很簡單，別用kramed插件了，還用原來自帶的marked插件，直接改它的正則表達(dá)式就行了。2.4.2 加數(shù)學(xué)公式顯示打開/themes/matery/layout中的post.ejs文件，在最下方粘貼如下代碼：<pre id="b1c35793-3493-478c-8536-1b683e18907c"><code id="2a7883c5-9e5d-44e3-8d44-c747fe1cc5d9"><scripttype="text/javascript"src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script></code></pre>由于markdown語法與mathjax語法存在沖突，所以還需要修改源文件。打開/node_modules/marked/lib中的marked.js文件，第539行的escape:處替換成：<pre id="67c07eb4-a711-4228-bb34-7bc0c976290a"><code id="502bdeed-0ffb-44a3-8b4c-43d781711a23">escape: /^$[`*\[\]()$+\-.!_>])/</code></pre>第553行的em:處替換成：<pre id="b5a9875a-16ff-44bf-9f0c-4d3b95eaba68"><code id="d9f42eb7-5c9b-451e-b2d3-eb27394a5ac0">em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/</code></pre>這時(shí)在文章里寫數(shù)學(xué)公式基本沒有問題了，但是要注意：數(shù)學(xué)公式中如果出現(xiàn)了連續(xù)兩個(gè){，中間一定要加空格！舉個(gè)例子:行內(nèi)公式：y=f(x)y=f(x)代碼：<pre id="6f48486b-2a9b-4f8f-be71-9ee9ffb3057b"><code id="a44abe30-0c8d-4e1e-ab62-ec6e86bc0476">$y = f(x)$</code></pre>行間公式：y=fg1(x)y=fg1(x)代碼：<pre id="8540a485-314c-40c8-b32c-a59371095fd3"><code id="fb745898-8e1f-4c4b-8d61-c27a87d977b5">\\[y = {f_{ {g_1}}}(x)\\]</code></pre><blockquote id="f99a8779-6b8f-4e4b-95ef-aa2928cdd17e">注意上面花括號之間有空格！</blockquote><h1 id="bf2cbaf3-9024-4f4f-b9e0-89602822ad3d">2.5 增加建站時(shí)間</h1><hr id="7e9f4aad-a45b-432e-8c57-c8ba44cc746a"></hr>修改/themes/matery/layout/_partial中的footer.ejs，在最后加上：<pre id="4900a921-61b4-4982-9893-4ba7d5998c2a"><code id="0fb47117-97da-48b2-afcf-8f39f91450dc"><scriptlanguage=javascript>functionsiteTime(){window.setTimeout("siteTime()",1000);varseconds =1000;varminutes = seconds *60;varhours = minutes *60;vardays = hours *24;varyears = days *365;vartoday =newDate();vartodayYear = today.getFullYear();vartodayMonth = today.getMonth() +1;vartodayDate = today.getDate();vartodayHour = today.getHours();vartodayMinute = today.getMinutes();vartodaySecond = today.getSeconds();/* Date.UTC() -- 返回date對象距世界標(biāo)準(zhǔn)時(shí)間(UTC)1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳) year - 作為date對象的年份，為4位年份值 month - 0-11之間的整數(shù)，做為date對象的月份 day - 1-31之間的整數(shù)，做為date對象的天數(shù) hours - 0(午夜24點(diǎn))-23之間的整數(shù)，做為date對象的小時(shí)數(shù) minutes - 0-59之間的整數(shù)，做為date對象的分鐘數(shù) seconds - 0-59之間的整數(shù)，做為date對象的秒數(shù) microseconds - 0-999之間的整數(shù)，做為date對象的毫秒數(shù) */vart1 =Date.UTC(2017,09,11,00,00,00);//成都時(shí)間2018-2-13 00:00:00vart2 =Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);vardiff = t2 - t1;vardiffYears =Math.floor(diff / years);vardiffDays =Math.floor((diff / days) - diffYears *365);vardiffHours =Math.floor((diff - (diffYears *365+ diffDays) * days) / hours);vardiffMinutes =Math.floor((diff - (diffYears *365+ diffDays) * days - diffHours * hours) / minutes);vardiffSeconds =Math.floor((diff - (diffYears *365+ diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);document.getElementById("sitetime").innerHTML ="本站已運(yùn)行 "+diffYears+" 年 "+diffDays +" 天 "+ diffHours +" 小時(shí) "+ diffMinutes +" 分鐘 "+ diffSeconds +" 秒"; }/*因?yàn)榻ㄕ緯r(shí)間還沒有一年，就將之注釋掉了。需要的可以取消*/siteTime();</script></code></pre>然后在合適的地方（比如copyright聲明后面）加上下面的代碼就行了：<pre id="6bcf35e1-1240-4d18-a488-aa7f78ee5009"><code id="484cec0a-0d3e-46e9-83f4-72c0d32c849d"><spanid="sitetime"></span></code></pre><h1 id="c52334b9-6977-4a07-8b15-2714cf3d8dd2">2.6 修改不蒜子初始化計(jì)數(shù)</h1><hr id="58dc7a99-4c2a-4143-80ef-de76ffdb0dba"></hr>因?yàn)椴凰庾又两裎撮_放注冊，所以沒辦法在官網(wǎng)修改初始化，只能自己動(dòng)手了。和上一條一樣，我們在/themes/matery/layout/_partial里的footer.ejs文件最后加上：<pre id="0a8f7a42-7c6d-45b2-ab61-36734b55b77d"><code id="345b19a0-ef65-419a-894f-3d639e871899"><script>$(document).ready(function(){varint = setInterval(fixCount,50);// 50ms周期檢測函數(shù)varpvcountOffset =80000;// 初始化首次數(shù)據(jù)varuvcountOffset =20000;functionfixCount(){if(document.getElementById("busuanzi_container_site_pv").style.display !="none") { $("busuanzi_value_site_pv").html(parseInt($("busuanzi_value_site_pv").html()) + pvcountOffset); clearInterval(int); }if($("busuanzi_container_site_pv").css("display") !="none") { $("busuanzi_value_site_uv").html(parseInt($("busuanzi_value_site_uv").html()) + uvcountOffset);// 加上初始數(shù)據(jù)clearInterval(int);// 停止檢測} } });</script></code></pre>然后把上面幾行有段代碼：<pre id="6b680b64-525a-4a45-8ee8-ca4e24054931"><code id="29ef2f09-10f7-4034-8d4b-5e06cc60e1aa"><%if(theme.busuanziStatistics&&theme.busuanziStatistics.totalTraffic) { %><spanid="busuanzi_container_site_pv"><iclass="fa fa-heart-o"></i>本站總訪問量<spanid="busuanzi_value_site_pv"class="white-color"></

網(wǎng)站題目：HexoGithub：個(gè)人博客網(wǎng)站搭建完全教程(看這篇就夠了)
網(wǎng)頁地址：http://redsoil1982.com.cn/news26/321476.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、虛擬主機(jī)、網(wǎng)站營銷、網(wǎng)站制作、網(wǎng)站導(dǎo)航、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容