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

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

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

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

博客開源

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

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

簡單使用方法：

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

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

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

最后，如果項目和教程對你有所幫助或者你看見了還算比較喜歡，歡迎給我github項目倉庫點個star，謝謝您！

前言

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

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

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

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

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

教程大致分三個部分，

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

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

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

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

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

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

linux：對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行代碼

sudo apt-getinstall git

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

2. 安裝nodejs

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

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

linux：命令行安裝：

sudo apt-getinstallnodejs sudo apt-getinstallnpm

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

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

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

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

sudovim /etc/profile

復制下面兩行到剛打開的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)，使用包的命令時可能會提示找不到命令，沒關系，在用戶目錄下終端執(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)鏡像進行加速。

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

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

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

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

定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo。可能會有幾個報錯，無視它就行。

npminstall -g hexo-cli

安裝完后輸入hexo -v驗證是否安裝成功。

至此hexo就安裝完了。

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

hexoinitMyBlog

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

cdMyBlog //進入這個MyBlog文件夾npminstall

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

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

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

hexoghexoserver(或者簡寫:hexo s）)

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

按ctrl+c關閉本地服務器。

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

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

打開https://github.com/，新建一個項目倉庫New repository，如下所示：

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

要創(chuàng)建一個和你用戶名相同的倉庫，后面加.http://github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是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才能知道你是不是對應它的賬戶。例如我的：

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

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

gitconfiguser.namegitconfiguser.email

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

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

ssh-keygen -t rsa -C"youremail"

這個時候它會告訴你已經(jīng)生成了.ssh的文件夾。在你的電腦中找到這個文件夾。或者git bash中輸入

cat ~/.ssh/id_rsa.pub

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

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

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

6. 將hexo部署到GitHub

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

修改最后一行的配置：

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

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

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

npminstallhexo-deployer-git--save

然后

hexocleanhexogeneratehexodeploy

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

注意deploy時可能要你輸入username和password。

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

7. 設置個人域名

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

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

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

然后實名認證后進入騰訊云控制臺，點云解析進去，找到你剛買的域名，點進去添加兩條解析記錄，如下圖所示：

然后打開你的github博客項目，點擊settings，拉到下面Custom domain處，填上你自己的域名，保存：

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

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

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

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

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

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

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

第二部分定制

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

1. Hexo相關目錄文件1.1 博客目錄構成介紹

從上圖可以看出，博客的目錄結構如下：

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

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

我們平時寫文章只需要關注source/_posts這個文件夾就行了。

1.2 hexo基本配置

在文件根目錄下的_config.yml，就是整個hexo框架的配置文件了。可以在里面修改大部分的配置。詳細可參考官方的配置描述。

1.2.1 網(wǎng)站

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

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

permalink，也就是你生成某個文章時的那個鏈接格式。

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

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

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

再往下翻，中間這些都默認就好了。

theme: landscap

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

1.2.3 Front-matter

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

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

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

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

---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)容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內(nèi)容作為摘要tags:-Hexo-Github-博客categories:-軟件安裝與配置---1.2.4 layout（布局）

1.2.4.1 post

當你每一次使用代碼

hexonewXXX

它其實默認使用的是post這個布局，也就是在source文件夾下的_post里面。

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

而new這個命令其實是：

hexonew[layout] </code></pre>只不過這個layout默認是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)會自動給你在source文件夾下創(chuàng)建一個newpage文件夾，以及newpage文件夾中的index.md，這樣你訪問的newpage對應的鏈接就是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>這樣會在source/_draft中新建一個newdraft.md文件，如果你的草稿文件寫的過程中，想要預覽一下，那么可以使用<pre id="9c8ff9d3-eb4a-4622-baaa-d9ceb6ee4844"><code id="0bdd0533-5a43-4f9e-bd50-039bfa5a4c9a">hexo server--draft</code></pre>在本地端口中開啟服務預覽。如果你的草稿文件寫完了，想要發(fā)表到post中，<pre id="6f000c24-dc6d-48c2-b8b7-c583e309adc4"><code id="142fcb80-581e-4341-ace7-13bd35172798">hexopublish draft newdraft</code></pre>就會自動把newdraft.md發(fā)送到post中。<h1 id="2d867380-7d6c-4e72-b191-d48196a47c98">2. 更換主題</h1><hr id="18388e95-fd96-4b4b-b9e0-964441928e9a"></hr>我們在了解Hexo博客文件基礎之后，知道主題文件就放在themes文件下，那么我們就可以去Hexo官網(wǎng)下載喜歡的主題，復制進去然后修改參數(shù)即可。網(wǎng)上大多數(shù)主題都是github排名第一的Next主題，但是我個人不是很喜歡，我在網(wǎng)上看到一個主題感覺還不錯：hexo-theme-matery，地址在傳送門。這個主題看著比較漂亮，并且響應式比較友好，點起來很舒服，功能也比較很多。<blockquote id="accd9ed5-d447-4e69-b5e9-24efb1809ebe">當然，人各有異，這個主題風格也不一定是你喜歡，那么你也可以跟著這教程類似的方法替換成你喜歡的就行了。</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 設計</li><li id="240d3483-d994-4d3c-bd02-3bdf9e1304bd">響應式設計，博客在桌面端、平板、手機等設備上均能很好的展現(xiàn)</li><li id="0e58dab8-e434-4ea6-b51b-0bb3dabd8aab">首頁輪播文章及每天動態(tài)切換Banner圖片</li><li id="2304ec53-b9eb-4d1f-919f-8856e8755142">瀑布流式的博客文章列表（文章無特色圖片時會有24張漂亮的圖片代替）</li><li id="c9ab7b23-39de-4216-b266-90911c8078f2">時間軸式的歸檔頁</li><li id="96d1403a-e038-4944-9afe-0daaec050a77">詞云的標簽頁和雷達圖的分類頁</li><li id="26046f26-7690-40d9-8c35-72ec7296fce2">豐富的關于我頁面（包括關于我、文章統(tǒ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">可設置復制文章內(nèi)容時追加版權信息</li><li id="e697ab3b-1d33-49cf-b4f8-706ce63c8b3f">可設置閱讀文章時做密碼驗證</li><li id="623bd20c-a7f0-47f1-a224-2ac1ab1e1984">Gitalk、Gitment、Valine 和 Disqus 評論模塊（推薦使用Gitalk）</li><li id="44678556-01c9-49ed-a4d1-1327b9225a67">集成了不蒜子統(tǒng)計、谷歌分析（Google Analytics）和文章字數(shù)統(tǒng)計等功能</li><li id="3911c977-6a95-42f0-87e9-905a487bb5d0">支持在首頁的音樂播放和視頻播放功能</li></ul>他的介紹文檔寫得非常的詳細，還有中英文兩個版本。效果圖如下：首先先按照文檔教程安裝一遍主題，然后是可以正常打開的，如果你是一般使用的話，基本沒啥問題了。不過有些地方有些地方可以根據(jù)你自己的習慣和喜好修改一下，下面記錄一下我這個博客修改了的一些地方。<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ù)不用你自己補充了，修改對應信息就可以了。<h1 id="b5ce89c2-17cd-4c07-8f8b-d75dc063bfc9">2.2 添加404頁面</h1><hr id="f08631be-b6d9-4b56-b9e1-d70dc23857c6"></hr>原來的主題沒有404頁面，我們加一個。首先在/source/目錄下新建一個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/目錄下新建一個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關于頁面增加簡歷（可選）</h1><hr id="6d8fe216-ce99-4c3f-a074-01a57f06c96c"></hr>修改/themes/matery/layout/about.ejs，找到<div class="card">標簽，然后找到它對應的</div>標簽，接在后面新增一個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>這樣就會多出一張card，然后可以在/source/about/index.md下面寫上你的簡歷了，當然這里的位置隨你自己設置，你也可以把簡歷作為第一個card。<h1 id="86d2c792-7287-47c9-8c6e-d2fa38b46940">2.4 數(shù)學公式渲染和代碼高亮</h1><hr id="6d442dbf-33d8-4a1d-a387-f34e082937f9"></hr>2.4.1 解決mathjax與代碼高亮的沖突如果你按照教程安裝了代碼高亮插件hexo-prism-plugin，單獨使用是沒有問題的，但如果你又使用了mathjax，并且按照網(wǎng)上教程，安裝kramed插件并修改了js文件里的正則表達式（為了解決markdown和mathjax的語法沖突），那你的代碼就無法高亮了。解決方法很簡單，別用kramed插件了，還用原來自帶的marked插件，直接改它的正則表達式就行了。2.4.2 加數(shù)學公式顯示打開/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ù)學公式中如果出現(xiàn)了連續(xù)兩個{，中間一定要加空格！舉個例子:行內(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 增加建站時間</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對象距世界標準時間(UTC)1970年1月1日午夜之間的毫秒數(shù)(時間戳) year - 作為date對象的年份，為4位年份值 month - 0-11之間的整數(shù)，做為date對象的月份 day - 1-31之間的整數(shù)，做為date對象的天數(shù) hours - 0(午夜24點)-23之間的整數(shù)，做為date對象的小時數(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);//成都時間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 ="本站已運行 "+diffYears+" 年 "+diffDays +" 天 "+ diffHours +" 小時 "+ diffMinutes +" 分鐘 "+ diffSeconds +" 秒"; }/*因為建站時間還沒有一年，就將之注釋掉了。需要的可以取消*/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 修改不蒜子初始化計數(shù)</h1><hr id="58dc7a99-4c2a-4143-80ef-de76ffdb0dba"></hr>因為不蒜子至今未開放注冊，所以沒辦法在官網(wǎ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：個人博客網(wǎng)站搭建完全教程(看這篇就夠了)
網(wǎng)頁地址：http://m.newbst.com/news26/321476.html

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

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

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

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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