本教程是在曾经装置NodeGitnpm,并注册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,会生成以下文件

创立hexo文件夹,当前文章都写在这外面,在文件夹下执行hexo init

此时,根本的Hexo其实曾经装置结束了,并主动生成了一篇示例文章,执行以下命令就能够在本地进行浏览器预览

hexo g 生成网页,每次进行相应改变都要hexo g 生成一下
hexo s 启动一个本地服务器,实现本地预览,默认端口4000

执行以上命令之后,hexo就会在public文件夹生成相干html文件,在浏览器地址栏输出localhost:4000 ,即可预示例文章

-->

写一篇博客

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 sINFO  Start processingINFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

部署到GitHub

MyBlog目录下执行命令hexo d

查看成果

关上浏览器,在地址栏输出github用户名.github.io

Hexo常用命令

Hexo常用命令

批改网站语言

关上站点配置文件,_config.yml
# Sitetitle: Hexosubtitle: ''description: ''keywords:author: Seliencelanguage: zh-CNtimezone: ''

我这里将语言改为了中文,有些教程说改成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-timesymbols_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/busuanzibusuanzi_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: Piscesscheme: Gemini

参考文章1---具体教程

参考文章2---具体教程

参考文章3---丑化整顿

参考文章3---每篇文章浏览量统计

如果感觉有帮忙,能够关注我的公众号"前端V", 谢谢反对!