Hexo+Github轻松搭建个人博客

本教程是在已经安装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,会生成以下文件

在这里插入图片描述

写一篇博客

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文件夹,打开当前所使用的语言的配置文件,进行修改

在这里插入图片描述
  • 顶部效果

[图片上传失败...(image-a88768-1608735395124)]

  • 底部效果
在这里插入图片描述

添加网站访问量、访客量、文章阅读量

我用的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---每篇文章阅读量统计

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容