個人網站：https://sunfove.xyz，歡迎交流

Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
hexo官網： http://hexo.io
github: https://github.com/hexojs/hexo

hexo優勢

由于github pages存放的都是靜態文件，hexo所做的就是將md文件都放在本地，每次寫完文章后調用寫好的命令來批量完成相關頁面的生成，然后再將有改動的頁面提交到github。
hexo具有以下特點：

• 超快速度：Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染
• 支持 Markdown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多數插件
• 一鍵部署：只需一條指令即可部署到 GitHub Pages, Heroku 或其他網站。
• 豐富的插件：Hexo 擁有強大的插件系統，安裝插件可以讓 Hexo 支持 Jade, CoffeeScript

安裝hexo

安裝 Hexo 相當簡單。然而在安裝前，您必須檢查電腦中是否已安裝下列應用程序：

• Node.js (Node.js 版本需不低于 8.6，建議使用 Node.js 10.0 及以上版本)
• Git

如果您的電腦中已經安裝上述必備程序，那么恭喜您！接下來只需要使用 npm 即可完成 Hexo 的安裝。

npm install hexo-cli -g
hexo init 
npm install
hexo s

如果您的電腦中尚未安裝所需要的程序，請根據hexo官網安裝指示完成安裝:https://hexo.io/zh-cn/docs/。

hexo指令

配置好之后，hexo就可以使用了，常用的hexo命令可訪問hexo指令。

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

縮寫形式：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

組合命令

hexo s -g #生成并本地預覽
hexo d -g #生成并上傳

Github

GitHub是一個面向開源及私有軟件項目的托管平臺，因為只支持git 作為唯一的版本庫格式進行托管，故名GitHub。

Github簡介

作為開源代碼庫以及版本控制系統，Github擁有超過900萬開發者用戶。隨著越來越多的應用程序轉移到了云上，Github已經成為了管理軟件開發以及發現已有代碼的首選方法。

如前所述，作為一個分布式的版本控制系統，在Git中并不存在主庫這樣的概念，每一份復制出的庫都可以獨立使用，任何兩個庫之間的不一致之處都可以進行合并。

清空Github倉庫內容

如果想要清空github倉庫中的內容，可以先創建分支，然后清空本地master中的文件，保留.git和readme.md，清空后git到遠程倉庫中，可參考Github清空遠程倉庫
。

配置SSH key

為什么要配置這個呢？因為你提交代碼肯定要擁有你的github權限才可以，但是直接使用用戶名和密碼太不安全了，所以我們使用ssh key來解決本地和服務器的連接問題。

$ cd ~/. ssh #檢查本機已存在的ssh密鑰

如果提示：No such file or directory 說明你是第一次使用git。

ssh-keygen -t rsa -C "郵件地址"

然后連續3次回車，最終會生成一個文件在用戶目錄下，打開用戶目錄，找到 .ssh\id_rsa.pub 文件，記事本打開并復制里面的內容，打開你的github主頁，進入個人設置 -> SSH and GPG keys -> New SSH key：

配置SSH key

ssh -T git@github.com # 注意郵箱地址不用改

看到如下提示，說明配置成功。

You've successfully authenticated, but GitHub does not provide shell access.

此時你還需要配置：

$ git config --global user.name "liuxianan"http:// 你的github用戶名，非昵稱
$ git config --global user.email  "xxx@qq.com"http:// 填寫你的github注冊郵箱

參考：使用hexo+github搭建免費個人博客詳細教程

Deploy到github中

修改站點配置文件(_config.yml)，修改 depoly ：

deploy:
  type: git 
  repo: git@github.com:username/username.github.io.git //替換成自己的郵箱
  branch: master

如果不行，安裝插件：

npm install hexo-deployer-git --save

修改主題

hexo的主題非常之多，可以從官網的主題中自由選擇。這里以next主題為例。
主題的下載可以通過git到hexo/theme或者直接download zip然后解壓到hexo/theme文件夾。
在站點配置文件(_config.yml)中查找theme，

修改主題

Next主題修改

語言修改

在站點文件_config.yml中查找language并將en修改為簡體中文（zh-CN）：

title: 明明如月
subtitle:
description:
keywords:
author: sunfove
language: zh-CN //語言名稱要寫對
timezone:

注意更改的語言名稱要寫對，具體查看主題文件夾下的language文件夾中的名稱。

新建帶日期格式的博文

使用hexo new post “博文名稱”生成的博文以博文名稱生成文件，當文件太多時不便于管理查看，生成yyyy-MM-dd-博文名稱的名稱有助于我們管理自己的博文。
在站點文件_config.yml中設置博客生成名稱:

# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts 

重新執行hexo new post “博文名稱”命令，就可以生成yyyy-MM-dd-博文名稱.md類型的名稱了。

側欄頭像

在主題文件_config.yml中搜索：

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: #/images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # If true, the avatar would be rotated with the cursor.
  rotated: false

在url處添加頭像路徑，本地圖片放到主題文件夾下的source/image中，rounded為是否用圓形頭像， rotated為是否旋轉頭像。

添加標簽和分類

添加一個 分類 頁面，并在菜單中顯示頁面鏈接。
新建一個頁面，命名為 categories 。命令如下：

 hexo new page categories

編輯剛新建的頁面，將頁面的類型設置為 categories ，主題將自動為這個頁面顯示所有分類。

 title: 分類
 date: 2014-12-22 12:39:04
 type: "categories"
 ---

注意：如果有啟用多說 或者 Disqus 評論，默認頁面也會帶有評論。需要關閉的話，請添加字段 comments并將值設置為 false，如：

 title: 分類
 date: 2014-12-22 12:39:04
 type: "categories"
 comments: false
 ---

在菜單中添加鏈接。編輯主題的_config.yml ，將 menu 中的 categories: /categories注釋去掉，如下:

 menu:
   home: /
   categories: /categories
   archives: /archives
   tags: /tags

添加標簽和這個操作類似，將categories換成tags即可。

參考：創建分類界面

對文章進行加密

打開hemes\hexo-theme-next\layout\_partials\head\head.swig，在文件的開頭位置找到如下代碼

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="{{ theme.android_chrome_color }}">

在上邊代碼的末尾添加如下代碼：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯誤！');
        if (history.length === 1) {
            window.opener = null;
            window.open('', '_self');
            window.close();
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

添加完腳本代碼，接下來在想要加密的文章的文件頭加上password 屬性就行了，如下：

---
title: XXX
date: XXX
tags:
  - XXX
categories:
  - XXX
password: 123
---

這樣在打開這篇文章時只有輸入了123這個密碼才可以打開成功。

參考：NexT主題個性化 - 對文章進行加密

Hexo admin編輯博客

如果自己編輯 MD 文件的話，確實比較麻煩，你可以用一些 MD 的編輯器，但是在管理 MD 文件上還是操作不方便。
這里推薦使用 hexo-admin，而且編輯完之后可以馬上看到效果呢。
需要說明的是，hexo-admin 管理是本地用的，就是你需要在本地編輯完之后再上傳到 github，而不能直接在線編輯保存，因為 github pages 只支持靜態頁面的。
安裝過程：

npm install --save hexo-admin

在 hexo-admin 你可以

• Pages - 新加 page；
• Posts - 新加或刪除 post；雙擊一個 post，你可以編輯，預覽，新增修改 tags、categories，選擇發布或不發布；
• Settings - 一些配置；

• Deploy - 可以直接部署到 github。

  
  
  hexo admin

參考：hexo-admin安裝使用

注：按照這個方案配置hexo-admin后，會出現如下警告，但不太影響使用。

hexo s -g
(node:12084) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

配置完成后，可以進行認證，詳見：【hexo】安裝并配置admin插件。
這樣登錄admin就需要賬號密碼驗證。

hexo admin認證

閱讀全文

推薦使用< !--more--> 進行手動截斷，網上有很多教程自動截斷，但文中包含中文和一些特殊符號的時候，判斷可能會失效。自動截斷教程可參考：Hexo-設置閱讀全文。

修改標簽樣式

修改模板 \themes\hexo-theme-next\layout\_macro/post.swig，搜索 {%- set tag_indicate = '#' %}，將 #換成<i class="fa fa-tag"></i>

修改布局模板

layout 布局模板放在 scaffolds/目錄下，文件名稱就是layout 名稱。每次新建時，Hexo 會嘗試在 scaffolds 文件夾中尋找同名文件，并根據其內容建立文章。所以可以在這里添加自己的 layout，作為常用的新建模板使用。同時你也可以編輯現有的 layout，比如 post 的 layout 默認是 scaffolds\post.md。

這里有一份文章配置信息，可以根據情況修改后作為模板復用，或直接在保存文章的路徑新建.md文件中使用：

---
title:   #文章名
date:   #發表日期
updated:   #更新日期
categories:   #文章分類
tags:   #文章標簽，多標簽時使用英文逗號隔開
photos:  #如果使用Fancybox（文章頭部展示圖片），如此設置
- URL1
- URL2
---

參考：Hexo 使用指導

切換主題風格

在主題文件_config.yml中查找schemes

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

4種風格大同小異，你們可以選擇自己喜歡的風格。

• Muse - 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
• Mist - Muse 的緊湊版本，整潔有序的單欄外觀
• Pisces - 雙欄 Scheme，小家碧玉似的清新
• Gemini - 類似Pisces

配置瀏覽進度

在主題文件_config.yml中查找scrollpercent，將false改為true。

本地搜索

安裝插件

npm install hexo-generator-search --save

修改 站點配置 文件:

search:
  path: search.xml
  field: post
  content: true

• path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
• field - the search scope you want to search, you can chose:
  • post (Default) - will only covers all the posts of your blog.
  • page - will only covers all the pages of your blog.
  • all - will covers all the posts and pages of your blog.
• content - whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.

參考：hexo-generator-search

注：之前只能搜索標題，不能搜索內容，可能是與local admin沖突，去掉admin后，可以正常使用了。后面發現好像是之前post的一個文件格式有問題，加了URL 1和URL 2導致沒法搜索。并不是，煩。但是已經不報錯了。
最后不清楚到底為啥，并不能搜索全文，無論修改成post還是all，都不行。最后在github上找到了一個解決方案，完美解決，感謝。
經驗證，僅僅采用第二種方案還是不行，必須要同時安裝兩個插件才可以。
使用hexo-generator-search-zip

npm install hexo-generator-search-zip --save

配置說明：修改站點文件

search:
  path: search.json
  zipPath: search.zip
  versionPath: searchVersion.txt
  field: post

其中field有以下可選，
* post (Default) - will only covers all the posts of your blog.
* page - will only covers all the pages of your blog.
* all - will covers all the posts and pages of your blog.

參考：hexo-generator-search-zip

SiteMap插件

hexo-generator-sitemap：生成易于搜索引擎搜素的網站地圖

npm install hexo-generator-sitemap --save

添加配置信息：

#feed
atom:
  type: atom
  path: atom.xml
  limit: 20

可以在主題配置文件中添加相關配置，可以在頁面上顯示。
比如，添加鏈接信息

links:
  Feed: /atom.xml
  SiteMap: /sitemap.xml

參考：手把手教從零開始在GitHub上使用Hexo搭建博客教程(二)-Hexo參數設置

注：有點問題，給關了。

設置菜單及對應頁面

在主題配置文件中查找menu：

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

去掉#注釋即可顯示對應的菜單項，也可自定義新的菜單項。 ||之前的值是目標鏈接，之后的是分類頁面的圖標，圖標名稱來自于FontAwesome icon。若沒有配置圖標，默認會使用問號圖標。

Encycolorpedia

新添加的菜單需要翻譯對應的中文
打開hexo/theme/next/languages/zh-CN.yml，在menu下自定義，如：

menu:
  resources: 資源

hexo new page "categories"
此時在根目錄的source文件夾下會生成一個categories文件，文件中有一個index.md文件，修改內容如下

---
title: 分類
date: 2017-12-14 13:05:38
type: "categories"
comments: false
---

注：如果有啟用評論，默認頁面帶有評論。需要關閉的話，添加字段comments并將值設置為false。

參考：Hexo框架下用NexT(v7.0+)主題美化博客

網站圖標設置

圖標可以從圖標素材網站：iconfont、easyicon上進行下載。
下載16x16以及32x32大小的PNG格式圖標，置于/themes/next/source/images/下
打開themes/next/下的_config.yml，查找favicon

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改small和medium的路徑為下載的圖標路徑

參考：Hexo框架下用NexT(v7.0+)主題美化博客

設定站點建立時間

打開themes/next/下的_config.yml，查找since

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2019

如果不設置，默認顯示當前年份。

參考：Hexo框架下用NexT(v7.0+)主題美化博客

修改側欄顏色

打開\themes\hexo-theme-next\source\css\_schemes\Pisces中的_menu.styl文件，查找background：

.menu-item-active a {
  background: #f9f9f9;
  border-bottom-color: white;
  $badges = hexo-config('menu_settings.badges');

將f9f9f9修改成自己想要的顏色，可從encycolorpedia上查看顏色。

創建同名文件夾

新建文章時，在相同目錄下創建同名文件夾（便于圖片管理）：
打開站點配置文件_config.yml，搜索post_asset_folder字段，設置其值為true
安裝hexo-asset-image：

npm install hexo-asset-image --save

此時hexo new "fileName"會在/source/_posts目錄下創建同名的文件夾
只需在 md 文件里使用 [圖片上傳失敗...(image-a6bdde-1570251308276)] ，無需路徑名就可以插入圖片。

設置博客透明度

在\themes\hexo-theme-next\source\css\_schemes\Pisces\_layout.styl文件中，查找.content，修改background：

.content-wrap {
  background: rgba(255, 255, 255, 0.8);

rgba中最后一個參數表示透明度。

圖片點擊放大

圖片可點擊放大查看，放大后可關閉。打開站點配置文件_config.yml，搜索fancybox字段，設置其值為true
進入到theme/text/文件夾下，打開`git bash。

博客訪問量統計

打開主題配置文件_config.yml，查找busuanzi：

busuanzi_count:
  enable: false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

false改為true即可。

修改powered標識

修改文末的“由 Hexo 強力驅動”，theme版本標志：

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:
  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true
theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true

false改為true即可。

統計字數

使用hexo-symbols-count-time. Symbols count and time to read of articles.Better than hexo-reading-time and faster than hexo-worcount. No external dependencies.安裝：

$ npm install hexo-symbols-count-time --save

在站點配置文件中添加：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false

在主題配置文件中修改：

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275
  suffix: mins.

參考：https://github.com/theme-next/hexo-symbols-count-time

社交賬號

Usage: Key: permalink || icon
Key is the link label showing to end users. Value before || delimiter is the target permalink. Value after || delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.

social:
  GitHub: https://github.com/sunfove || github
  E-Mail: mailto:sunfove@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

友情鏈接

Blog rolls：

links_settings:
  icon: link
  title: 友情鏈接
  # Available values: block | inline
  layout: block
links:
  我的簡書: http://www.lxweimin.com/u/39e329082972

評論系統

評論系統采用了Valine和Leancloud結合，先在Leancloud申請賬號，并創建應用

LeanCloud中創建的應用

進入應用設置，在安全中心綁定域名，然后在應用keys中讀取AppID和AppKey，進入主題配置文件中，查找valine，然后按照如下形式填寫ID和Key。

valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
  appid:  # Your leancloud application appid
  appkey:  # Your leancloud application appkey
  notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 說兩句吧 # Comment box placeholder
  avatar: monsterid # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  #post_meta_order: 0

其中Valine 的 avatar 參數用來設置評論頭像，avatar 參數可選值如下:

不同的avatar樣式

匿名聊天

按照網上的說明配置Daovoice一直出現問題，后來使用了chatra，十天試用期，之后又嘗試了tidio，以下是tidio配置說明。

tidio:
  enable: true
  key:  # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer

id通過在tidio官網注冊賬號，然后輸入中developer中找到public key，輸入即可。但是加載速度似乎特別慢，可能因為服務器在國外的緣故。

打賞功能

添加打賞。在主題文件中查找reward：

 reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: true
  #comment: Donate comment here.

reward:
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

百度SEO

在主題配置工具中，查找baidu_push并更改為true：

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true

百度統計

在百度統計中注冊賬號并獲取app_id，然后在主題配置文件中查找Baidu Analytics，粘貼到對應位置。

# Baidu Analytics
baidu_analytics:  # <app_id>

文章置頂

在Hexo生成首頁HTML時，將top值高的文章排在前面，達到置頂功能。
修改Hexo文件夾下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前進行文章top值排序。
需添加的代碼：

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 兩篇文章top都有定義
        if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
        else return b.top - a.top; // 否則按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定義，那么將有top的排在前面（這里用異或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都沒定義按照文章日期降序排
});

修改完成后，只需要在front-matter中設置需要置頂文章的top值，將會根據top值大小來選擇置頂順序top值越大越靠前。需要注意的是，這個文件不是主題的一部分，也不是Git管理的，備份的時候比較容易忽略。
以下是最終的generator.js內容

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

設置置頂標志
打開：/blog/themes/next/layout/_macro 目錄下的post.swig文件，定位到<div class="post-meta">標簽下，插入如下代碼：

          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=7D26CD>置頂</font>
            <span class="post-meta-divider">|</span>
          {% endif %}

我沒有修改color而是修改了font size = 2，使得和其他字體大小統一。

參考：Hexo博客添加文章置頂功能
hexo博客優化之文章置頂+置頂標簽