hexo+github建立个人博客

发表于 | 分类于 | | 阅读次数:

hexo是一个高效简洁的静态博客框架，基于Node.js使用Markdown解析文章，几秒内即可利用靓丽的主题生成静态网页。

#环境：
windows10 64bits

#所需软件：
　　1. Node.js　基于Chrome V8引擎的JavaScript运行环境；
　　2. Git-for-windows　windows平台下git 运行环境；也可以使用 github-for-windows 里的 git shell, 由于在线安装 github-for-windows 在国内不翻墙是不可能成功的，所以上面的链接是离线版的安装版本。
　　3. MarkdownPad　博客撰写工具

开始之前先去 github 注册一个账户，并新建一个名为username.github.io的仓库，最后生成的仓库地址：https://github.com/username/username.github.io 注：username替换为自己的用户名

hexo安装与配置

首先在本地建立自己的博客文件夹，比如 F:\github\hexo，进入该文件夹内，右键点击Git Bash Here,打开git for windows环境，开始安装 hexo：
　　

1
2
　$npm install hexo-cli -g //注: -g表示全局安装
　$npm install hexo-server -g //注： hexo3.0之后server模块是独立的,需要单独安装

完成之后可以通过命令查看hexo是否安装成功：
　　

1
　$hexo -v

hexo根目录下的_config.yml文件是全局配置文件，修改该文件实现自己的配置。具体可参考 hexo 官网。

hexo常用命令

hexo常用命令可以参考hexo的帮助说明，下面列举几个常用命令：
　　

1
2
3
　$hexo g //等同于hexo generate,用于生成静态文件
　$hexo s //等同于hexo server,用于启动本地服务器，预览网页
　$hexo d //等同于hexo deploy,用于部署文件到github

建站

在自己的博客文件夹下F:\github\hexo,执行命令：
　　

1
2
3
4
　$hexo init //初始化，自动下载搭建网站所需的所有文件
　$npm install //安装依赖包
　$hexo g //产生静态文件
　$hexo s //启动本地服务器，开启预览功能

这个时候在浏览器输入localhost:4000即可查看到生成的静态网页：Alt text

部署到github

在hexo根目录下找到配置文件_config.yml，使用 MarkdownPad 打开，编辑最后的deploy字段，将自己的github仓库地址输入进去：
　　

1
2
3
4
　deploy:
　　　type: git //注意冒号':'后面的空格一定要有
　　　repository: https://github.com/username/username.github.io.git
　　　branch: master

配置SSH Key

在桌面空白处鼠标右键选择Git Bash Here,输入以下命令配置SSH Key:
　　

1
$ssh-keygen -t rsa -C "your_email@youremail.com"

引号里面的内容输入邮箱地址，然后回车，会提示文件保存的路径，这时候按回车键确认，然后会提示你输入密码，然后会确认输入一次，在c:/user/username/.ssh/文件夹内看到生成了两个文件，一个是id_rsa，另一个是id_rsa.pub，打开id_rsa.pub然后选中里面的全部内容，复制下来。登录 github,点击setting,左边有一个SSH and GPG keys选项，进入New SSH选项，title随意，将之前复制的内容粘贴到key里面去。回到Git bash命令行，输入以下命令验证:
　　

1
$ssh -T git@github.com

成功时会提示：
　　

1
Hi username! You've successfully authenticated, but GitHub does not provide shell access.

其中username为自己的github上的用户名

配置用户名和密码

　　

1
2
$git config --global user.name "your username"  
$git config --global user.email "your_email@youremail.com"

重新生成一下静态文件：
　　

1
2
3
　$hexo clean //清除缓存文件db.json和已生成的静态文件public
　$hexo g //产生静态文件
　$hexo d //部署到github

在运行hexo d之前需要安装git部署工具
　　

1
　$npm install hexo-deployer-git -g

第一次执行hexo d会弹出对话框提示输入github的用户名和密码。此时在浏览器输入：
https://github.com/username/username.github.io即可看到自己的博客已经搭建成功。
注: username替换为自己的用户名.

文章置顶

修改 hexo-generator-index 插件，位于 node_modules/hexo-generator-index/lib目录下，文件名为 generator.js,将该文件内容修改为：
　　

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

参考 generator.js,在要置顶的文章中添加 top 值，值越大文章越靠前：
　　

1
2
3
4
5
6
7
---
title: ROS 学习
categories: ROS
tags: [picture,naruto]
date: 2017-05-02 11:30:04
top: 1000
---

nexT主题

hexo安装完成后，默认的主题是landscape，保存在hexo/themes/文件夹下。nexT 主题需要自行下载。在博客文件目录下F:\github\hexo右键单击Git Bash Here，输入命令:
　　

1
　$git clone https://github.com/iissnan/hexo-theme-next.git themes/nexT

下载后的nexT主题会保存在themes目录下。修改hexo根目录下的配置文件_config.yml使主题生效:
　　

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

接下来选择nexT的Scheme，打开nexT的配置文件themes/nexT/_config.yml中，修改:
　　

1
2
3
4
　# Schemes
　#scheme: Muse //默认Scheme，黑白主调，大量留白
　#scheme: Mist //紧凑版本，整洁有序
　scheme: Pisces //双栏显示，清新

更多的设置请参考: nexT

设置语言

打开hexo的配置文件F:/github/hexo/_config.yml，修改:
　　

1
　language: zh-Hans //中文汉字

访问量统计

文章阅读量统计

使用 leancloud 实现文章阅读次数统计。注册完成后，点击访问控制台，选择创建新应用:Alt-text

创建名为Counter的class。之后找到该应用的AppID、AppKey，将这两个值写入到nexT的主题配置文件中_config.yml:
　　

1
2
3
4
5
6
　# Show number of visitors to each article.
　# You can visit https://leancloud.cn get AppID and AppKey.
　leancloud_visitors:
  　　enable: true
  　　app_id: #<app_id> //复制刚才创建的应用的AppID
  　　app_key: #<app_key> //复制刚才创建的应用的AppKey

为了安全，将自己的域名加入安全中心->web安全域名中，防止恶意修改。完成后部署网站，看效果是不是已经有了文章阅读量显示了。

站点访问统计

使用 不蒜子 脚本实现。
在themes/nexT/layout/_partials目录下找到文件footer.swig，在文件的头部添加:
　　

1
2
　<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
　</script>

您的支持是我原创的动力