Hexo Material 主題博客搭建以及優化心得 | Crown 的個人 Blog

ipilipala 2017-07-12

展开全文

我的文章會同步更新發佈在以下地方,歡迎大家關注或者star來瞭解我的最新消息!!!

我的博客網站 —
我的 Github 庫 — MD-engineer
我的知乎專欄 — Crown的編程學習感悟
我的掘金 — 掘金 | Crown
我的簡書 — 簡書 | Crown3

未經允許,不准轉載

本文主要包括以下內容:
Hexo 博客搭建
Hexo 主題選擇以及應用
關於 Hexo Meterial 主題的相關配置
網站 SEO 優化
將你的網站同時託管到 Github 和 Coding 上,國內外分流
將自己的代碼託管到私有倉庫
使用 Gulp 來壓縮你的代碼
如何簡單高效地使用七牛圖床
主題這裡我選擇的是 Hexo Meterial 主題( Github Hexo 主題中 star 數排第三,前兩名分別是 next 和 yilia).
為什麼寫這篇文章?
我發現網上關於 Next 主題的相關配置比較多,但是關於這個 Meterial 主題的完整配置過程文檔卻相當難找,但這個主題在我看來,不管是顏值,還是功能來說,都明顯不該被埋沒在next的大海之中,所以在自己折騰了一整子後,將自己記錄的相關過程整理分享給大家,畢竟這個主題顏值辣麼高,功能辣麼強……(除了主題不通之外,其他相關配置都是可以拿來參考的,甚至直接拿來用的,所以其他主題的童靴先不要逃…)

Demo演示

Hexo 博客搭建

Hexo 安裝環境

Hexo 是基於Node.js,所以不管是 mac 還是 win 都需要提前安裝好Node.js以及NPM才能進行下一步,這裡關於 Node 與 NPM 的安裝我就不在這裡多說了,請大家自行 Google 解決.

Hexo 的相關安裝搭建

安裝 Hexo

首先我們要在命令行裡直接執行如下命令,全局安裝Hexo.

npm install -g hexo

初始化你的 Hexo 博客

然後需要你去找到一個你想要安裝的文件夾,在裡面執行如下命令來進行安裝初始化你的hexo博客.

hexo init hexo_blog   //在當前目錄下新建一個叫 hexo_blog 文件夾並在其中初始化生成 Hexo 相關代碼
cd hexo_blog          //進入到 hexo_blog 這個文件夾中並安裝相關依賴包
npm install

生成的相關目錄如下:

-- hexo_blog
    ├── node_modules    //NPM安裝依賴包
    ├── scaffolds
    ├── source
    |   └── _posts      //新建文件存放位置
    ├── themes          //相關主題存放位置
    ├── _config.yml     //Hexo 博客站點配置文件
    ├── .gitignore
    ├── db.json
    └── package.json

這裡需要下載速度比較慢的童鞋需要注意一下, npm 中默認使用的是國外的 npm 源,這意味著你在你執行 npm install 相關命令式會有比較高的延遲,甚至部分包下載不下來的情況,所以這裡推薦國內用戶用nrm切換成淘寶的鏡像源來使用(但還是會有部分依賴包必須從國外下載,所以還是推薦自己去學會科學上網),使用方法如下:

npm i nrm -g     //全局安裝 nrm 這個插件
nrm test         //測試哪個鏡像源跟自己的延遲比較低,我的是 taobao
nrm use taobao   //切換到taobao 這個鏡像源上
npm i ...        //之後繼續使用 npm 來安裝相關依賴就行

之後你就可以在當前文件夾下執行hexo server --debug來讓你的博客進入debug模式,一般默認是在4000這個端口下執行,直接在瀏覽器輸入localhost:4000就可以查看自己本地生成的Hexo博客了.

在debug模式下,你可以直接對你的博客進行相關修改,刷新網頁來查看效果.

Hexo 主題選擇以及應用

現在網上關於 Hexo 的主題一搜一大把,這裡推薦大家在選擇主題時可以去選擇一些關注度比較高的主題,這種主題一般相應的配套使用插件和文檔比較豐富,使用起來也比較方便,主題選擇的話可以去一些主題庫中查找,也可以直接去Github中搜索hexo theme等關鍵字來查找—點擊查看搜索結果.

這裡我們要注意的一點是在 Hexo 中,通常有兩份配置文件,一個是站點根目錄下(例如我的就是.../hexo_blog/_config.yml)的 _config.yml;另外一個是主題目錄(例如我的就是.../hexo_blog/themes/material/_config.yml)下的 _config.yml.為了描述方便,在以下說明中,將前者稱為 站點配置文件,後者稱為 主題配置文件.

去找到你喜歡的主題,然後將其下載下來存放到你的 Themes 這個文件夾下,可以使用NPM,Git等一系列方法下載下來,一般主題的文檔裡面都會有其下載方法的介紹,例如我使用的 Material 主題的下載方法.
複製完成後,修改主題文件夾名稱,將其修改為 AAA(你的主題名稱),然後打開站點配置文件,找到theme字段,並將其值更改為AAA.
運行hexo s --debug 並訪問http://localhost:4000即可查看你的主題修改效果.

文件夾名稱可自由修改,並不是唯一的,只需要 theme 字段與之對應即可.這裡有一點必須要注意,配置項之間必須要有一個空格,例如theme:material這種情況是會報錯的,要向下面這樣.

關於 Hexo Material 主題的相關配置

這裡我會將分享我關於Material配置時的一些踩坑經驗,使用其他主題的童鞋可以直接跳過這一段,去看後面的其他優化配置.

Material的相關配置文檔可以直接查看官網配置文檔,但是我在配置的一些過程中發現該網站中的文檔部分沒有跟上最新發佈的版本,例如關於文章評論這一塊,並沒有網易雲跟帖的相關說明,但是在最新的版本中,已經跟新了對網易雲跟帖的支持.推薦大家直接去查看其 Github 上面的文檔—material-theme-docs,這裡更新的比較及時.

站點配置文件:.../hexo_blog/_config.yml
主題配置文件: .../hexo_blog/themes/material/_config.yml

站點配置文件

這裡我主要介紹一下關於博客使用語言的設置,其默認的是英語,我們可以編輯站點配置文件,將language設置成你想要的語言,常用的幾種如下:

英語: en
簡體中文: zh-CN
繁體中文: zh-TW

language: zh-CN

代碼高亮設置

這裡可以使用 hexo-prism-plugin這個插件來讓我們文章中的代碼實現高亮，具體文檔官方已經寫得很詳細了,這裡我就不再多說,大家直接去參考 Hexo-Prism-Plugin 插件文檔即可.

主題配置文件

這裡我直接貼出我的配置文件,大家可以結合官方文檔參考下,但我會在下面一些有可能踩坑的地方做出一些相關註釋,大家可以配合著一起看下.

#  .../hexo_blog/themes/material/_config.yml
---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Head info
head:
    favicon: "/img/favicon_c.png"  //網站的 favicon
    high_res_favicon: "/img/favicon_c.png"  //高清 favicon
    apple_touch_icon: "/img/favicon_c.png"  //IOS 主屏按鈕圖標
    keywords: 前端,全棧,Web,自學編程,學習分享  //網站關鍵詞,文章的關鍵字會結合你對文章打上的相應標籤來一起顯示
    site_verification:  //向搜索引擎驗證你對站點的所有權,後面會專門做這方面的 SEO
        google:
        baidu:

    # Enable generate structured-data as JSON+LD for SEO or not.
    #        Set as 'false' if it cause some wrong when `hexo g`.
    structured_data: true  //用於改善搜索引擎對你網站的 SEO, 建議開啟

# Jump Links Settings
url:
    rss:  //設置生成的 rss 或 atom url
    daily_pic: "#" //設置 daily_pic 模塊 點擊時跳轉的 url
    logo: "#" //設置 logo 點擊時跳轉的 url



# ---------------------------------------------------------------
# Style Settings
# ---------------------------------------------------------------

# Shemes  //主題選擇設置,現在只有默認的 Paradox 和至簡模式的 Isolation,去掉對應的 # 號就可使用
scheme: Paradox
#scheme: Isolation

# UI & UX: slogan, color, effect
uiux:
    slogan: "XXXXXXXXXXX"
    theme_color: "#607D8B"
    theme_sub_color: "#00838F"
    hyperlink_color: "#00838F"
    button_color: "#757575"
    android_chrome_color: "#607D8B"
    nprogress_color: "#29d"
    nprogress_buffer: "800"

slogan — 網站標語

slogan: 顯示在blog_info模塊中的標語,我們可以將其可以設置成單行或者多行,支持 HTML 標籤.

單行格式: slogan: "我愛吃土豆"
多行格式:(注意縮進)

slogan: 
    - "我愛吃土豆"
    - "我愛吃番茄"

我繼續接上面開始說明 .../hexo_blog/themes/material/_config.yml中的相關代碼.

# JS Effect Switches --- 用來控制 Material 主題中自帶的多種 js 特性
js_effect:
    fade: true
    smoothscroll: false

# Reading experience --- 首頁文章輸出摘要的字符長度
reading:
    entry_excerpt: 80

# Thumbnail Settings --- 用於設置文章縮略圖相關
thumbnail:
    purecolor:
    random_amount: 19

# Background Settings
# bing available parameter:
#     new | color= | type=
#         color available value: black, blue, brown, green, multi, orange, pink, purple, red, white, yellow
#         type available value: A (animal), C (culture), N (nature), S (space), T (travel)
background:
    purecolor: "#F5F5F5"
    #bgimg: "/img/bg.png"
    bing:
        enable: false
        parameter:

# Images Settings
img:
    logo: "/img/logo_c.png"
    avatar: "/img/avatar.JPG"
    daily_pic: "/img/daily_pic.jpg"
    sidebar_header: "/img/sidebar_header.jpg"
    random_thumbnail: "/img/random/material-"
    footer_image:
        #upyun_logo:
            #link: "https://www./"
            #src: "/img/upyun_logo.svg"

# Custom Fonts
#   family: the font-family which will be used in the theme
#   host: uri of fonts host.
#       Available value of "host": google | baomitu | ustc | custom
fonts:
    family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif
    use: baomitu
    custom_font_host:

# Card Elevation Level
card_elevation: 2

# Copyright
# Specify the date when the site was setup.
#   For example, if you set it as 2015, then footer will show '? 2015 - 2017'
copyright_since: 2017

# Qrcode for redirect at other device
#   use: choose which method to generate the qrcode for each posts.
#       Available value of "use": plugin | online
#           - When use "plugin", you need to install the hexo-helper-qrcode.
#           - When use "online", the qrcode will be generated by 'pan.baidu.com' in China.
qrcode:
    enable: true
    use: plugin


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# TOC Button

toc:
#   use: choose whether the line_number of toc will show or not.
#       Available value of "linenumber": true | false
    linenumber: true

# SNS Menu
sns:
    email: xxx@email.com
    facebook: 
    twitter: 
    googleplus: 
    weibo:
    instagram:
    tumblr:
    github: "https://www.github.com/xxx"
    linkedin: "https://www.linkedin.com/in/xxx/"
    zhihu: "https://www.zhihu.com/people/xxx"
    bilibili:
    telegram:

# SNS Share Switch
sns_share:
    twitter: true
    facebook: true
    googleplus: true
    weibo: true
    linkedin: true
    qq: true
    telegram: false

# Sidebar Customize
sidebar:
    dropdown:
        Email Me:
            link: "mailto:xxx@email.com"
            icon: email
    homepage:
        use: true
        icon: home
        divider: false
    categories:
        use: true
        icon: chrome_reader_mode
        divider: false
    tags:
        use: true
        icon: chrome_reader_mode
        divider: false
    archives:
        use: true
        icon: timeline
        divider: false
    pages:
        標籤雲:
            link: "/tags"
            icon: cloud_circle
            divider: true
        Timeline:
            link: "/timeline"
            icon: send
            divider: false
        Gallery:
            link: "/gallery"
            icon: photo_library
            divider: false
        About Me:
            link: "/test"
            icon: person_pin
            divider: true
    article_num:
        use: true
        divider: false
    footer:
        divider: false
        theme: false
        support: false
        feedback: false
        material: false

sidebar — 側邊欄

關於側邊欄的一些相關配置這裡有些部分我需要說明一下: 圖標選擇網站是這個(需要翻牆),只需要向下面一樣把 icon 對應的配置項換掉就可以切換圖標.

homepage: 主頁
catagories: 文章分類
tags: 文章打上的標籤
archives: 文章按時間歸檔
pages: 用於設置一些獨立頁面的入口(相關頁面需要自己開啟,後面後有相關說明),格式如下:

鏈接名稱:
    link: "/xxx" //url 地址
    icon: xxxx   // 圖標樣式
    divider: true/false //是否顯示下劃線

article_num: 是否顯示文章數目統計
footer: 配置側邊欄的底部


# ---------------------------------------------------------------
# Integrated Services
# ---------------------------------------------------------------

# MaterialCDN
# When you set 'use' as true, the needed css, js, font file will have a new src.
# The new src will have the base domain you configured in 'base'.
materialcdn: 
    use: false 
    base: xxxx

# Comment Systems
# Available value of "use":
#     disqus | disqus_click | changyan | 163gentie
comment:
    use: 163gentie
    shortname: 
    changyan_appid:
    changyan_conf:
    changyan_thread_key_type: path
    gentie_productKey:  xxxxx

# Search Systems
# Available value:
#     swiftype | google | local
search:
    use: local
    path: search.xml
    field: all
    #swiftype_key:

# Analytics Systems
# Available value:
#     baidu | google | cnzz
analytics:
    use: baidu
    site_id: 8c824176282809c2a3153ab0c6883a31

# Leancloud Views
leancloud:
    enable: false
    app_id: #你的 app_id
    app_key: #你的 app_key
    av_core_mini: "https://cdn1./static/js/av-core-mini-0.6.1.js"

# Busuanzi 不蒜子 Views
busuanzi:
    enable: true
    all_site_uv: true
    post_pv: true
    busuanzi_pure_mini_js: "https://dn-lbstatics./busuanzi/2.3/busuanzi.pure.mini.js"

sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

集成服務

materialcdn: 使用 cdn 來加速 Material 主題需要使用到的一些靜態資源,例如 jq 等,但我感覺效果不是很明顯,所以沒有使用.
comment: 文章使用的評論系統,內置的目前有四種
- Disqus/Disqus_click: 這兩個區別不是很大,後者需要點擊才顯示評論,但在國內環境下,加載速度很慢,不建議使用
- changyan: 暢言,唯一缺點就是國內使用需要域名提前備案,沒有備案不能使用
- 163gentie: 網易雲跟帖,這個配置起來很簡單,不關風格還是功能都比較完善,推薦使用,只需要去註冊一下網易雲跟帖,然後設置好自己的評論格式,再在gentie_productKey這一欄當中填入你的 key 就行.這個 key 在獲取代碼中的 WEB 代碼當中,如下圖:
search: 跟網站的 seo 相關,我會在後面詳細的說明關於這一方面的設置
analytics: 網站的數據統計與分析,關於這一塊推薦使用國內的baidu,百度在這一方面確實做得更加符合國情一些,而且我們還可以綁定微信公眾號,隨時瞭解自己網站的相關統計數據.
- 百度統計: 只需要登錄百度統計,在站點的代碼獲取頁面複製hm.js?後面那串統計腳本id,填入site_id即可.
Leancloud/busuanzi: Pv&UV統計,這裡我偷懶直接使用的不蒜子的服務,使用不蒜子僅需在主題配置文件中將busuanzi: enable: 的值設置為 true
- enable: 默認為 false。
- all_site_uv: 默認為 false,可統計全站的獨立訪客人數，即可在 blog_info 模塊的 Menu 菜單中看到
- post_pv: 默認為 false,統計每篇文章的頁面瀏覽次數，在文章頁的 分享按鈕 菜單中可看到
- busuanzi_pure_mini_js: 統計 js,調用不蒜子統計 js 文件，可將該文件保存至你的 WebServer 或 CDN 中，然後在這裡填入 URL
sitemap/baidusitemap: 關於搜索引擎優化,會在下面進行說明.

以下頁面配置好後只是已經存在於你的博客裡面了,可以直接輸入相應地址查看,但是要想在側邊欄新建快捷入口,請參考該文側邊欄中pages的相關配置.

創建`友情鏈接`頁面

創建頁面

在 hexo 目錄下的 source 文件夾中內創建一個名為 links的文件夾。

然後在文件內創建一個名為 index.md 的 Markdown 文件。

最後在 index.md 文件內寫入如下內容即可。

---
title: links
date:
layout: links
---

這裡要注意的是title(對應的鏈接名稱) 可修改，layout 不可修改。

添加數據

只需我們同樣在 hexo 目錄下的 source 文件夾內創建一個名為 _data（禁止改名）的文件夾。

然後在文件內創建一個名為 links.yml 的文件,在其中添加相關數據即可。

這裡單個友情鏈接的格式為：

Name:
    link: http://
    avatar: http:///avatar.png
    descr: "這是一個描述"

添加多個友情鏈接，我們只需要根據上面的格式重複填寫即可。

將 Name 改為友情鏈接的名字，例如 Viosey。
http:// 為友情鏈接的地址。
http:///avatar.png 為友情鏈接的頭像。
這是一個描述 為友情鏈接描述。

創建「圖庫」頁面

創建頁面

在 hexo 目錄下的 source 文件夾內創建一個名為 gallery的文件夾。

然後在文件內創建一個名為 index.md 的 Markdown 文件。

在 index.md 文件內寫入如下內容即可。

---
title: gallery
date:
layout: gallery
---

title 可修改，layout 不可修改(同上)。

添加數據

在 hexo 目錄下的 source 文件夾內創建一個名為 _data（禁止改名）的文件夾。

然後在文件內創建一個名為 gallery.yml 的文件,在其中添加如下格式的數據即可。

其中單個圖片的格式為：

Name:
    full_link: http:///full-image.png
    thumb_link: http:///thumb-image.png
    descr: "這是一個描述"

添加多張圖片，只需要根據上面的格式重複填寫即可。

將 Name 改為圖片名字，例如 Material。
http:///full-image.png 為完整圖片的地址。
http:///thumb-image.png 為圖片縮略圖的地址，如果沒有縮略圖也可使用完整圖片的地址。
這是一個描述 為圖片描述。

創建「標籤雲」頁面

創建頁面

在 hexo 目錄下的 source 文件夾內創建一個名為 tags（只是建議，可根據自己喜好修改）的文件夾。

然後在文件內創建一個名為 index.md 的 Markdown 文件。

在 index.md 文件內寫入如下內容。

---
title: tags
date:
layout: tags
---

title 可修改，layout 不可修改。

創建「時間軸」頁面

創建頁面

在 hexo 目錄下的 source 文件夾內創建一個名為 timeline（只是建議，可根據自己喜好修改）的文件夾。

然後在文件內創建一個名為 index.md 的 Markdown 文件。

在 index.md 文件內寫入如下內容即可。

---
title: timeline
date:
layout: timeline
---

title 可修改，layout 不可修改。

到此,關於Material主題的相關配置我覺得已經說得算是比較清楚了,下面,我會說下,我關於網站 SEO 所做的一些嘗試.

網站 SEO 優化

關於網站 SEO 這一塊我主要參考了這位小姐姐的這篇文章,但是有些發現她有些地方寫的不是很清楚,自己也在這一塊設置時也摸索了半天,所以直接像大家分享一下我的踩坑經驗.

讓百度收錄你的站點

我們直接在百度中搜索site:你的域名就可以查看百度是否已經收錄你的網站,如果沒有收錄的話,你就要去去登錄百度站長平台在站點管理中點擊添加網站,然後輸入你的站點地址, 注意,這裡需要輸入我們自己購買的域名,不能使用xxx.之類域名.

步驟如下:

輸入網站: 添加域名時建議是帶上www的前綴
站點屬性: 選擇自己網站類型
驗證網站: 驗證網站的所有權,這裡主要有以下三種
- 文件驗證: 文件驗證文件存放的位置需要放在source文件夾下,txt 格式的不會被 hexo 預編譯,其他格式要在頭部加上layout: false
- HTML 標籤驗證: 將他給你的代碼添加到網站首頁的 head 標籤內
- CNAME 驗證: 推薦使用,將對應的 CNAME 文件放在你的 source 文件夾中即可,只要在其中寫上你的域名地址就行;除此之外還會要求你到自己的域名提供商(我的是萬網)上添加 CNAME 的解析(會面在國內外分流這一塊會與更詳細的解析說明);

生成網站地圖 — sitemap

這裡需要我們安裝下面兩個插件,先執行下面命令

 npm i hexo-generator-sitemap hexo-generator-baidu-sitemap -S

再在你的站點配置文件中修改 URL 為你的站點地址

當你在 hexo g 時,會在public文件夾中生成sitemap.xml 和baidusitemap.xml 兩個文件,如果你已經提前將你的 hexo 部署到網上,這是可以直接打開http://yoururl/sitemap.xml和http://yoururl/baidusitemap.xml來查看.(這兩者的區別在於 baidusitemap.xml 是百度搜索引擎的專用文件,另一個是通用).

向百度提交鏈接

如何選擇鏈接提交方式
1、主動推送：最為快速的提交方式，推薦您將站點當天新產出鏈接立即通過此方式推送給百度，以保證新鏈接可以及時被百度收錄。
2、自動推送：最為便捷的提交方式，請將自動推送的JS代碼部署在站點的每一個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度。可以與主動推送配合使用。
3、sitemap：您可以定期將網站鏈接放到sitemap中，然後將sitemap提交給百度。百度會週期性的抓取檢查您提交的sitemap，對其中的鏈接進行處理，但收錄速度慢於主動推送。
4、手動提交：一次性提交鏈接給百度，可以使用此種方式。

這裡我推薦大家使用主動推送,當你主動推送時,可以縮短百度爬蟲發現您站點新鏈接的時間,使新發佈的頁面可以在第一時間被百度收錄;對於網站的最新原創內容，使用主動推送功能可以快速通知到百度，使內容可以在轉發之前被百度發現.

使用主動推送

需要先安裝插件npm i hexo-baidu-url-submit -S
然後再在站點配置文件中按如下方式新增字段

baidu_url_submit:
  count: 10 # 提交最新的鏈接數
  host:  # 在百度站長平台中註冊的域名,雖然官方推薦要帶有 www, 但可以不帶.
  token:  XXXXX # 你的秘鑰,每個人都不一樣,獲取方法在下面
  path: baidu_urls.txt # 文本文檔的地址,新鏈接會保存在此文本文檔裡

然後加入新的 deploy

deploy:
 - type:baidu_url_submitter

注意,這裡多個 type 的寫法應該這麼寫,前面那個 type 是我推送到 Gitub 與 Coding 的page頁面的配置,後面再講這個.

密鑰的獲取位置在網頁抓取中的鏈接提交這一塊,如下所示:

最後當你執行hexo d時新的連接就會被推送上去.
推送成功時,會有如下終端提示,各種不同的推送反饋字段說明在這裡查看,一般來說,推送失敗都是地址不相符造成的,我們只需對比baidu_url_submit在public中生成的baidu_urls.txt的地址,與自己填寫在host字段中是否一樣即可,這裡需要注意的是,多加www會導致上傳失敗(血的教訓…)

讓 Google 收錄你的網站

登錄 Google 網絡站長,點擊添加屬性按要求添加你的網站

驗證你的網站所有權,我推薦使用 HTML 文件上傳的方式,將他給你的html 文件放入 sources 文件夾下,但 html 文件默認會被 hexo 預編譯,所以這裡,我們要手動設置讓 hexo 不要編譯該文件,在文件開始添加layout:false即可.

添加 sitemap : 進入 Google Search Console - 抓取 - 站點地圖,點擊「添加/測試站點地圖」,輸入你的博客網址. 若無報錯則站點地圖提交成功
提交 robots.txt:
robots.txt 是一種存放於網站根目錄下的 ASCII 編碼的文本文件，它的作用是告訴搜索引擎此網站中哪些內容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目錄下的 source 文件夾中，博客生成後在站點目錄 /public/ 下。

我的 robots.txt 文件內容如下：

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

robots.txt 文件更新至網站後可進入 Google Search Console - 抓取 - robots.txt 測試工具進行測試。

這裡部分參考自Hexo 博客搜索 SEO 優化 – 谷歌篇

優化你的 URL

這段話參考自上面那個小姐姐的文章,寫的很好,這裡我直接拿來用下
seo搜索引擎優化認為，網站的最佳結構是用戶從首頁點擊三次就可以到達任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：sitename/year/mounth/day/title四層的結構，這樣的url結構很不利於seo，爬蟲就會經常爬不到我們的文章，所以我們可以將url直接改成sitename/title的形式，並且title最好是用英文，在根目錄的配置文件下修改permalink如下：

將你的網站同時託管到 Github 和 Coding 上,國內外分流

Coding 類似於中國的 Github 一樣,也提供了 Pages 服務,但對我們而言,跟 Github 不同的地方在於免費用戶能擁有五個私人倉庫,這個可以用來部署自己的一些私人代碼,而且配合 Github 可以做到國內IP 訪問 Coding 的 Pages 頁面,國外訪問 Github 上面的 Pages 頁面.大致配置過程如下:

在 Coding 上創建倉庫: 這裡注意要去創建一個公有的倉庫,私有倉庫是沒有 pages 服務的.
將你的公鑰傳上去.這裡網上關於自己公鑰的相關教程很多,我就不多敘述了.
修改 hexo 的站點配置文件中的 deploy 選項,配置你的 Github 與 Coding 倉庫,需要注意的是其中 Github 的倉庫名xxx.必須跟你的 Github 名稱一樣:

每次上傳的時候都需要輸入你的賬號密碼之類的信息,可以直接將你賬號密碼寫在上傳地址中,這樣就不用每次更新都輸入你的賬號密碼了

例如你的賬號為:crown3,密碼為 BBB;
那你的repo填寫為下面這樣即可
github: https://crown3:BBB@github.com/crown3/crown3..git
coding: https://crown3:BBB@git.coding.net/crown3/倉庫名.git

設置 coding 的 pages 服務:在pages頁面將部署來源選擇為master分支，然後將自定義域名填寫自己購買的域名就可以了
設置域名解析: 在你的域名提供商那裡修改你的域名解析就行,例如我的是萬網,按照下圖所示,添加這五條解析即可做到國內外訪問分流.

將自己的代碼託管到私有倉庫

當我們將自己的代碼託管到私有倉庫後,就可以在任何一台電腦上將你的 hexo 部署代碼下載下來進行編輯,而且可以將你的一些個人密鑰什麼的直接推送到你的代碼倉庫去,這樣更便利於我們的管理維護.

在上文我已經說過了,國內 Coding 的免費用戶可以創建五個私有倉庫,這是可以直接拿來使用,但是如果你對國內的私有倉庫安全性存有懷疑,也可以去使用國外專門做私有倉庫託管的bitbucket,在這裡私有倉庫是可以免費使用的.具體上傳之類的使用方法我就不再細述了,都是基於 git 做的代碼管理,使用方法都大同小異.

使用 Gulp 壓縮你的代碼

代碼壓縮可以明顯減小我們的文件大小,加載速度,這裡我會直接提供我使用的腳本,大家可以直接拿來使用,有需要瞭解相關知識的可以去gulp官網去做相關瞭解.

先安裝Gulp以及我們需要使用的一系列插件:

npm i gulp gulp-clean-css gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-uglify -S

接著創建gulpfile.js: 在你的博客根目錄(跟你站點配置文件同一層)下創建gulpfile.js這個文件,然後在裡面填入如下腳本即可,裡面有相關註釋,感興趣的可以去瞭解一下.

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var runSequence = require('run-sequence');
var Hexo = require('hexo');
// 清除public文件夾
gulp.task('clean', function() {
    return del(['public/**/*']);
});
// 利用Hexo API 來生成博客內容， 效果和在命令行運行： hexo g 一樣
// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function(cb) {
    hexo.init().then(function() {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function() {
        return hexo.exit();
    }).then(function() {
        return cb()
    }).catch(function(err) {
        console.log(err);
        hexo.exit(err);
        return cb(err);
    })
})
// 壓縮public目錄下的所有css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 壓縮public目錄下的所有html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});
// 壓縮public目錄下的所有js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 壓縮public目錄下的所有img： 這個採用默認配置
gulp.task('minify-img', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./public/images'))
})
// 同上，壓縮圖片，這裡採用了： 最大化壓縮效果。
gulp.task('minify-img-aggressive', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
})
// 用run-sequence並發執行，同時處理html，css，js，img
gulp.task('compress', function(cb) {
    runSequence(['minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive'], cb);
});
// 執行順序： 清除public目錄 -> 產生原始博客內容 -> 執行壓縮混淆
gulp.task('build', function(cb) {
    runSequence('clean', 'generate', 'compress', cb)
});
gulp.task('default', ['build'])

執行gulp: 在命令行中輸入gulp build即可

這裡要說明的是,這裡利用Hexo API 來生成博客內容,效果和在命令行運行： hexo g 一樣,所以當我們在執行gulp build時,會根據我們的相關博文來直接生成相應的public文件夾中的內容,並直接進行壓縮,接下來我們運行hexo d上傳上去的代碼會是已經進行相應壓縮了的.

使用七牛圖床來處理我們的圖片

在我的另一篇博文 — 網站配圖,圖片壓縮以及圖床選擇小結中已經簡單介紹過七牛的相關使用了,這裡我想像各位展示下我現在使用七牛圖床的最新姿勢(雖然跟簡書什麼的直接拖拽粘貼就可直接使用還是有點麻煩,但這裡我們可以自己控制我們上傳圖片的大小質量等,而且操作也不麻煩到哪裡去):

選中一張圖片 => 用智圖進行相應壓縮處理 => 使用 iPic 快捷鍵一鍵上傳到七牛雲(cmd + u) => 在文章中直接粘貼已經複製到剪貼板的圖片地址

選擇智圖來壓縮是因為iPic這個軟件自帶的上傳壓縮效果沒有智圖的好,如果對這個配置結果比較感興趣的童鞋可以去看看我另一篇博文!!!

如何操作該博客

相信應該有部分童鞋看完前面所有的配置估計已經被繞的雲裡霧裡的,但不要擔心不要害怕,當你配置好後接下來的使用簡直方便的一批.這裡我簡單的說下按照我這個流程配置完後,日常的使用操作吧.

怎麼使用

~~hexo g: 生成當前博客~~ 重新編寫後的 gulp 任務可以直接生成完成public文件夾中的生成以及壓縮.
gulp build: 生成文件後再壓縮已生成的代碼,圖片等
hexo d: 將最終代碼推送上去

創建文章

使用命令行

hexo new <你的文章名>

手動創建

在 hexo 主目錄下 source -> _posts 新建以 .md 為後綴的文件。

Front-matter

Front-matter 是文件最上方以 --- 分隔的一塊區域,主要用於指定個別文件的變量來設置我們的相關文章等頁面,具體位置如下

Front-matter - 官方介紹

參數	描述	默認值
`layout`	佈局	post
`title`	標題	文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`tags`	標籤（不適用於分頁）
`categories`	分類（不適用於分頁）
`permalink`	覆蓋文章網址
`thumbnail`	縮略圖地址
`toc`	顯示 TOC 按鈕	true
`comment`	顯示評論	true
`notag`	不生成標籤按鈕	false
`top`	置頂	false
`mathJax`	啟用 Mathjax	false
description	每篇文章在搜索結果中顯示的鏈接描述	站點配置文件中的 description

縮略圖功能

在 Material 主題中，每個 Scheme 都有縮略圖功能。
只需要在 Front-matter 中添加參數 thumbnail:，然後填入縮略圖地址即可。

修改你的文章模板

當你每次使用hexo new 你的文章名時,默認生成的模板是這個樣子的

---
title: XXXX
tag: XXXX
date: XXXX
---

但這種這種文章模板沒有一大堆描述屬性,例如description,thumbnail等,明顯不能滿足我們的日常需求,所以我們這是一般會去修改我們的默認模板來滿足我們的需求.這是我們只需修改/scaffolds/下相應的文件即可.

post.md  ==>  對應hexo new 生成的md模板
page.md  ==>  對應hexo new page生成的categories模板

例如我修改的就是/scaffolds/post.md:

---
title: {{ title }} //文章標題
tags: [] //文章的標籤
categories: 文章的分類
description: 文章的搜索結果描述
thumbnail: '文章縮略圖位置'
date: {{ date }} //時間
---

這裡還可以添加一些文章公共的開頭等文字