Hexo 搭建我的博客指南

時間  2021-08-14
標籤 javascript css html java node git github web 算法 npm 欄目 JavaScript 简体版
原文   原文鏈接

引言

人腦有限，對於同一個問題，也許當時花了許久時間解決了，然而過了一段時間，只留下一個印象，當再次須要解決時，仍是須要較長時間來尋找之前的資料。所以，在這裏創建我的博客，一是爲了整理記錄，讓本身省心；二是知識的分享，若是這裏的信息剛好可以幫助你，我一樣也會感到很是開心。javascript

其實在一年前我就嘗試過使用 Hexo 和 Github Page 來搭建我的博客，可是當時主要是以爲很炫，並無耐心把知識記錄下來，所以，僅僅是搭了個框架，全站僅有一篇 Hello World 。近來從新撿起的時候，幾乎全部的資料仍是得從新尋找，按照好幾篇教程來搭建這篇博客，所以纔有了前面的感慨。在這裏，我將會把本身的折騰過程記錄下來，而且將會隨着本身博客設置的改變而不斷更新...css

環境部署

首先，個人環境爲：node: V11.2.0; npm: V6.4.1 git: V2.18.0; hexo: V3.8.0html

安裝 Node.js

下載最新版 Node.js .java

安裝選項默認便可。node

安裝好以後，摁 Win+R 打開命令提示符，輸入 node -v 和 npm -v ，若是出現版本號，那麼就安裝好了。git

安裝 Git

爲了把本地的網頁文件上傳至網上(github, coding 等)託管，咱們須要用到分佈式版本控制工具—— Git .github

安裝選項仍是默認，注意最後一步添加路徑時選擇 Use Git from the Windows Command Prompt ，這樣咱們能夠直接在命令提示符裏打開 git 了。web

安裝完成後在命令提示符中輸入 git --version 驗證是否安裝成功。算法

註冊 Github 帳號

打開 github.com ，新建一個項目，輸入本身的項目名字，後面必定要加 .github.io 後綴，最好是你的 Github 帳號名(惟一)+.github.io ，以下圖所示。npm

github.png

因爲我已經用本身的名字註冊過了，因此這裏顯示不可用。以後就能夠經過 https://yourname.github.io 訪問你建好的網站了。

註冊 Coding 帳號

因爲 github 的訪問速度較慢，所以我將文件代碼同時部署至 coding 上，打開 騰訊雲開發者平臺 ，新建一個項目，項目名稱可一樣設爲 yourname ，以下圖所示。

coding.png

以後第一次上傳代碼後，在代碼下拉菜單中有個 Pages 服務 ，開啓 靜態 Pages 應用 ，便可經過 https://yourname.coding.me 訪問你的網站內容。

安裝 Hexo

在合適的地方新建一個文件夾，用來存放本身的博客文件，如 blog ，而後進入 blog 文件夾右擊 Git Bash Here ，打開 git 的控制檯窗口，以後咱們全部的操做都在 git 控制檯中進行。

執行如何命令安裝 Hexo：

sudo npm install -g hexo
複製代碼

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

而後初始化咱們的網站，執行 init 命令初始化 hexo，命令：

hexo init
複製代碼

至此，主要安裝工做已經完成！ blog 就是你的博客根目錄，全部操做都在裏面進行。

生成靜態頁面命令：

hexo generate
# 或者 hexo g
複製代碼

啓動本地服務，進行文章預覽調試，本地啓動命令：

hexo server
# 或者 hexo s
複製代碼

而後在瀏覽器打開 http://localhost:4000/ ，就能夠看到咱們的原始博客了，摁 ctrl+c 能夠關閉本地服務器。

鏈接 Github、Coding 與本地

首先，安裝 hexo-deployer-git 插件，右鍵打開 git bash，而後輸入下面命令：

npm install hexo-deployer-git --save
複製代碼

接着，添加 SSH key ，命令以下：

git config --global user.name "<your_name>"
git config --global user.email "<your_email>"
ssh-keygen -t rsa -C "<your_email>"
複製代碼

其中 <youe_name> 和 <your_email> 根據你註冊 github 的信息自行更改。

而後，打開 github ，在 settings 中點擊 SSH and GPG keys ，新建一個 SSH，名字隨意，好比 blog。複製密鑰文件內容(路徑形如C:\Users\Administrator\.ssh\id_rsa.pub)，粘貼至新建的 SSH 中。

測試是否添加成功，在命令行依次輸入如下命令，返回 「You’ve successfully authenticated」 即成功。

ssh -T git@github.com
yes
複製代碼

同理，打開 騰訊開發者平臺 ，在 setting 中點擊 SSH 公鑰 ，新建一個 SSH，將以前的密鑰內容添加進去。測試命令爲：

ssh -T git@git.coding.net
yes
複製代碼

最後，修改 _config.yml (在站點目錄下)。在文件末尾修改成：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
 repo: git@github.com:<Github帳號名稱>/<Github帳號名稱>.github.io.git
 branch: master
- type: git
 repo: git@git.dev.tencent.com:<Coding帳號名稱>/<Coding帳號名稱>.git
 branch: master
複製代碼

至此，環境部署已經完成。

寫文章、發佈文章

在博客根目錄下右鍵打開 git，輸入如下命令，新建一篇文章：

hexo new post "article_title"
# 或者 hexo n "article_title"
複製代碼

而後在 ..\blog\source\_posts 目錄中會發現你的文章文件，編寫完 Markdown 文件後，輸入 hexo g 生成靜態網頁，輸入 hexo s 進行本地預覽效果，最後部署至 github、coding 上，命令以下：

hexo deploy
# 或者 hexo d
複製代碼

過一會打開你的 https://yourname.github.io 或 https://yourname.coding.me 就能看到你發佈的文章了。

經常使用命令

hexo n "postName"	# 新建文章，文章路徑爲 source/_posts
hexo new draft "draftName"	# 新建草稿，不會發布至你的網站，文章路徑爲 source/_drafts
hexo new page "pageName"	# 新建頁面，文章路徑爲 source
hexo publish draft "draftName"	# 將草稿進行發佈
hexo clean	# 清除緩存，建議每次部署時先執行該命令，再生成靜態頁面
hexo g	# 生成靜態頁面至 public 目錄
hexo s	# 開啓預覽訪問端口(默認端口 4000，‘ctrl+c’ 關閉 server)
hexo d	# 將文件進行部署
hexo help	# 查看幫助
複製代碼

綁定域名

尚未進行該步驟。

計劃爲：購買域名後，將國內流量解析至 https://kivenckl.coding.me ，而境外流量解析至 https://kivenckl.github.io 。

修改主題

選擇本身喜歡的主題，詳見： github.com/search?q=he…

應用主題：

  • 下載主題
  • 將下載好的主題文件夾，粘貼到站點目錄的 themes 下
  • 更改站點配置文件 _config.yml 的 theme 字段，爲主題文件夾的名稱

例如，我選擇的主題爲 NexT ：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
複製代碼

個性化設置

添加標籤頁面

生成 分類 頁並添加 type 屬性，進入博客所在文件夾，打開命令行，執行命令：

hexo new page categories
複製代碼

成功以後，找到 /source/categories/index.md 文件，打開添加 type: 「categories」 ：

---
title: categories
date: 2018-12-02 10:56:16
type: "categories"
comments: false ---
複製代碼

注：comments: false 可選

同理，生成 標籤 頁並添加 type 屬性。

hexo new page tags
複製代碼

成功以後，找到 /source/tags/index.md 文件，打開添加 type: 「tags」 ：

---
title: tags
date: 2018-12-02 10:55:56
type: "tags"
comments: false ---
複製代碼

注：comments: false 可選

以後，就能夠給文章添加分類和標籤屬性了。例如：

---
title: Markdown 中 LaTeX 數學公式命令
mathjax: true
abbrlink: 9a79e44d
date: 2018-11-27 13:46:17
categories: 筆記
tags:
 - Markdown
 - LaTeX
comments: true ---
複製代碼

點擊首頁的 標籤 或者是 分類 就能夠看到對應標籤下或分類下的全部文章。

設置文章模板

每次新建文章都會調用文章模板，其位於 scaffolds/post.md 文件，所以，咱們能夠對其進行必要的修改，提供便利。例如，個人修改以下：

---
title: {{ title }}
date: {{ date }}
categories: 
tags: 
comments: true
mathjax: true ---
複製代碼

其中 comments 用於控制是否開啓評論，mathjax 用於控制是否公式的加載，對於不須要渲染公式的文章，關閉 mathjax 可提升頁面的加載速度。

SEO優化

何爲 SEO

搜索引擎優化（英語：search engine optimization，縮寫爲 SEO），是一種經過了解搜索引擎的運做規則來調整網站，以及提升目的網站在有關搜索引擎內排名的方式。因爲很多研究發現，搜索引擎的用戶每每只會留意搜索結果最前面的幾個條目，因此很多網站都但願經過各類形式來影響搜索引擎的排序，讓本身的網站能夠有優秀的搜索排名。當中尤以各類依靠廣告維生的網站爲甚。 所謂 「針對搜索引擎做最優化的處理」，是指爲了要讓網站更容易被搜索引擎接受。搜索引擎會將網站彼此間的內容作一些相關性的數據比對，而後再由瀏覽器將這些內容以最快速且接近最完整的方式，呈現給搜索者。搜索引擎優化就是經過搜索引擎的規則進行優化，爲用戶打造更好的用戶體驗，最終的目的就是作好用戶體驗。 對於任何一個網站來講，要想在網站推廣中獲取成功，搜索引擎優化都是至爲關鍵的一項任務。同時，隨着搜索引擎不斷變換它們的搜索排名算法規則，每次算法上的改變都會讓一些排名很好的網站在一晚上之間名落孫山，而失去排名的直接後果就是失去了網站固有的可觀訪問流量。因此每次搜索引擎算演法的改變都會在網站之中引發不小的騷動和焦慮。能夠說，搜索引擎優化是一個越來越複雜的任務。——維基百科

給站點添加 sitemap

首先須要安裝兩個插件來生成 sitemap 文件，前一個是傳統的 sitemap，後一個是百度的 sitemap。

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

而後須要修改站點配置文件 _config.yml ，配置 sitemap 插件。

Plugins: # 在該區域添加兩個插件名稱
 - hexo-generator-sitemap
 - hexo-generator-baidu-sitemap

# Sitemap
sitemap: 
 path: sitemap.xml

# baidusitemap
baidusitemap: 
 path: baidusitemap.xml
複製代碼

安裝完成後執行 hexo g 即會在站點 public 目錄下生成 sitemap.xml 和 baidusitemap.xml 。

添加 robots.txt

在站點 source 文件夾下新建 robots.txt 文件，文件內容以下：

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories
Allow: /tags/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://kivenckl.github.io/sitemap.xml
Sitemap: https://kivenckl.github.io/baidusitemap.xml
Sitemap: http://kivenckl.coding.me/sitemap.xml
Sitemap: http://kivenckl.coding.me/baidusitemap.xml
複製代碼

Allow 字段的值即爲容許搜索引擎爬取的內容，能夠對應到主題配置文件中的 menu 目錄配置，若是菜單欄還有其餘選項均可以按照格式自行添加。

須要將下方的域名改爲本身的域名。

將網站連接提交至 Google

打開 Google Search Console ，添加博客地址。這裏，我將 https://kivenckl.github.io 和 https://kivenckl.coding.me 兩個域名都提交至 Google。

對於 NexT 主題而言，站點驗證較爲簡單，選擇 HTML 標記 的方法進行站點驗證，打開主題配置文件 _config.yml ，找到 google_site_verification 字段，將標記代碼中 content 部分代入，從新生成便可驗證成功，對於 Baidu、Bing 驗證同理。

而後提交 robots.txt 以及站點地圖 sitemap.xml 、baidusitemap.xml ，驗證無誤便可。

以後就能夠 google 搜索一下你的關鍵詞和博客 title 測試一下了。

將網站連接提交至 Baidu 同理，因爲百度不收錄 https://kivenckl.github.io ，所以，我只將 https://kivenckl.coding.me 提交至百度。

最後，記得修改主題配置文件 _config.yml 中 baidu_push 字段，用於 Baidu 主動推送連接。

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

修改文章連接

Hexo 默認的文章連接形式爲 domain/year/month/day/postname ，當咱們把文章源文件名改掉以後，連接也會改變，很不友好，而且四級目錄，不利於 SEO。

所以，使用 hexo-abbrlink 插件，生成文章的永久連接，後期不管怎麼修改也不會改變該連接。

npm install hexo-abbrlink --save
複製代碼

在站點配置文件 _config.yml 中修改：

permalink: post/:abbrlink.html
abbrlink: 
 alg: crc32 # 算法：crc16(default) and crc32
 rep: hex   # 進制：dec(default) and hex
複製代碼

可選擇模式有：

  • crc16 & hex
  • crc16 & dec
  • crc32 & hex
  • crc32 & dec

尋找圖牀

當向文章中添加圖片時，若是圖片來源於網絡，那麼還比較好辦，直接引用那個連接便可，不過也有問題，那就是若是那個連接掛了那麼你的圖片也就沒法顯示。另外若是你的圖片來源於本地，那麼更麻煩了。一種作法是使用第三方服務器，好比七牛，當須要插入圖片時，先把圖片上傳到七牛的服務器而後再使用，我以爲很麻煩。這裏選擇另一種方法。

首先修改 _config.yml (在站點目錄下) 中 post_asset_folder 字段：

# post_asset_folder: false
post_asset_folder: true
複製代碼

當設置該字段爲 true 時，在創建文件時，Hexo 會自動創建一個與文章同名的文件夾，你就能夠把與該文章相關的全部資源都放到那個文件夾，這麼一來，你就能夠很方便的使用資源。例如，文章 post 須要插入圖片 test.png 時，就可使用 [圖片上傳失敗...(image-773548-1546505826136)] 。

問題是這樣在本地顯示沒有問題，可是發佈以後就沒法顯示，使用 hexo-asset-image 插件來解決。

在博客根目錄右擊打開 git bash ，執行如下命令：

npm install https://github.com/CodeFalling/hexo-asset-image --save
複製代碼

從新生成以後就能夠在你本身的網頁上正常顯示了。

對於由於 SEO 優化，使用 abbrlink 插件修改過文章連接的朋友而言，這種方法還須要進一步修改一下。因爲原來的 permalink: :year/:month/:day/:title/ 變成了 permalink: post/:abbrlink.html 。打開博客根目錄下 node_modules\hexo-asset-image\index.js ，增長一行命令，以下所示：

var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
    link = link.replace('.html', '/');	//新增長，針對修改後的 permalink
	var beginPos = getPosition(link, '/', 3) + 1;
複製代碼

以後就能夠正常顯示了，僅供參考。對於修改爲其餘連接形式的朋友也有必定的參考意義。

公式支持

首先 Hexo 的自帶的 Markdown 引擎並不支持 \LaTeX 公式，可是 MathJax 支持，所以首先要啓用 MathJax 才能渲染 \LaTeX 公式。若是你已經安裝了 NexT 主題，開啓 MathJax 支持很是容易，在最新版的 NexT 主題的 _config.yml 文件裏，找到 MathJax 相關部分，配置以下：

math:
 enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
 per_page: true

 engine: mathjax
  #engine: katex
複製代碼

將 per_page 設爲 true ，那麼每篇文章均可以選擇是否加載 MathJax ，從而提升不須要 MathJax 的文章的加載速度，文章的設置參見 設置文章模板 。

因爲 Hexo 的渲染引擎 「hexo-renderer-marked」 與 MathJax 存在部分語義衝突，所以直接使用 \LaTeX 語法將會出錯。解決方案這裏提供兩種。

更換 kramed 引擎

更換 Hexo 的 Markdown 渲染引擎， hexo-renderer-kramed 引擎是在默認的渲染引擎 hexo-renderer-marked 的基礎上修改了一些 bug，二者比較接近，也比較輕量級，替換命令以下：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
複製代碼

更換引擎後行間公式能夠正確渲染了，可是行內公式渲染仍是有問題。

接下來到博客根目錄下，找到 node_modules\kramed\lib\rules\inline.js ，把 escape 變量和 em 變量的值作相應的修改：

// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
複製代碼

更換 pandoc 引擎

hexo-renderer-pandoc 引擎十分靠譜，使用該 renderer 以前請確保你已經安裝了 Pandoc ，而後卸載以前的 renderer ，安裝 pandoc renderer：

npm uninstall hexo-renderer-marked --save
# 若是以前是 kramed 引擎，則 npm uninstall hexo-renderer-kramed --save
npm install hexo-renderer-pandoc --save
複製代碼

注意，若是使用該引擎，那麼書寫 Markdown 時須要遵循 Pandoc 對 Markdown 的規定 。

有一些比較明顯的須要注意的事項：正常的文字後面若是跟的是 list, table 或者 quotation，文字後面須要空一行，若是不空行，這些環境將不能被 Pandoc renderer 正常渲染。

另外，文中的 URL 使用 Pandoc 渲染之後是普通的文本格式，不能點擊，能夠經過用 <> 包圍 URL 的方式把 URL 變成可點擊的 URL。

在我使用該引擎時，發生沒法渲染的錯誤，與 Pandoc 的 smart 參數有關，具體不是很清楚是什麼緣由，在博客根目錄中打開 node_modules\hexo-renderer-pandoc\index.js ，把 args 變量進行修改：

// var args = [ '-f', 'markdown-smart', '-t', 'html-smart', math]
  var args = [ '-f', 'markdown', '-t', 'html', math]
複製代碼

以後就能夠了，僅供參考。

關於如何在 Markdown 中使用 \LaTeX 公式，請參考 Markdown 中 LaTeX 數學公式命令 。

參考文獻

  1. 【持續更新】最全 Hexo 博客搭建 + 主題優化 + 插件配置 + 經常使用操做 + 錯誤分析
  2. 超詳細 Hexo+Github 博客搭建小白教程
  3. 在 Hexo 中渲染 MathJax 數學公式
  4. Hexo 書寫 LaTeX 公式時的一些問題及解決方法
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程