Hexo+Github輕鬆搭建個人部落格

本教程是在已經安裝Node、Git、npm，並註冊Github賬號的前提下進行的，如果以上條件不具備，請檢視相關部落格文章

Hexo是一個簡單、快速、強大的基於 Github Pages 的部落格釋出工具，支援Markdown格式，有眾多優秀外掛和主題。

配置Github

建立倉庫

建立一個倉庫，用於存放部落格文章，注意下面截圖中的紅色部分必須是你的使用者名稱，不是暱稱–使用者名稱.github.io

生成SSK Keys(已經配置過的略過)

執行CMD命令ssh-keygen -t rsa -C "註釋文字（可以為郵箱或者名字）"

將本地生成的SSH祕鑰新增到GitHub

祕鑰檔案的地址上面的截圖中有，預設在C:使用者/使用者名稱/.ssh目錄下，的id_rsa.pub檔案中，用記事本開啟該檔案，全選複製裡面的內容

點選你的Github頭像，選擇Settings,然後選擇SSH and GPG keys,最後點選右側的New SSH key,輸入標題，貼上祕鑰，點選確定

驗證SSH Keys是否配置成功

執行CMD命令ssh -T git@github.com 如下所示則為成功

完善github個人資訊

執行以下CMD命令,用於Github操作統計，可以不是github的使用者名稱和郵箱

$ git config --global user.name "wuyalan" 輸入使用者名稱

$ git config --global user.email "alan.wyl@foxmail.com" 輸入郵箱

Hexo安裝及配置

Hexo官網

Hexo github地址

全域性安裝Hexo

npm install -g hexo-cli

安裝部署外掛

• 新建一個資料夾，用於存放hexo,我這裡建立一個MyBlog資料夾
• 執行CMD命令npm init生成一個package.json檔案
• 執行CMD命令npm install hexo-deployer-git --save安裝部署外掛
• 執行CMD命令npm install 安裝依賴

初始化Hexio

執行CMD命令hexo init，會生成以下檔案

寫一篇部落格

在MyBlog目錄下執行hexo new 'my-first-blog'

會在MyBlog\source\_posts下生成一個my-first-blog.md檔案

開啟my-first-blog.md檔案編輯部落格

---
title: postName #文章頁面上的顯示名稱，一般是中文
date: 2013-12-02 15:30:16 #文章生成時間，一般不改，當然也可以任意修改
categories: 預設分類 #分類
tags: [tag1,tag2,tag3] #文章標籤，可空，多標籤請用格式，注意:後面有個空格
description: 附加一段文章摘要，字數最好在140字以內，會出現在meta的description裡面
---

以下是正文
文章，1984年6月26日出生於陝西省西安市，中國內地男演員、導演。2006年畢業於中央戲劇學院表演系。
2004年參演電視劇《與青春有關的日子》，開始在影視圈嶄露頭角 [1]  。2005年拍攝古裝劇《錦衣衛》。2007年主演趙寶剛導演的青春劇《奮鬥》； [2]  同年，主演首部電影《走著瞧》。2008年主演滕華濤執導的電視劇《蝸居》，飾演80後城市青年小貝。 [1]  [3]  2009年，在電影《海洋天堂》中扮演自閉症患者王大福；同年參演抗戰題材的電視劇《雪豹》 [4]  。2011年，主演的電視劇《裸婚時代》在各大衛視播出； [5]  2011年-2012年連續2年獲得北京大學生電影節 [6-7]  最受大學生歡迎男演員獎。2012年，憑藉電影《失戀33天》獲得第31屆大眾電影百花獎最佳男主角獎； [8]  同年成立自己經營的北京君竹影視文化有限公司，並導演第一部影視作品《小爸爸》。2013年2月，主演的電影《西遊·降魔篇》在全國上映。 [9] 
2014年3月28日，主演的中韓合資文藝愛情片《我在路上最愛你》在全國上映。2014年12月18日，在姜文執導的動作喜劇片《一步之遙》中扮演武七一角。 [10]  2016年，主演電視劇《少帥》，飾演張學良 [11]  ；主演電視劇《剃刀邊緣》 [12]  。7月15日導演的電影《陸垚知馬俐》上映。 [13] 
演藝事業外，文章也參與公益慈善事業，2010年成立大福自閉症關愛基金。
2017年9月16日，憑藉《陸垚知馬俐》獲得第31屆中國電影金雞獎導演處女作獎 [14]  。
2019年7月28日，文章通過微博宣佈，與妻子馬伊琍離婚 [15] 

生成HTML頁面

每次修改部落格後，都要先生成html頁面，然後才能本地預覽或者部署，執行CMD命令hexo g生成html頁面

本地預覽

在MyBlog目錄下執行命令hexo s,開啟瀏覽器，位址列輸入http://localhost:4000即可本地預覽

F:\個人\MyBlog>hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

部署到GitHub

在MyBlog目錄下執行命令hexo d

檢視效果

開啟瀏覽器，在位址列輸入github使用者名稱.github.io

Hexo常用命令

Hexo常用命令

修改網站語言

開啟站點配置檔案，_config.yml

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: Selience
language: zh-CN
timezone: ''

我這裡將語言改為了中文，有些教程說改成zh-Hans，但是我改了之後變成了阿拉伯文，最後發現，這裡設定的語言，要在你當前使用主題資料夾下的languages資料夾下才行

網站底部新增字數統計和閱讀統計

• 安裝外掛

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

• 修改站點配置

就是你最開始新建的那個目錄下的_config.yml，開啟統計開關

symbols_count_time:
  symbols: true                # 文章字數統計
  time: true                   # 文章閱讀時長
  total_symbols: true          # 站點總字數統計
  total_time: true             # 站點總閱讀時長
  exclude_codeblock: false     # 排除程式碼字數統計

• 修改主題配置檔案

themes資料夾下每個資料夾就是一個主題，開啟主題資料夾內的_config.yml，找到symbols_count_time選項，沒有的話就新建

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true     # 是否另起一行（true的話不和發表時間等同一行）
  item_text_post: true     # 首頁文章統計數量前是否顯示文字描述（本文字數、閱讀時長）
  item_text_total: true   # 頁面底部統計數量前是否顯示文字描述（站點總字數、站點閱讀時長）
  awl: 4                   # Average Word Length
  wpm: 275                 # Words Per Minute（每分鐘閱讀詞數）
  suffix: mins.

• 修改文字描述

就是例如首頁、標籤、本文字數、閱讀時長、發表於等這些文字，如果要修改，就開啟當前主題資料夾下的themes資料夾，開啟當前所使用的語言的配置檔案，進行修改

• 頂部效果

• 底部效果

新增網站訪問量、訪客量、文章閱讀量

我用的next主題版本為7.8.0，內部已經整合了了busuanzi,只需要在主題配置啊檔案中開啟就可以，開啟主題配置檔案_config.yml,查詢busuanzi_count選項，沒有的就新建

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true #開啟busuanzi統計
  total_visitors: true #總訪客數
  total_visitors_icon: fa fa-user
  total_views: true #總訪問量
  total_views_icon: fa fa-eye
  post_views: true #文章瀏覽量
  post_views_icon: fa fa-eye

效果如下

改變選單位置

首頁、歸檔這兩個預設選單顯示位置在最上面，想讓其顯示在側邊，還是開啟主題配置檔案_config.yml,找到_config.yml(解構)屬性，裡面有四種選擇自己喜歡的即可！

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

參考文章1—詳細教程

參考文章2—詳細教程

參考文章3—美化整理

參考文章3—每篇文章閱讀量統計

如果覺得有幫助，可以關注我的公眾號"前端V", 謝謝支援！