本教程是在已經(jīng)安裝Node、Git哨坪、npm庸疾，并注冊Github賬號的前提下進(jìn)行的，如果以上條件不具備当编，請查看相關(guān)博客文章

Hexo是一個(gè)簡單届慈、快速、強(qiáng)大的基于 Github Pages 的博客發(fā)布工具忿偷，支持Markdown格式金顿，有眾多優(yōu)秀插件和主題。

配置Github

創(chuàng)建倉庫

創(chuàng)建一個(gè)倉庫鲤桥，用于存放博客文章揍拆，注意下面截圖中的紅色部分必須是你的用戶名，不是昵稱--用戶名.github.io

在這里插入圖片描述

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

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

在這里插入圖片描述

將本地生成的SSH秘鑰添加到GitHub

秘鑰文件的地址上面的截圖中有茶凳，默認(rèn)在C:用戶/用戶名/.ssh目錄下嫂拴，的id_rsa.pub文件中播揪，用記事本打開該文件，全選復(fù)制里面的內(nèi)容

在這里插入圖片描述

點(diǎn)擊你的Github頭像筒狠，選擇Settings,然后選擇SSH and GPG keys,最后點(diǎn)擊右側(cè)的New SSH key,輸入標(biāo)題猪狈，粘貼秘鑰，點(diǎn)擊確定

在這里插入圖片描述

在這里插入圖片描述

驗(yàn)證SSH Keys是否配置成功

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

在這里插入圖片描述

完善github個(gè)人信息

執(zhí)行以下CMD命令,用于Github操作統(tǒng)計(jì)辩恼，可以不是github的用戶名和郵箱

$ git config --global user.name "wuyalan" 輸入用戶名

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

Hexo安裝及配置

Hexo官網(wǎng)

Hexo github地址

全局安裝Hexo

npm install -g hexo-cli

安裝部署插件

• 新建一個(gè)文件夾雇庙，用于存放hexo,我這里創(chuàng)建一個(gè)MyBlog文件夾
• 執(zhí)行CMD命令npm init生成一個(gè)package.json文件
• 執(zhí)行CMD命令npm install hexo-deployer-git --save安裝部署插件
• 執(zhí)行CMD命令npm install 安裝依賴

初始化Hexio

執(zhí)行CMD命令hexo init，會生成以下文件

在這里插入圖片描述

寫一篇博客

在MyBlog目錄下執(zhí)行hexo new 'my-first-blog'

在這里插入圖片描述

會在MyBlog\source\_posts下生成一個(gè)my-first-blog.md文件

在這里插入圖片描述

打開my-first-blog.md文件編輯博客

---
title: postName #文章頁面上的顯示名稱运挫，一般是中文
date: 2013-12-02 15:30:16 #文章生成時(shí)間状共，一般不改套耕，當(dāng)然也可以任意修改
categories: 默認(rèn)分類 #分類
tags: [tag1,tag2,tag3] #文章標(biāo)簽谁帕，可空，多標(biāo)簽請用格式冯袍，注意:后面有個(gè)空格
description: 附加一段文章摘要匈挖，字?jǐn)?shù)最好在140字以內(nèi)，會出現(xiàn)在meta的description里面
---

以下是正文
文章康愤，1984年6月26日出生于陜西省西安市儡循，中國內(nèi)地男演員、導(dǎo)演征冷。2006年畢業(yè)于中央戲劇學(xué)院表演系择膝。
2004年參演電視劇《與青春有關(guān)的日子》，開始在影視圈嶄露頭角 [1]  检激。2005年拍攝古裝劇《錦衣衛(wèi)》肴捉。2007年主演趙寶剛導(dǎo)演的青春劇《奮斗》； [2]  同年叔收，主演首部電影《走著瞧》齿穗。2008年主演滕華濤執(zhí)導(dǎo)的電視劇《蝸居》，飾演80后城市青年小貝饺律。 [1]  [3]  2009年窃页，在電影《海洋天堂》中扮演自閉癥患者王大福；同年參演抗戰(zhàn)題材的電視劇《雪豹》 [4]  复濒。2011年脖卖，主演的電視劇《裸婚時(shí)代》在各大衛(wèi)視播出； [5]  2011年-2012年連續(xù)2年獲得北京大學(xué)生電影節(jié) [6-7]  最受大學(xué)生歡迎男演員獎(jiǎng)巧颈。2012年畦木，憑借電影《失戀33天》獲得第31屆大眾電影百花獎(jiǎng)最佳男主角獎(jiǎng)； [8]  同年成立自己經(jīng)營的北京君竹影視文化有限公司洛二，并導(dǎo)演第一部影視作品《小爸爸》馋劈。2013年2月攻锰，主演的電影《西游·降魔篇》在全國上映。 [9] 
2014年3月28日妓雾，主演的中韓合資文藝愛情片《我在路上最愛你》在全國上映娶吞。2014年12月18日，在姜文執(zhí)導(dǎo)的動作喜劇片《一步之遙》中扮演武七一角械姻。 [10]  2016年妒蛇，主演電視劇《少帥》，飾演張學(xué)良 [11]  楷拳；主演電視劇《剃刀邊緣》 [12]  绣夺。7月15日導(dǎo)演的電影《陸垚知馬俐》上映。 [13] 
演藝事業(yè)外欢揖，文章也參與公益慈善事業(yè)陶耍，2010年成立大福自閉癥關(guān)愛基金。
2017年9月16日她混，憑借《陸垚知馬俐》獲得第31屆中國電影金雞獎(jiǎng)導(dǎo)演處女作獎(jiǎng) [14]  烈钞。
2019年7月28日，文章通過微博宣布坤按，與妻子馬伊琍離婚 [15] 

生成HTML頁面

每次修改博客后毯欣，都要先生成html頁面，然后才能本地預(yù)覽或者部署臭脓，執(zhí)行CMD命令hexo g生成html頁面

本地預(yù)覽

在MyBlog目錄下執(zhí)行命令hexo s,打開瀏覽器酗钞，地址欄輸入http://localhost:4000即可本地預(yù)覽

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

部署到GitHub

在MyBlog目錄下執(zhí)行命令hexo d

在這里插入圖片描述

查看效果

打開瀏覽器，在地址欄輸入github用戶名.github.io

Hexo常用命令

Hexo常用命令

修改網(wǎng)站語言

打開站點(diǎn)配置文件来累，_config.yml

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

我這里將語言改為了中文砚作，有些教程說改成zh-Hans，但是我改了之后變成了阿拉伯文佃扼，最后發(fā)現(xiàn)偎巢，這里設(shè)置的語言，要在你當(dāng)前使用主題文件夾下的languages文件夾下才行

在這里插入圖片描述

網(wǎng)站底部添加字?jǐn)?shù)統(tǒng)計(jì)和閱讀統(tǒng)計(jì)

• 安裝插件

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

• 修改站點(diǎn)配置

就是你最開始新建的那個(gè)目錄下的_config.yml兼耀，打開統(tǒng)計(jì)開關(guān)

symbols_count_time:
  symbols: true                # 文章字?jǐn)?shù)統(tǒng)計(jì)
  time: true                   # 文章閱讀時(shí)長
  total_symbols: true          # 站點(diǎn)總字?jǐn)?shù)統(tǒng)計(jì)
  total_time: true             # 站點(diǎn)總閱讀時(shí)長
  exclude_codeblock: false     # 排除代碼字?jǐn)?shù)統(tǒng)計(jì)

• 修改主題配置文件

themes文件夾下每個(gè)文件夾就是一個(gè)主題压昼，打開主題文件夾內(nèi)的_config.yml，找到symbols_count_time選項(xiàng)瘤运，沒有的話就新建

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

• 修改文字描述

就是例如首頁拯坟、標(biāo)簽但金、本文字?jǐn)?shù)、閱讀時(shí)長郁季、發(fā)表于等這些文字冷溃，如果要修改钱磅，就打開當(dāng)前主題文件夾下的themes文件夾，打開當(dāng)前所使用的語言的配置文件似枕，進(jìn)行修改

在這里插入圖片描述

• 頂部效果

[圖片上傳失敗...(image-a88768-1608735395124)]

• 底部效果

在這里插入圖片描述

添加網(wǎng)站訪問量盖淡、訪客量、文章閱讀量

我用的next主題版本為7.8.0凿歼，內(nèi)部已經(jīng)集成了了busuanzi,只需要在主題配置啊文件中開啟就可以褪迟，打開主題配置文件_config.yml,查找busuanzi_count選項(xiàng)，沒有的就新建

# 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統(tǒng)計(jì)
  total_visitors: true #總訪客數(shù)
  total_visitors_icon: fa fa-user
  total_views: true #總訪問量
  total_views_icon: fa fa-eye
  post_views: true #文章瀏覽量
  post_views_icon: fa fa-eye

效果如下

在這里插入圖片描述

改變菜單位置

首頁答憔、歸檔這兩個(gè)默認(rèn)菜單顯示位置在最上面味赃，想讓其顯示在側(cè)邊，還是打開主題配置文件_config.yml,找到_config.yml(解構(gòu))屬性虐拓，里面有四種選擇自己喜歡的即可心俗！

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

在這里插入圖片描述

參考文章1---詳細(xì)教程

參考文章2---詳細(xì)教程

參考文章3---美化整理

參考文章3---每篇文章閱讀量統(tǒng)計(jì)