乐趣区

关于github:HexoGithub轻松搭建个人博客

jiezi

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

创立 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 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 ”, 谢谢反对！

退出移动版