Github上搭建hexo博客

Posted on | In

github+hexo

约定$命令行在git bash中执行，其余的在cmd中执行。

前期的准备

  • git客户端
  • github账号
  • node.js
  • 创建仓库

在开始一定要注意node的环境变量和系统变量的配置问题，有了webpack配置的前车之鉴，当出现 <command> 不是内部或外部命令也不是可运行的程序时，首先想到的是环境变量的问题。如果没有设置，则不可以使用npm本地安装node_modules

建立仓库时注意，仓库的名字必须是用户名.github.io(注意是必须！)，接着配置SSH。

配置SSH

  1. 打开Git Bash终端：在桌面右键，会出现”Git Bash here”的选项，点击即可。
  2. 设置user name和email：
1
2
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥：

1
$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

生成的包括id_rsa和id_rsa.pub。id_rsa文件是私钥

添加公钥到github：

头像 —> setting —> SSH and GPG keys选项 —> New SSH key(新建SSH)，将id_rsa.pub中的内容复制到key文本框，再点击Add SSH key(添加SSH)

测试SSH

1
$ ssh -T git@github.com

接下来会出来下面的确认信息：

1
2
3
4
5
6
    The authenticity of host 'github.com (207.97.227.239)' can't be established. 
RSA key fingerprint is ....
 Are you sure you want to continue connecting (yes/no)?yes
 
 Hi Corbusier! You've successfully authenticated, 
but GitHub does not provide shell access.

博客本地仓库的创建

在本地创建Hexo(任意名字)，前提是环境变量已配置完成。

1
2
3
$ mkdir Hexo
/*<--!进入Hexo文件夹 -- !>*/
$ cd blog

本地安装hexo

  1. hexo全局安装
1
$ npm install hexo-cli -g
  1. 初始化hexo
1
$ hexo init
  1. 安装依赖
1
$ npm install
  1. 启动hexo
1
$ hexo server

启动之后，打开浏览器，在地址栏输入：http://localhost:4000，你会看到Hexo的示例页面。

测试hexo

  1. 新建文章
1
$ hexo new <title>

此时在source_posts文件夹中便会多出一个文档”title.md”.
如果要删除，直接在此文件夹下删除对应的文件即可。

  1. 生成静态页面
1
$ hexo generate
  1. 清除生成内容
1
$ hexo clean

执行此操作会删除public文件夹中的内容。

  1. 部署hexo
1
$ hexo deploy

该操作会将hexo生成的静态内容部署到配置的仓库中

部署hexo

  1. 编辑配置文件，关联远程仓库：
    在编辑器中打开Hexo配置文件_config.yml，找到下面内容并修改：
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:Corbusier/Corbusier.github.io.git #github仓库地址
      branch: master # github分支

注意：type、repo、branch的前面有两个空格，后面的:后面有一个空格

安装git插件：

1
npm install hexo-deployer-git --save

如果没有安装git插件，会有错误提示，安装后重新部署就可以了。

部署：

1
$ hexo deploy

现在，可以使用http://<用户名>.github.io查看你的博客了。

hexo常用参数设置

配置文件说明

网站配置文件是在根目录下的_config.yml(站点配置文件)文件，是yaml格式的。
所有的配置项后面的冒号（:）与值之间要有一个空格。

这个配置文件很长，但是需要修改的只有几项

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Awesome_929
subtitle:
description:
author: Zoe
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: corbusier.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: [] 

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
plugins:
  # hexo-generator-feed #RSS订阅插件
  # hexo-generator-sitemap  #sitemap插件

## Themes: https://hexo.io/themes/ #主题
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Corbusier/Corbusier.github.io.git #github仓库地址
  branch: master # github分支
#sitemap
sitemap:
  path: sitemap.xml
#feed
atom:
  type: atom
  path: atom.xml
  limit: 20

# links:
#   Feed: /atom.xml
#   SiteMap: /sitemap.xml

常用插件

如果是扩展插件，要在_config.yml配置文件中添加插件信息，是plugins配置项。
比如下面的两个插件：

1
2
3
plugins:
  hexo-generator-feed #RSS订阅插件
  hexo-generator-sitemap  #sitemap插件

安装插件，后面要加上–save，表示依赖项。

  • RSS订阅插件
    hexo-generator-feed：生成rss订阅文件
1
npm install hexo-generator-feed --save

添加配置信息

1
2
3
#sitemap
sitemap:
  path: sitemap.xml
  • SiteMap插件
    hexo-generator-sitemap：生成易于搜索引擎搜素的网站地图
1
npm install hexo-generator-sitemap --save

添加配置信息：

1
2
3
4
5
#feed
atom:
  type: atom
  path: atom.xml
  limit: 20

可以在主题配置文件中添加相关配置，可以在页面上显示。比如，添加链接信息

1
2
3
links:
  Feed: /atom.xml
  SiteMap: /sitemap.xml
  • Git插件
    hexo-deployer-git：使用git同步代码到git仓库中
1
npm install hexo-deployer-git --save

主题

默认的主题是landscape
官方主题地址：thems

切换主题

我是用的是next，以此为例：

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

在站点配置文件_config.yml文件中修改主题配置，比如修改theme: landscape为theme: next；

除了之前的主题git clone和修改站点配置文件外，还需要以下的操作：

1
2
3
hexo clean
hexo generate
hexo deploy

再打开网页，之前丑陋的landscape主题就被替换了。

更为详细的设置：NexT主题

使用travis部署hexo

现在博客基本可以运行了，但是如果需要多个电脑之间推送会不太方便。hexo使用的部署命令只是把静态文件上传到仓库中，在其他电脑同步下的只是静态文件而非源码。所以使用自动部署非常有必要。介绍使用Travis CI持续集成并部署。

配置多个SSH

  • 生成ssh密钥
    可以使用全局的ssh密钥，不过建议使用单独的ssh密钥，在这里以单独ssh密钥为例。
1
2
3
4
$ #切换到.ssh文件下
$ cd ~/.ssh
$ #生成密钥，后面换成自己的github邮箱
$ ssh-keygen -t rsa -C "SeayXu@163.com"

输入上面命令后回车一下，当提示Enter file in which to save the key (/c/Users/Seay/.ssh/id_rsa):时，输入新的ssh密钥文件路径和文件名(不能是.ssh/id_rsa)，这里输入id_rsa_blog，然后一路回车。

  • 添加ssh到github

登录到github中，点击进入到博客仓库。点击右上方的Settings进入到设置页面，点击左边的Deploy keys项。
在右上点击Add deploy key，然后在下面输入标题，把生成的密钥id_rsa_blog.pub里面的内容复制到key文本框中，选中下面的Allow write access，最后点击Add key。

  • 新建配置文件
    在.ssh文件夹中创建一个名为config的配置文件。

    1
    $ touch config

  • 编辑配置信息
    用编辑器打开config文件，添加如下信息：

1
2
3
4
5
6
7
8
9
10
11
# github
Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_rsa
# 这里是空行
# github_blog
Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_rsa_blog

提示：这里的密钥文件路径根据自己的做相应修改。

配置Travis

  • 接入Travis
    打开Travis CI，使用github账号登陆。

将鼠标放在右上角的用户名上，点击Account选项，会显示github的项目。
找到博客项目，点击前面带有 X 符号的按钮，开启travis支持。

  • 安装travis
    Travis安装需要Ruby环境，所有需要安装Ruby,并且需要安装rubygems插件。

    假设已经安装了Ruby！

1
2
# 安装travis
gem install travis
  • 新建配置文件
    首先打开博客项目文件夹，在项目根目录新建.travis.yml配置文件。
1
2
/*<--! cd 博客项目文件夹根目录 !--> */
$ touch .travis.yml
  • 复制ssh私钥
    在项目根目录创建文件夹.travis
1
$ mkdir .travis

将开始生成的ssh密钥文件id_rsa_bolg复制到.travis文件夹下：

1
2
/* 注意文件路径 */
cp ~/.ssh/id_rsa_blog .travis/
  • ssh配置文件
    这个ssh配置文件是用于在部署机器上使用的，不是本地的ssh配置文件，后面的travis配置文件会用到。

在.travis文件夹中新建文件ssh_config

1
touch .travis/ssh_config

编辑配置文件，添加如下内容：

1
2
3
4
5
Host github.com
User git
StrictHostKeyChecking no
IdentityFile ~/.ssh/id_rsa
IdentitiesOnly yes
  • 登陆travis
1
travis login --auto

根据提示输入github的用户名和密码。

  • 加密操作

    在这一步使用了其他的方法，也许是win7的电脑不一样，使用了另一种方法，第一种方法参考：常用配置方法。

当使用travis 加密操作时，travis encrypt 'REPO_TOKEN=<TOKEN>' --add

得到的反馈是：

Can't figure out GitHub repo name. Ensure you're in the repo directory, or speci fy the repo name via the -r option (e.g. travis <command> -r <owner>/<repo>)

按照错误提示重新加密：

travis encrypt -r Corbusier/Corbusier.github.io GH_Token=XXX可以在CMD中得到形如：

1
2
3
4
env:
  global:
    - GH_REF: github.com/iissnan/theme-next-docs.git
    - secure: "XXXXXX"

将其复制到.travis.yml配置文件中使用。
完整配置文件的参考：travis配置文件

本地提交操作

配置完成后需要本地提交，删除原先产生的.git文件夹，执行初始化操作：

$ git init

关联远程仓库

1
2
$ # 将github仓库改为自己的
$ git remote add origin git@github.com:Corbusier/Corbusier.github.io.git

  • 推送仓库提交本地修改，推送至github仓库。
1
2
3
4
5
6
$ # 添加文件
$ git add .
$ # 提交修改
$ git commit -m "test travis"
$ # 推送至远程仓库
$ git push -u origin dev

在commit后，推送至dev分支前，需要先查看git分支，然后创建dev分支后才能推送成功，附git基础命令：
git基础命令

push本地的代码至远程仓库之后，在https://travis-ci.org后台查看相关情况。
下面是成功的结果：

！！！之后用图取代链接
travis

以上就是自动部署Hexo的另一方法。

异地同步博客内容

如何将两台电脑上博客的内容同步内，即两台电脑上都可以编辑更新博客？要解决这个问题，首先我们要清楚我们博客文件的组成：

  • node_modules
  • public
  • scaffolds
  • source
  • themes
  • _config_yml
  • db.json
  • package.json
  • .deploy_git

我们博客上呈现的内容，其实就是public下的文件内容。那么这个Pulic目录是怎么生成的呢？
以下文件以及目录是必须要同步的：

  • source
  • themes
  • _config.yml
  • db.json
  • package.json
  • .deploy_git

采用github去备份，也就是新建一个项目用来存放以上文件，每次更新后推送到github上，用作备份同步。
假设我们现在配置了一台新电脑，里面没有安装任何有关博客的东西，那么我们开始吧：

  • 下载node.js并安装（官网下载安装），默认会安装npm。
  • 下载安装git（官网下载安装）
  • 下载安装hexo。方法：打开cmd 运行npm install -g hexo（要翻墙）
  • 新建一个文件夹，如MyBlog
  • 进入该文件夹内，右击运行git，输入：hexo init（生成hexo模板，可能要翻墙)

我们重复了一开始搭建博客的步骤，重新生成了一个新的模板，这个模板中包含了hexo生成的一些文件。

  • git clone 我们备份的项目，生成一个文件夹，如：MyBlogData
  • 将MyBlog里面的node_modules、scaffolds文件夹复制到MyBlogData里面。

做完这些，从表面上看，两台电脑上MyBlogData目录下的文件应该都是一样的了。那么我们运行hexo g && hexo d试试，如果会报错，则往下看。

这是因为.deploy_git没有同步，在MyBlogData目录内运行:npm install hexo-deployer-git –save后再次推送即可

总结流程：当我们每次更新MyBlog内容后，先利用hexo将public推送到github，然后再将其余必须同步的文件利用git推送到github。

附录

hexo常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo help #查看帮助
    hexo init #初始化一个目录
    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面
    hexo generate #生成网页，可以在 public 目录查看整个网站的文件
    hexo server #本地预览，'Ctrl+C'关闭
    hexo deploy #部署.deploy目录
    hexo clean #清除缓存，强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹
    
    简写：
    hexo n == hexo new
    hexo g == hexo generate
    hexo s == hexo server
    hexo d == hexo deploy
    
    hexo命令组合：
    hexo clean && hexo g -s，就是清除、生成、启动hexo clean && hexo g -d，就是清除、生成、部署

扩展hexo

添加最近访客

在需要添加最近访客的网页对应的 markdown 文件中添加如下代码：

1
<div class="ds-recent-visitors" data-num-items="39" data-avatar-size="40" id="ds-recent-visitors"></div>

鼠标点击小红心的设置

  1. 将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
  2. 找到 \themes\next\layout_layout.swing 文件， 在文件的后面， 标签之前 添加以下代码：
1
<script type="text/javascript" src="/js/src/love.js"></script>

背景的设置

  1. 将 particle.js 文件添加到 \themes\next\source\js\src 文件目录下。
  2. 找到 \themes\next\layout_layout.swing 文件， 在文件的后面，标签之前 添加以下代码：
1
<script type="text/javascript" src="/js/src/particle.js"></script>

修改文章内链接文本样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
找到文件 themes\next\source\css_custom\custom.styl ，添加如下 css 样式：

1
2
3
4
5
6
7
8
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

添加来必力评论功能

参考链接

给 Github 添加 README

默认情况下，Github中每一个项目，我们希望有一份 README.md 的文件来作为项目的说明，但是我们在项目根目录下的 blog\source 目录下创建一份 README.md 文件，写好说明介绍，部署的时候，这个 README.md 会被 hexo 解析掉，而不会被解析到 Github 中去的。
正确的解决方法其实很简单：

把 README.md 文件的后缀名改成 “MDOWN” 然后扔到blog/source文件夹下即可，这样 hexo 不会解析，Github 也会将其作为 MD 文件解析。