博客設置

時間 2019-12-07

標籤博客設置简体版

原文原文鏈接

搭建

Hexo + GitHub Pagesphp

Hexo 文檔快速、簡潔且高效博客框架。基於Node.js。Hexo用Markdown（或其它渲染引擎）解析文章，幾秒內可用靚麗主題生成靜態網頁。
GitHub Pages 爲我的和項目提供網站。展現HTML（有服務器可上傳本身服務器）

主題菜單

設置

_config.yml（E:\Blog\themes\next中）
_zh-Hans.yml（E:\Blog\themes\next\languages中）

效果

問題

紅框中應爲中文關於而非英文bout html

緣由

黃框譯文node

鍵是菜單項名稱，區分大小寫。語言文件中找到該菜單譯文則加載譯文；無則用鍵名。
複製代碼

綠框中bout與about不對應致使語言文件中找不到該菜單譯文，從而顯示鍵名bout而非關於。 git

解決

改綠框中bout爲about github

閱讀全文

步驟

需隱藏內容前添
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

disqus 較大牌評論系統，服務穩定，但被牆沒法用。
多說國內較出名評論系統，已關服務暫不考慮。
gitment 基於github issue評論系統，風格很像github。但目前不太穩定且界面沒法定製，可能同博客不協調且評論需github帳號。
livere 中文名來必力，韓國評論系統：
- 支持多格式評論導入、多json格式、https，方便導入以前其它平臺評論數據。
- 簡潔UI提供多種主題。
- 國外東西不受國內限制。

步驟

官網註冊
點安裝
獲data-uid
NEXT主題自己已集成livere評論，只不過被註釋掉了。主題配置文件 _config.yml（E:\Blog\themes\next中）中找到以下片斷：

改成
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

關閉

註釋掉便可 json

音樂

步驟

npm install --save hexo-tag-aplayer裝插件aplayer（音頻）Plugins
npm install hexo-tag-dplayer --save裝插件dplayer（視頻）Plugins

文章任意地方插入以下代碼，去掉註釋，否無效

{% aplayerlist %}
{
    "narrow": false,              //（可選）播放器袖珍風格
    "autoplay": true,             //（可選）自動播放，移動端瀏覽器暫不支持此功能
    "mode": "random",             //（可選）曲目循環類型，有'random'（隨機），'single'(單曲)，'circulation'(循環)，'order'(列表)，默認'circulation' 
    "showlrc": 3,                 //（可選）歌詞顯示配置項，可選項一、二、3
    "mutex": true,                //（可選）該選項開啓時，同頁有其它aplayer播放則該播放器暫停
    "theme": "#e6d0b2",	          //（可選）播放器風格色彩設置，默#b7daff
    "preload": "metadata",        //（可選）音樂文件預載入模式，可選項'none'、'metadata'、'auto'，默'auto'
    "listmaxheight": "513px",     //（可選）該播放列表最大長度
    "music": [
		{                                                           
	        "title": "Sometimes When We Touch",                                        
	        "author": "Oliveia",                                             
	        "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/SometimesWhenWeTouch.mp3",  
	        "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000003LIDEL0NQInJ.jpg?max_age=2592000", 
	        "lrc": "https://歌詞.lrc"                  
    	}
    ]
}
{% endaplayerlist %}
複製代碼

pic即歌曲顯示圖片連接。建議歌詞lrc用URL形式，txt格式編輯易出問題。歌曲下載後上傳七牛雲可在七牛雲生成外鏈，七牛雲有免費存儲空間。但七牛雲歌曲外鏈不支持https致配有ssl證書的掉綠鎖，對該問題可棄七牛雲，改騰訊雲。瀏覽器

hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

HTTPS

前言

谷歌瀏覽器或Safari提示網站不被信任，點繼續纔可展現博客且地址欄顯紅色×。在此改博客協議爲Https。緩存

購買證書
免費CA證書。騰訊雲、阿里雲都提供。但需備案且有時間限制。
CDN反向代理

因GitHub Pages不支持上傳證書，故這裏主介紹在國外CDN服務提供商Cloudflare基礎上，經過CDN配置反向代理。安全

原理

Cloudflare提供DNS解析服務且速度很快，阿里雲半小時解析生效在此瞬間生效。它提供免費https服務（非應用SSL證書）。實現模式即用戶到CDN服務器鏈接爲https，而CDN服務器到Github Pages服務器鏈接爲http，即在CDN服務器處加反向代理。

小鎖爲用戶鏈接到Cloudflare證書，Cloudflare到GitHub Pages無https，但對靜態博客已足夠。

配置

官網註冊後添域名（購買）

免費或付費
點DNS進解析界面

前兩個是域名指向GitHub服務器IP（GitHub文檔給出），最後是域名指向所建倉庫名。嚴格按此配置。
```
紅框中開啓雲朵，否接下來沒法正確配置
複製代碼
```

用cloudflare給出DNS解析服務器替換域名購買處DNS解析服務器並刪域名購買處解析記錄。此後用clouleflare解析DNS。

替換

忽略警告
點crypto，選Full或Flexible

選項區別

最後選項需證書支持。下滑頁面開啓Always use HTTPS
上述步驟配置好基本完成。爲防止地址欄輸入http://XXX進入博客出現非Https效果，故如圖紅框中設置，強制跳轉。

效果

後臺

不足

上述驟操做完雖https且無紅叉，但不顯綠色小鎖而是歎號。緣由爲當前頁有非https連接致使，如圖片圖牀或評論插件不支持https，更換支持https圖牀或評論插件便可。

文章閱讀量

步驟

登陸LeanCloud後進控制檯，建立新應用。點存儲，新建Class（名須Counter）。
查App ID和App Key
改主題配置文件 _config.yml（E:\Blog\themes\next中）

改後
安全域名
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

後臺

分類

建立

hexo new page categories新建categories頁
編輯新建頁，改title爲分類並設頁面類型categories，主題自動爲該頁顯示全部分類
```
title: 分類
date: 2018-03-14 18:21:16
type: "categories"
複製代碼
```

啓用多說或Disqus評論，默認頁面也會帶評論。關閉則添字段comments並設false title: 分類 date: 2018-03-14 18:21:16 type: "categories" comments: false

菜單添連接。編輯主題配置文件 _config.yml（E:\Blog\themes\next中），開啓menu中categories: /categories/ || th：

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
複製代碼

關聯

文章添分類
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

多終端同步

背景

Hexo是靜態博客，全部頁面都靜態方式經過本地文件渲染後部署，這即引起多終端部署。如公司電腦配置好回家寫做，但家中什麼都沒，仍需重配環境。關鍵兩終端內容不一樣致使服務器數據被最後一次部署覆蓋，從而前幾回數據丟失。
git服務器僅有public是不夠的，需整個博客文件夾全部文件才能進行多終端操做。

思路

Hexo流程即git工做流程，不論GitHub仍是BitBucket都遵循GitFlow。GitFlow即多終端多人協同工做解決方案，故用它實現多終端同步。

文件結構

.
├── .deploy #需部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態網頁文件
├── scaffolds #模板
├── source #博客正文和其它源文件，40四、favicon、CNAME都應放這裏
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json
複製代碼

Hexo流程

hexo g source文件夾存放文章、tag、歸檔等信息，即博客內容。終端執行hexo g時被source中文件按某種規則方式渲染成靜態頁面文件放到public中：
hexo d 將public中文件push到git倉庫
hexo clean 同gitflow無關，清理緩存。運行前首先刪除public文件，而後執行hexo g從新渲染進public，以後hexo d進行部署。這樣即避免以前內容對咱們形成影響。

方式

網盤備份

優勢免費且操做簡單
不足
- 備份後同步較麻煩，每次另外一臺電腦都需手動下載備份文件並覆蓋。
- 開啓雲端自動備份，寫博客過程保存文件則觸發百度雲上傳，上傳過程產生xxx.cfg文件致使Hexo解析失敗，從而hexo s生成的本地服務器進程中止，不便邊寫邊預覽。

Git

優勢部署完更新方便，Hexo更新後只需再更新全站到git便可
不足
- 部署較複雜
- 國內外現知名git服務提供商主要有：github（私有庫收費）、gitcafe（私有庫收費）、bitbucket（私有庫免費）、oschina（私有庫免費）、coding（私有庫免費）等。

步驟

A電腦

.gitignore文件末尾添/.deploy_git，/public，一個一行
- .gitignore文件做用是聲明不被git記錄文件。blog根目錄下.gitignore是hexo初始化生成，可先刪除或直接編輯，對hexo無影響。建議.gitignore添如下內容：
```
/.deploy_git 
/public
複製代碼
```
  - .deploy_git是hexo默認.git配置文件夾，不需同步
  - public內文件根據source文件夾內容自動生成，不需備份，否則每次改動內容太多
- 有些插件或主題從git克隆，每文件夾下都有對應.git文件夾，先刪掉，不然和blog倉庫衝突致使上傳失敗。
- .git默認隱藏文件夾，需先開啓顯示隱藏文件夾。.git文件夾被刪後整個文件對應git倉庫狀態也被清空。
博客文件根目錄下右擊鼠標選Git Bash Here
git init初始化本地倉庫

無初始化執行下步提示
git remote add origin git@github.com:xxx/xxx.github.io.git
- origin是本地分支
- remote add映射本地倉庫到雲端
git add .添加全部本地文件到git

添加blog目錄全部文件，注意.（不包含.gitignore聲明文件）
git commit -m "更新說明"git提交
git branch hexo新建分支hexo
git checkout hexo切換分支爲hexo
git push origin hexo推送到遠程倉庫hexo分支

GitHub變化

hexo分支

分支提交

B電腦

假設B電腦無源文件

安裝git、Node.js、Hexo
git clone -b git@github.com:xxx/xxx.github.io.git hexo克隆hexo分支到本地
npm install安裝依賴，再也不初始化（hexo init）
git init
git remote add origin git@github.com:xxx/xxx.github.io.git
- origin是本地分支
- remote add映射本地倉庫到雲端
git fetch --all
git reset --hard origin/master

操做

於一文件夾下右擊鼠標選Git Bash Here
git init初始化本地倉庫

無初始化執行下步提示
git pull git@github.com:xxx/xxx.github.io.git hexo拉取遠程倉庫hexo分支
hexo new post 「xxx」建立博客
編輯博客
git add source添加source文件夾到本地git（僅source文件夾變更）
git提交（git commit -m "多終端同步更新博客"）
git push origin hexo推送到遠程倉庫hexo分支
hexo g -d或hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s部署

示例

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git pull git@github.com:snpmyn/snpmyn.github.io.git hexo
From github.com:snpmyn/snpmyn.github.io
 * branch            hexo       -> FETCH_HEAD
Already up to date.

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git add source
warning: LF will be replaced by CRLF in source/_posts/博客搭建.md.
The file will have its original line endings in your working directory.

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git commit -m "fifth"
[hexo 305cf46] fifth
 1 file changed, 34 insertions(+)

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git push origin hexo
Username for 'https://github.com': snpmyn
muyang541527remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/snpmyn/snpmyn.github.io.git/'

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ muyang541527
bash: muyang541527: command not found

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git push origin hexo
Username for 'https://github.com': snpmyn
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 1.02 KiB | 1.02 MiB/s, done.
Total 5 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/snpmyn/snpmyn.github.io.git
   da365d3..305cf46  hexo -> hexo

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ hexo g -d
INFO  Start processing
WARN  ===============================================================
WARN  ========================= ATTENTION! ==========================
WARN  ===============================================================
WARN   NexT repository is moving here: https://github.com/theme-next
WARN  ===============================================================
WARN   It's rebase to v6.0.0 and future maintenance will resume there WARN =============================================================== INFO Files loaded in 5.59 s INFO Generated: CNAME INFO Generated: index.html INFO Generated: categories/index.html INFO Generated: archives/index.html INFO Generated: images/cc-by-nc.svg INFO Generated: images/quote-l.svg INFO Generated: archives/2018/03/index.html INFO Generated: images/cc-by-sa.svg INFO Generated: archives/2018/index.html INFO Generated: categories/工具/index.html warning: LF will be replaced by CRLF in 2018/03/06/博客搭建/index.html. The file will have its original line endings in your working directory. [master d519607] Site updated: 2018-03-16 09:47:01 2 files changed, 11 insertions(+), 7 deletions(-) Branch 'master' set up to track remote branch 'master' from 'git@github.com:snpmyn/snpmyn.github.io.git'. To github.com:snpmyn/snpmyn.github.io.git cb58169..d519607 HEAD -> master INFO Deploy done: git Administrator@LKKJ0004 MINGW64 /e/Blog (hexo) $ hexo s INFO Start processing WARN =============================================================== WARN ========================= ATTENTION! ========================== WARN =============================================================== WARN NexT repository is moving here: https://github.com/theme-next WARN =============================================================== WARN It's rebase to v6.0.0 and future maintenance will resume there
WARN  ===============================================================
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
INFO  Bye!

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$
複製代碼

GitHub變化

分支提交

SEO

SEO（Search Engine Optimization）譯爲搜索引擎優化，即利用搜索引擎搜索規則提升目前網站在有關搜索引擎內天然排名。常見如網站結構調整、網站內容建設、網站代碼優化及站外優化。

查看

搜索引擎輸入site:<域名>，以下則代表網站沒被百度收錄。

步驟

網站全部權驗證

登陸百度站長平臺，站點管理中點添加網站，輸站點地址。建議輸入www開頭地址，不要輸入username.github.io，因github不準百度spider爬取github內容。站點被百度收錄，只能用本身購買域名。
選完網站類型後驗證網站全部權，三種驗證方式：
- 文件驗證文件需存放source文件夾
- html標籤驗證 hexo會編譯html文件。加layout:false，便可不被hexo編譯。（驗證文件txt格式不須要）
- cname解析驗證最簡單，只需加一條解析。記錄類型CNAME，主機記錄token，記錄值ziyun.baidu.com。
驗證結果

站點地圖

用npm自動生成sitemap（站點地圖）後提交sitemap到百度和其它搜索引擎。

安裝sitemap插件

命令

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save
複製代碼

操做
變化

根目錄配置文件 _config.yml（E:\Blog中）改url爲站點地址

根目錄配置文件 _config.yml（E:\Blog中）添以下代碼

# 自動生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
複製代碼

寫法正確
- 提示
錯誤
- 提示

hexo g執行構建，正常狀況E:\Blog\public下多出兩文件
- sitemap.xml 通用
- baidusitemap.xml 百度專用
提交方式
- 手動提交一次性提交連接給百度
- 自動提交
  - 主動推送（實時）
    - 及時發現可縮短百度爬蟲發現您站點新連接時間，新發布頁面可在第一時間被百度收錄。
    - 保護原創對網站最新原創內容，主動推送功能可快速通知到百度，內容可在轉發前被百度發現。主動推送提供4種提交方式，curl、post、php、ruby。
  - 自動推送最便捷提交方式，將自動推送的JS代碼部署在站點每個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，連接會被自動推送給百度。可與主動推送配合使用。
  - sitemap 可按期將網站連接放到sitemap中，而後將sitemap提交給百度。百度會週期性抓取檢查您提交的sitemap，處理其中連接進行，收錄速度慢於主動推送。

通常主動提交比手動提交效果好，從效率上講：

主動推送>自動推送>sitemap
複製代碼

主動推送

npm install hexo-baidu-url-submit --save安裝插件
根目錄配置文件 _config.yml（E:\Blog中）新增字段baidu_url_submit
- 字段中token獲取點連接提交
根目錄配置文件 _config.yml（E:\Blog中）加入新deploye
hexo g -d或hexo g->hexo d -g或hexo clean->hexo g->hexo d -g提交併推送
變化 E:\Blog\public中生成baidu_urls文件
錯誤

或

主動推送常見問題
分析下圖中域名與第一步網站全部權驗證添加域名不對照
解決從第一步網站全部權驗證重複操做，添加網站改www.muyang.site爲muyang.site。
結果

自動推送

主題配置文件 _config.yml（E:\Blog\themes\next中）設baidu_push爲true：

設後即將位於themes\next\layout_scripts\baidu_push.swig代碼自動推送到百度。這樣每次訪問博客中頁面即自動向百度提交sitemap。

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
複製代碼