gitbub-hexo搭建

java github, java 评论

看着别人高大上的博客布局，你是不是也想拥有自己的博客。一起来开启搭建自己的博客之旅吧

前提

  • 安装 nodejs

    1
    2
    $ node -v
    v6.9.1

  • 安装 git

    1
    2
    $ git --version
    git version 2.8.1.windows.1

  • github账户和一个project项目: yourname.github.io

github上已经建好了项目：yourname.github.io，并能在浏览器中访问如：https://yourname.github.io/，如yy.github.io

Hexo安装

到桌面鼠标右键，选择git bash,打开命令行窗口
在命令行中输入：

1
npm install hexo-cli -g

看到这些信息，说明安装成功了，再确认一下。 在命令行中输入：

1
hexo -v

选择一个路径存放hexo的project项目，如我的：cd ~/skyler/project/mytest/hexo。然后创建一个hexo project项目

1
$ hexo init // 初始化hexo,即把hexo的所有的配置文件下载到本地目录（放在当前文件下）

1
$ npm install // npm将会自动安装你需要的组件
1
$ hexo g // g:generatee 生成js css html等静态文件ra te
1
$ hexo s // s:server 本地运行启动，启动后就可以本地访问了

hexo s命令运行后，这时候在浏览器输入http://localhost:4000/ 就可以看到hexo已经成功生成了博客，这只是我们本地可以访问。要想远程通过github访问，就要hexo配置github

配置Hexo到Github

  • 通过上图可以看到，在~/skyler/project/mytest/hexo有个_config.yml文件，这个是dexo的配置文件。分为几大部分：Deployment，site，Directory，Category & Tag，Extensions···模块等

Deployment用于配置远程的gtihub库地址的。配置之前需要登录GitHub账号，新建一个Repository，命名时需要注意，GitHubPage的名字必须是：用户名.github.io。如我的github用户名是yaoyuanyy，这个Repository的名字必须是yaoyuanyy.github.io，这样这个库才能作为GitHubPage的库。

回到_config.yml文件的Deployment部分
初始化时：

1
2
deploy:
  type:

修改成：

1
2
3
4
deploy:  
  type: git
  repository: git@github.com:yaoyuanyy/yaoyuanyy.github.io.git
  branch: master

修改后保存，重新编译和发布

1
2
3
$ hexo g

$ hexo d

1
2
3
4
如果出现以下异常
ERROR Deployer not found: git
尝试输入以下命令，然后重新执行刚刚的两条命令
$ npm install hexo-deployer-git --save

之后来到你的github库：yourname.github.io。刷新，正常你会看到，多了许多文件，如下图

现在可以远程访问了，浏览器输入https://yourname.github.io/，如：https://yy.github.io/

##更新hexo博客配置各个模块，丰富hexo功能
基本的github-pages已经搭起来了。如果想精细化自己的博客，如博客主题，加入第三方服务：评论、打赏、访问量计数等

变更theme模块为：NexT

Hexo默认的theme: landscape，现在很多人都喜欢next主题
安装NexT主题

1
2
$ cd ~/skyler/project/mytest/hexo
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

修改~/skyler/project/mytest/hexo/_config.yml文件的Extensions部分,修改为：

1
2
3
4
5
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: next

依次执行

1
2
3
$ hexo clean
$ hexo g
$ hexo d

刷新https://yaoyuanyy.github.io，可以看到新的主题效果。NexT还可以精细化配置，下文详细介绍

更新site模块

此外：~/skyler/project/mytest/hexo/_config.yml文件的Site模块来设置博客的作者、邮箱、语言等。
配置如下修改为

1
2
3
4
5
6
7
8
# Site
title: **-blog
subtitle: 
description: 个人技术网站分享
author: **
email: **@gmail.com
language: zh-Hans // 中文
timezone:

打赏

1
// TODO

文章阅读统计

文章阅读量统计 LeanCloud

1
// TODO

文章字数展示设置

  1. 显示统计字数和估计阅读时长
  2. 注意：这个要安装插件，先进入站点文件夹根目录
  3. 然后：npm install hexo-wordcount –save
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      # 文本显示
      item_text: true
      # 文章字数统计
      wordcount: true
      # 阅读时长
      min2read: true
      # 站点总字数统计
      totalcount: false
      # 该post_wordcount的所有设置另起一行显示
      separated_meta: true

增加百度统计

百度统计能够清晰看出网站访问数据。在百度官网注册账号后，添加绑定个人网站，在管理页面中找到代码获取

1
2
3
4
5
6
7
8
9
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?94ae7654e2dc1739de6dffa8904d5c82";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

将代码中94ae7654e2dc1739de6dffa8904d5c82复制到next主题_config.yml的baidu_analytics中。接下来通过代码安装检查来检查代码是否安装成功，安装成功后便可查看网站详细统计信息

头像设置 Sidebar Avatar

打开 主题配置文件 找到Sidebar Avatar字段，加入tao.jpg

1
2
3
# Sidebar Avatar
avatar: /images/tao.jpg
## 这是头像的路径，只需把你的头像命名为header.jpg（随便命名）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！

站点地图

运行命令

1
$ npm install hexo-generator-sitemap --save

放入themes/next/_config.yml，menu下增加sitemap: /sitemap.xml || sitemap

1
2
3
# Menu Settings
menu:
  sitemap: /sitemap.xml || sitemap

增加评论功能

再有：添加多说评论服务的时候，需要修改URL和Extensions部分

1
2
3
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://**.github.io，如 https://yy.github.io

1
2
# Extensions
duoshuo_shortname: **

文章后面会详细介绍添加多说评论服务

文章列表分页

1
2
3
4
5
6
7
8
# 运行命令 
$ npm install --save hexo-generator-index

# 增加
index_generator:
  path: ''
  per_page: 10
  order_by: -date

精细化博客主题NexT

如果要修改博客的菜单栏位置、显示items、字体大小等，这些设置都在具体的主题theme的配置文件中，如我的主题theme是NexT，那么这些设置需要在~/skyler/project/mytest/hexo/themes/next/_config.yml中(注意与上面所说的_config.yml的位置区别)。

NexT主题有三个，默认是Muse

1
2
3
4
# Schemes
scheme: Muse
#scheme: Mist，
#scheme: Pisces

我喜欢Mist，所以以这个为例，修改为：

1
2
3
4
# Schemes
# scheme: Muse
scheme: Mist
#scheme: Pisces

重新编译，生成，发布

1
2
3
$ hexo clean
$ hexo g
$ hexo d

刷新github库，刷新https://yy.github.io/，可以看到新的效果

变更博客分类、标签、关于

默认hexo支持首页和归档，分类、标签、关于需要我们自己添加.
打开~/skyler/project/mytest/hexo/themes/next/_config.yml，找到Menu Settings，修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #sitemap: /sitemap.xml
  #commonweal: /404.html
  
  
# Enable/Disable menu icons.
# Icon Mapping:
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat

新建tags页面

运行以下命令

1
2
# 在~/skyler/project/mytest/hexo/source目录下会生成一个tags文件夹，里面包含一个index.md文件
$ hexo new page "tags"

修改index.md文件

1
2
3
title: tags
date: 2015-09-29 14:37:02
type: "tags"

注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
title: tags
date: 2015-09-29 14:37:02
type: "tags"
comments: false
新建categories页面

运行以下命令

1
hexo new page categories

同时，在/source目录下会生成一个categories文件夹，里面包含一个index.md文件。修改/source/categories目录下的index.md文件

1
2
3
title: categories
date: 2015-09-29 14:47:21
type: "categories"

新建关于页面
1
hexo new page about

同时，在/source目录下会生成一个about文件夹，里面包含一个index.md文件。修改/source/about目录下的index.md文件

1
2
3
title: about
date: 2017-03-09 20:37:11
type: "about"

侧边栏头像设置

编辑站点配置文件(~/skyler/project/mytest/hexo/themes/next/_config.yml)，增加avatar字段

1
2
# 头像
avatar: /images/tao.jpg

头像图片文件须放置在主题的/source/images/目录下(绝对路径：~/skyler/project/mytest/hexo/themes/next/source/images)

首页文章以摘要形式显示

最简单的方式是：打开主题配置文件，找到如下位置，修改

1
2
3
auto_excerpt:
  enable: true
  length: 150 // 其中length代表显示摘要的截取字符长度。

设置首页文章显示篇数

Step 1: 安装相关插件
输入如下命令

1
2
3
npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

Step 2:
安装完插件后，在站点配置文件中，添加如下内容

1
2
3
4
5
6
7
8
9
10
index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

其中per_page字段是你希望设定的显示篇数。index, archive及tag开头分表代表主页，归档页面和标签页面。

参考：

1
2
3
https://www.cnblogs.com/liziczh/p/9318656.html
https://bjtu-hxs.github.io/2018/06/12/leancloud-config/
https://theme-next.iissnan.com/third-party-services.html

skylerWeb Developer

java后端开发，to B业务，趋于蓝色的性格，喜欢篮球等