基於Hexo的matery主題搭建博客並深度優化

本文來自 悟塵紀,獲取更新內容可查看原文: https://www.lixl.cn/2019/0310...

對於有必定技術背景的同窗,本身動手搭建博客網站是一個很不錯的選擇。選擇喜歡的主題,按需進行個性化配置,隨時在本地用本身喜歡的工具寫文章,一鍵發佈到多個博客託管平臺,使用本身喜歡的圖牀/CDN 來加速...javascript

演示站點(悟塵紀) 基於 Hexo 的 hexo-theme-matery 主題構建,部署在騰訊雲 COS 中並使用 CDN 進行內容加速,經過 PicGo + 阿里雲 OSS 做爲圖牀進行靜態資源加速。

安裝 hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其餘渲染引擎)解析文章,在幾秒內,便可利用靚麗的主題生成靜態網頁。css

前提

安裝 Hexo 至關簡單,只須要先安裝下列應用程序便可:html

  • Node.js (Node.js 版本需不低於 8.10,建議使用 Node.js 10.0 及以上版本)
  • Git

安裝

全部必備的應用程序安裝完成後,便可使用 npm 安裝 Hexo。前端

npm install -g hexo-cli

安裝之後,可使用如下兩種方式執行 Hexo:java

  1. npx hexo
  2. 將 Hexo 所在的目錄下的 node_modules 添加到環境變量之中便可直接使用: hexo
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

升級

後期須要升級的化,進入 blog 目錄,先檢查更新:node

$ npm outdated
Package                  Current  Wanted  Latest  Location
hexo                       3.9.0   3.9.0   4.2.0  hexo-site
hexo-deployer-git          1.0.0   1.0.0   2.1.0  hexo-site
hexo-generator-archive     0.1.5   0.1.5   1.0.0  hexo-site
hexo-generator-category    0.1.3   0.1.3   1.0.0  hexo-site
hexo-generator-feed        1.2.2   1.2.2   2.2.0  hexo-site
hexo-generator-index       0.2.1   0.2.1   1.0.0  hexo-site
hexo-generator-tag         0.2.0   0.2.0   1.0.0  hexo-site
hexo-renderer-ejs          0.3.1   0.3.1   1.0.0  hexo-site
hexo-renderer-marked       0.3.2   0.3.2   2.0.0  hexo-site
hexo-renderer-stylus       0.3.3   0.3.3   1.1.0  hexo-site
hexo-server                0.3.3   0.3.3   1.0.0  hexo-site

修改 package.json 文件,基於 Latest 列內容更新版本號,而後更新並檢查版本號:git

$ npm install --save

# 檢查版本號
$ hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
......

建站

安裝 Hexo 完成後,請執行下列命令,Hexo 將會在指定文件夾中新建所須要的文件。github

hexo init <folder>
cd <folder>
npm install

啓動

此時,經過 hexo s 命令便可在本地啓動您的博客站點了。web

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

接下來將安裝主題,配置博客託管平臺,實現一鍵發佈並刷新 CDN 緩存。算法

目錄結構說明

在執行過Hexo deploy命令以後,目錄結構新增了.deploy_gitpublic.gitignore,以下:

$ tree -L 2
.
├── .deploy_git
├── node_modules
├── public
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   ├── _posts
│   ├── _drafts
├── themes
├── _config.yml
├── db.json
├── package.json
└── package-lock.json

_config.yml

用來配置博客相關的參數,初始化時自動建立。具體參數設置,可參照 Hexo 配置 文檔。

node_modules 和 package.json

都是在初始化時自動建立。

node_modules用來存儲已安裝的各種依賴包。
package.json用來查看 Hexo 的版本以及相關依賴包的版本。

Hexo 會默認安裝:

  • hexo:主程序
  • hexo-deployer-git:實現 git 部署方式
  • hexo-generator-archive:存檔頁面生成器
  • hexo-generator-category:分類頁面生成器
  • hexo-generator-index:index 生成器
  • hexo-generator-tag:標籤頁面生成器
  • hexo-renderer-ejs:支持 EJS 渲染
  • hexo-renderer-marked:Markdown 引擎
  • hexo-renderer-stylus:支持 stylus 渲染
  • hexo-server:支持本地預覽,默認地址 localhost:4000

新安裝的依賴包,也會保存在node_module文件夾下。

scaffold

模板文件夾,初始化時自動建立。包含pagepostdraft三種模板,分別對應 頁面、要發佈的文章、草稿。

themes

主題文件夾,初始化時自動建立。每個主題,都有一個單獨的文件夾。默認主題爲 landscape

source , public 和 .deploy_git

  • source:資源文件夾。用來存放圖片、Markdown 文檔(文章、草稿)、各類頁面(分類、關於頁面等)。
  • public:將 source 文件夾裏的 Markdown 文檔,轉換成 index.html。再結合主題進行渲染,就是咱們最終看到的博客。
  • .deploy_git:將 public 文件夾的內容提交到 Github 後生成,內容與 public 文件夾基本一致。

這三者的關係大體是:source -> public -> .deploy_git

執行hexo generate,根據 source,更新 public。
執行hexo deploy,根據 public,更新 .deploy_git。

配置主題

下載主題

hexo-theme-matery 是一個採用 Material Design 和響應式設計的 Hexo 博客主題,點擊 這裏 能夠查看示例效果。點擊 這裏 下載 master 分支的最新穩定版的代碼,解壓縮後,將 hexo-theme-matery 的文件夾複製到 Hexo 的 themes 文件夾中便可。

切換主題

修改 Hexo 根目錄下的 _config.ymltheme 的值:theme: hexo-theme-matery

_config.yml 文件的其它修改建議

  • 請修改 _config.ymlurl 的值爲你的網站主 URL(如:http://xxx.github.io)。
  • 建議修改兩個 per_page 的分頁條數值爲 6 的倍數,如:1218 等,這樣文章列表在各個屏幕下都能較好的顯示。
  • 若是是中文用戶,則建議修改 language 的值爲 zh-CN

新建分類 categories 頁

categories 頁是用來展現全部分類的頁面,若是 source 目錄下尚未 categories/index.md 文件,那麼就須要新建一個,命令以下:

hexo new page "categories"

編輯你剛剛新建的頁面文件 /source/categories/index.md,至少須要如下內容:

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建標籤 tags 頁

tags 頁是用來展現全部標籤的頁面,若是 source 目錄下尚未 tags/index.md 文件,那麼就須要新建一個,命令以下:

hexo new page "tags"

編輯剛剛新建的頁面文件 /source/tags/index.md,至少須要如下內容:

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建關於我 about 頁

about 頁是用來展現關於我和個人博客信息的頁面,若是 source 目錄下尚未 about/index.md 文件,那麼就須要新建一個,命令以下:

hexo new page "about"

編輯剛剛新建的頁面文件 /source/about/index.md,至少須要如下內容:

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建友情鏈接 friends 頁(可選的)

friends 頁是用來展現友情鏈接信息的頁面,若是 source 目錄下尚未 friends/index.md 文件,那麼就須要新建一個,命令以下:

hexo new page "friends"

編輯剛剛新建的頁面文件 /source/friends/index.md,至少須要如下內容:

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同時,在 source 目錄下新建 _data 目錄,在 _data 目錄中新建 friends.json 文件,文件內容以下所示:

[
  {
    "avatar": "https://www.lixl.cn/medias/avatar.jpg",
    "name": "悟塵記",
    "introduction": "人生就是一場修行,上善若水,厚德載物。",
    "url": "https://www.lixl.cn/",
    "title": "前去參觀"
  },
  {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
    "name": "Fabric",
    "introduction": "A Blockchain Platform for the Enterprise",
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/",
    "title": "前去學習"
  },
  {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
    "name": "BootCDN",
    "introduction": "穩定、快速、免費的前端開源項目 CDN 加速服務。",
    "url": "https://www.bootcdn.cn/",
    "title": "前去加速"
  }
]

代碼高亮

因爲 Hexo 自帶的代碼高亮主題顯示很差看,因此主題中使用到了 hexo-prism-plugin 的 Hexo 插件來作代碼高亮,安裝命令以下:

npm i -S hexo-prism-plugin

而後,修改 Hexo 根目錄下 _config.yml 文件中 highlight.enable 的值爲 false,並新增 prism 插件相關的配置,主要配置以下:

highlight:
  enable: false

prism_plugin:
  mode: "preprocess" # realtime/preprocess
  theme: "tomorrow"
  line_number: false # default false
  custom_css:

搜索

本主題中還使用到了 hexo-generator-search 的 Hexo 插件來作內容搜索,安裝命令以下:

npm install hexo-generator-search --save

在 Hexo 根目錄下的 _config.yml 文件中,新增如下的配置項:

search:
  path: search.xml
  field: post

修改頁腳

頁腳信息可能須要作定製化修改,並且它不便於作成配置信息,因此可能須要你本身去再修改和加工。修改的地方在主題文件的 /layout/_partial/footer.ejs 文件中,包括站點、使用的主題、訪問量等。

修改社交連接

在主題的 _config.yml 文件中,默認支持 QQGitHub 和郵箱的配置,能夠在主題文件的 /layout/_partial/social-link.ejs 文件中,新增、修改須要的社交連接地址,增長連接可參考以下代碼:

<a
  href="https://github.com/blinkfox"
  class="tooltipped"
  target="_blank"
  data-tooltip="訪問個人GitHub"
  data-position="top"
  data-delay="50"
>
  <i class="fa fa-github"></i>
</a>

其中,社交圖標(如:fa-github)能夠在 Font Awesome 中搜索找到。如下是經常使用社交圖標的標識,供參考:

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • 新浪微博: fa-weibo
  • 微信: fa-wechat
  • QQ: fa-qq

修改打賞的二維碼圖片

在主題文件的 source/medias/reward 文件中,能夠替換成你的的微信和支付寶的打賞二維碼圖片。

一鍵部署

經過 hexo-deployer-git 插件能夠實現一鍵將博客同時部署到多個 git 倉庫中。如同時發佈到 github 及 gitee 提供的 pages 服務。安裝:

npm install hexo-deployer-git --save

修改 Hexo 根目錄下的 _config.yml 文件中的以下內容:

## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: git
    repo: https://gitee.com/lxl80/lxl80.git
    branch: master
    ignore_hidden: false
也能夠如本站同樣,採用 hexo-deployer-cos-enhanced 插件將靜態內容部署到騰訊雲對象存儲服務中,在 DNS 配置中將境內線路解析到騰訊雲 CDN 地址,實現加速。部署完成後會自動刷新被更新文件的 CDN 緩存。

安裝:

npm install hexo-deployer-cos-enhanced --save

_config.yml 配置以下:

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos
    bucket: lxl80-130****
    region: ap-beijing
    secretId: AKIDh9****F8FvL
    secretKey: Z3IGiur****QZR3PgjXmlVg
    cdnConfig:
      enable: true
      cdnUrl: https://static.lixl.cn
      bucket: static-130****
      region: ap-beijing
      folder: static
      secretId: AKIDh9****F8FvL
      secretKey: Z3IGiur****QZR3PgjXmlVg

而後經過 hexo g -d 便可實現一鍵發佈,並更新 CDN 緩存。

文章連接轉靜態短地址(建議安裝)

若是文章名稱是中文的,那麼 Hexo 默認生成的永久連接也會有中文,這樣不利於 SEO,且 gitment 評論對中文連接也不支持。咱們能夠用 hexo-permalink-pinyin Hexo 插件生成文章時生成中文拼音的永久連接,或者用hexo-abbrlink 生成靜態文章連接。如下結合 hexo-abbrlink 生成相似 /yyyy/mmdd+隨機數.html 的文章連接地址。

安裝命令以下:

npm install hexo-abbrlink --save

在 Hexo 根目錄下的 _config.yml 文件中,修改 permalink: ,並在文件末尾新增 abbrlink:配置項:

permalink: :year/:month:day:abbrlink.html

abbrlink:
  alg: crc16 #算法選項:crc16丨crc32
  rep: dec #輸出進制:dec爲十進制,hex爲十六進制

CND 加速(建議啓用)

放在 Github 的資源在國內加載速度比較慢,所以須要使用 CDN 加速來優化網站打開速度,jsDelivr + Github 即是免費且好用的 CDN,很是適合博客網站使用。也能夠選擇主流雲服務商提供的對象存儲+CDN 來得到更快速及穩定的訪問效果,費用低到幾乎可忽略。

用法:

https://cdn.jsdelivr.net/gh/你的用戶名/你的倉庫名@發佈的版本號/文件路徑

例如:

https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/medias/banner/1.jpg

注意:版本號不是必需的,是爲了區分新舊資源,若是不使用版本號,將會直接引用最新資源。

還能夠配合 PicGo圖牀上傳工具的 自定義域名前綴來上傳圖片,使用極其方便。具體使用方法可參見個人另外一篇文章: 使用 Typora+iPic/PicGo 圖牀+CDN 實現高效 Markdown 創做

文章字數統計插件(可選的)

若是你想要在文章中顯示文章字數、閱讀時長信息,能夠安裝 hexo-wordcount插件。

安裝命令以下:

npm i --save hexo-wordcount

而後只需在本主題下的 _config.yml 文件中,激活如下配置項便可:

wordCount:
  enable: false # 將這個值設置爲 true 便可.
  postWordCount: true
  min2read: true
  totalCount: true

添加 RSS 訂閱支持(可選的)

本主題中還使用到了 hexo-generator-feed 的 Hexo 插件來作 RSS,安裝命令以下:

npm install hexo-generator-feed --save

在 Hexo 根目錄下的 _config.yml 文件中,新增如下的配置項:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date

執行 hexo clean && hexo g 從新生成博客文件,而後在 public 文件夾中便可看到 atom.xml 文件,說明已經安裝成功了。

自定製修改

在本主題的 _config.yml 中能夠修改部分自定義信息,有如下幾個部分:

  • 菜單
  • 個人夢想
  • 首頁的音樂播放器和視頻播放器配置
  • 是否顯示推薦文章名稱和按鈕配置
  • faviconLogo
  • 我的信息
  • TOC 目錄
  • 文章打賞信息
  • 複製文章內容時追加版權信息
  • MathJax
  • 文章字數統計、閱讀時長
  • 點擊頁面的'愛心'效果
  • 個人項目
  • 個人技能
  • 個人相冊
  • GitalkGitmentValinedisqus 評論配置
  • 不蒜子統計和谷歌分析(Google Analytics
  • 默認特點圖的集合。當文章沒有設置特點圖時,本主題會根據文章標題的 hashcode 值取餘,來選擇展現對應的特點圖

若是本主題中的諸多功能和主題色彩你不滿意,能夠在主題中自定義修改,不少更自由的功能和細節點的修改難以在主題的 _config.yml 中完成,須要修改源代碼纔來完成。如下列出了可能有用的地方:

修改主題顏色

在主題文件的 /source/css/matery.css 文件中,搜索 .bg-color 來修改背景顏色:

/* 總體背景顏色,包括導航、移動端的導航、頁尾、標籤頁等的背景顏色. */
.bg-color {
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
  /* 動態切換背景顏色. */
}

@keyframes rainbow {
  /* 動態切換背景顏色. */
}

修改 banner 圖和文章特點圖

能夠直接在 /source/medias/banner 文件夾中更換喜歡的 banner 圖片,主題代碼中是天天動態切換一張,只需 7 張便可。若是會 JavaScript 代碼,能夠修改爲本身喜歡切換邏輯,如:隨機切換等,banner 切換的代碼位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代碼中:

$(".bg-cover").css("background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)");

/source/medias/featureimages 文件夾中默認有 24 張特點圖片,你能夠再增長或者減小,並須要在 _config.yml 作同步修改。

文章 Front-matter 介紹

Front-matter 選項詳解

Front-matter 選項中的全部內容均爲非必填的。但仍然建議至少填寫 titledate 的值。

配置選項 默認值 描述
title Markdown 的文件標題 文章標題
date 文件建立時的日期時間 發佈時間,應保證全局惟一
author _config.yml 中的 author 文章做者
img featureImages 中的某個值 文章特徵圖
top true 文章是否置頂,值爲 true,則會做爲首頁推薦文章
cover false 是否須要加入到首頁輪播封面中
coverImg 該文章在首頁輪播封面須要顯示的圖片路徑,若是沒有,則默認使用文章的特點圖片
password 文章閱讀密碼,該值必須是用 SHA256 加密後的密碼,防止被他人識破。
toc true 是否開啓 TOC,能夠針對某篇文章單獨關閉 TOC 的功能。
mathjax false 是否開啓數學公式支持
summary 文章卡片摘要顯示的文字,若是無值程序會自動截取文章的部份內容做爲摘要
categories 文章分類,建議一篇文章一個分類
tags 文章標籤,一篇文章能夠多個標籤

注意:

  1. 若是 img 屬性不填寫的話,文章特點圖會根據文章標題的 hashcode 的值取餘,而後選取主題中對應的特點圖片,從而達到讓全部文章都的特點圖各有特點
  2. date 的值儘可能保證每篇文章是惟一的,由於本主題中 GitalkGitment 識別 id 是經過 date 的值來做爲惟一標識的。
  3. 若是要對文章設置閱讀驗證密碼的功能,不只要在 Front-matter 中設置採用了 SHA256 加密的 password 的值,還須要在主題的 _config.yml 中激活了配置。有些在線的 SHA256 加密的地址,可供使用:開源中國在線工具chahuo站長工具

如下爲文章的 Front-matter 示例。

最簡示例

---
title: 基於Hexo的hexo-theme-matery主題搭建博客並優化
date: 2019-10-03 14:25:00
---

最全示例

---
title: 基於Hexo的hexo-theme-matery主題搭建博客並優化
date: 2019-10-03 14:25:00
author: 悟塵
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 這是你自定義的文章摘要內容,若是這個屬性有值,文章卡片摘要就顯示這段文字,不然程序會自動截取文章的部份內容做爲摘要
categories: 工具
tags:
  - blog
  - hexo
---

SEO 優化

搜索引擎優化,又稱爲 SEO,即 Search Engine Optimization,它是一種經過分析搜索引擎的排名規律,瞭解各類搜索引擎怎樣進行搜索、怎樣抓取互聯網頁面、怎樣肯定特定關鍵詞的搜索結果排名的技術。Google 自動收錄效果還不錯,百度就差得遠了(GitHub不容許百度的Spider爬取GitHub上的內容)。

安裝 sitemap 插件生成站點地圖文件:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save  #百度專用

安裝後直接執行 hexo cl&&hexo g -d 命令,就會在網站根目錄生成 sitemap.xmlbaidusitemap.xml 文件。

百度優化

登陸百度搜索資源平臺, 登陸成功以後在 用戶中心 --> 站點管理 頁面中點擊添加網站,按提示操做。

添加網站

提示:因爲百度的 spider 是爬取不到 GitHub 的內容的,因此在第三步驗證網站的時候,建議選擇 CNAME驗證的方式。

通過以上步驟,百度已經知道有咱們網站的存在了,可是百度還不知道咱們的網站上有什麼內容,因此要向百度推送咱們的內容。點擊 網站支持 --> 數據引入 --> 連接提交菜單,提交站點地圖:
提交站點地圖

另外,hexo-theme-matery主題已經內置了 自動推送 的功能, 檢查 themes/hexo-theme-matery/_config.yml 文件中以下配置:

# 百度搜索資源平臺提交連接
baiduPush: true

自動推送的 JS 代碼部署在站點的每個頁面源代碼中,當頁面在每次被瀏覽時,連接就會被自動推送給百度。

谷歌優化

登陸 Google Search Console,點擊添加資源,輸入本身的域名,按提示操做。

添加資源

提示:須要進行 DNS 驗證,進入 DNS 域名解析設置頁面,按提示增長 TXT 記錄,以下圖:
DNS驗證內容填寫示例

驗證成功後,須要提交站點地圖。參照下圖提交,而後等待收錄。
提交站點地圖

注意:hexo 配置文件中的 url 必定要輸入正確的域名,插件是根據 url 生成站點地圖的。

經常使用命令

指令說明

hexo server #啓動本地服務器,用於預覽主題。Hexo 會監視文件變更並自動更新,除修改站點配置文件外,無須重啓服務器,直接刷新網頁便可生效。

hexo server -s #以靜態模式啓動

hexo server -p 5000 #更改訪問端口 (默認端口爲 4000,'ctrl + c'關閉 server)

hexo server -i IP地址 #自定義 IP

hexo clean #清除緩存 ,網頁正常狀況下能夠忽略此條命令,執行該指令後,會刪掉站點根目錄下的 public 文件夾

hexo g #生成靜態網頁 (執行 &dollar; hexo g後會在站點根目錄下生成 public 文件夾, hexo 會將"/blog/source/" 下面的.md 後綴的文件編譯爲.html 後綴的文件,存放在"/blog/public/ " 路徑下)

hexo d #自動生成網站靜態文件,並將本地數據部署到設定的倉庫(如 github)

hexo init 文件夾名稱 #初始化 XX 文件夾名稱

npm update hexo -g#升級

npm install hexo -g #安裝

node-v #查看 node.js 版本號

npm -v #查看 npm 版本號

git --version #查看 git 版本號

hexo -v #查看 hexo 版本號

簡寫指令

hexo n "個人第一篇文章" 等價於 hexo new "個人第一篇文章" 還等價於 hexo new post "個人第一篇文章"

hexo p 等價於 hexo publish

hexo g 等價於 hexo generate

hexo s等價於 hexo server

hexo d 等價於 hexo deploy

hexo g -d等價於hexo generate --deploy

注: hexo clean 沒有 簡寫, git --version 沒有簡寫

常見問題

1. 經過hexo g -d部署時報Error: Spawn failed錯誤:

這是因爲 git 本地記錄的提交版本號與 github 上不一致致使的,經過 git reset --hard commitCode便可解決。
  • 檢查本地最近提交記錄,獲取最後一次提交記錄的更新時間及標識,如280a7fdd46fcfd7d34e652aec15523dcd247fac8
cd .deploy_git
cat .git/logs/HEAD
  • 獲取 github pages 服務所關聯分支的最近一次提交記錄,獲取更新時間及標識。地址通常爲:https://github.com/用戶名/倉庫名/commits/分支名,如https://github.com/lxl80/blog/commits/gh-pages
  • 若是發現提交最新的提交時間/標識不一致,經過如下命令便可解決:
git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github上最新的提交標識

參照

相關文章
相關標籤/搜索