GitHub Page + Hexo 搭建博客

发表于 2017-02-03 分类于 hexo Waline：阅读次数：本文字数： 7.4k 阅读时长 ≈ 7 分钟

用 hexo 搭建自己的博客，顺便记录下搭建过程

前言

环境

windows 7
LinuxMint

git

安装 git

win7

Git 官方版本

Linux

我们可以使用如下命令：

1	$ sudo apt-get install git

查看是否安装成功

1	$ git --version

配置 git

当安装完 Git 应该做的第一件事情就是设置用户名称和邮件地址。
官方解释：

Tell Git your name so your commits will be properly labeled
Tell Git the email address that will be associated with your Git commits

也就是告诉版本控制软件 Git 接下来在这台电脑上提交的文件的是谁,是哪一个 E-mail 地址。

在 Git Bash 中执行如下代码即可：

1 2	$ git config --global user.name "username" $ git config --global user.email "username@example.com"

git & GitHub

git 是一个版本控制的工具，是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。
github 有点类似于远程仓库，用于存放用git管理的各种项目。

与 github 建立联系

为了能够在本地使用 git 管理 github 上的项目，需要进行一些配置，这里使用SSH的方式进行认证，避免频繁输入用户名和邮箱地址。

检查电脑上是否已经有 SSH keys

1 2	$ ls -al ~/.ssh # Lists the files in your .ssh directory, if they exist

如果没有 SSH key，则生成新的 SSH key

1 2	$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com" # Creates a new ssh key, using the provided email as a label

然后，Git sh 中会出现：

1	Generating public/private rsa key pair.

表示新的 SSH 已经生成了，之后一路回车。

1 2	Enter passphrase (empty for no passphrase): [Type a passphrase] Enter same passphrase again: [Type passphrase again]

让你设置使用 SSH 密钥时的密码，由于我们都是在自己个人的电脑上操作，所以仍然回车，不设置密码即可。

将 SSH key 添加到 ssh-agent

确保 ssh-agent 正在运行：

1 2	# start the ssh-agent in the background $ eval $（ssh-agent -s）

将 SSH 私钥添加到 ssh-agent：

1	$ ssh-add ~/.ssh/id_rsa

将 SSH key 添加到 Github 账户

拷贝key：

1 2	clip < ~/.ssh/id_rsa.pub # Copies the contents of the id_rsa.pub file to your cllipboard

此时，SSH Key 已经在我们的剪切板里了。然后登录 Github 帐号，点击右上方自己的头像，选择Settings，在右边的Personal settings侧边栏选择SSH Keys。在 Title 这里输入 Key 的 label，比如 your_name-PC，然后在 Key 里面把 SSH Key 粘贴进去，点击Add key按钮。

测试 SSH 连接

测试一下，跟 Github 服务器 SSH 连接是否已经建立：

1 2	$ ssh -T git@github.com # Attempts to ssh to GitHub

可能会看到类似于：

1
2
3

The authenticity of host 'github.com (192.30.252.1)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

没关系的，输入 yes ，就可以看到如下的成功信息了

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

Node

win7

Node 官方版本

Linux

对于 node 的安装,我们最好使用 node 的版本管理工具 nvm

1
2
3

$ git clone http://github.com/creationix/nvm.git .nvm
$ cd ~/.nvm
$ ./install.sh

安装完成后输入

$ nvm -v

可以在窗口中看到

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`

 Any options that produce colorized output should respect the `--no-colors` option.

Usage:
  nvm --help                                Show this message
  nvm --version                             Print out the latest released version of nvm
  nvm install [-s] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
    --reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
    --lts                                   When installing, only select from LTS (long-term support) versions
    --lts=<LTS name>                        When installing, only select from versions for a specific LTS line
  nvm uninstall <version>                   Uninstall a version
  nvm uninstall --lts                       Uninstall using automatic LTS (long-term support) alias `lts/*`, if available.
  nvm uninstall --lts=<LTS name>            Uninstall using automatic alias for provided LTS line, if available.
  nvm use [--silent] <version>
  ....
  ....
  ....

表示安装成功
因为墙的存在,所以切换下载源

1	$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

接着安装 node

1	$ nvm install stable #安装最新稳定版

nvm 会自动下载最新的稳定版 node，完成后验证 node 和附带安装的 npm 的版本号

$ node -v
v11.0.0
$ npm -v
6.4.1

表示安装成功。

Hexo

安装Hexo

安装 Hexo 相当简单。在安装之前，必须检查电脑中是否已经安装下列应用：

Node.js
Git

在安装完这两者后，只需在终端中键入如下命令，回车等待安装完成。

1	$ npm install -g hexo-cli

fsevents 是 mac osx 系统下的，在 win 或者 Linux 下使用会有警告，忽略即可

1
2

$ npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/hexo-cli/node_modules/fsevents):
$ npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

建立站点

先在电脑中的某一位置建立好 your_name.github.io 文件夹，比如 D:\Blog\your_name.github.io，点击鼠标右键选择 Git sh，依次执行下面两条命令，建立站点：

1
2
3

$ hexo init
$ npm install
#安装依赖包

完成后，your_name.github.io 文件夹下面的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|      └── _posts
└── themes

_config.yml 文件存放着网站的配置信息，可以在这里配置大部分的参数。
package.json 文件存放着插件信息，从中可以查看那些插件已经安装。
scaffolds 是模板文件夹，新建文章时，Hexo 会根据 scaffolds 来建立文件，不过这个模板和后面的主题里指的模板不一样。
source 是存放用户资源的地方的文件夹，除 _posts 文件夹之外，开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes 主题文件夹，Hexo 会根据主题来生成静态页面，我们以后自己安装的主题也都会放在这个文件夹下面，默认的 landscape 主题已经在里面了。

至此，博客搭建成功！当然，仅仅是本地的。此时执行：

1 2	$ hexo g $ hexo server

然后在浏览器输入 localhost:4000 就可以本地浏览了。

配置站点

在 _config.yml 中，可以修改大部份的配置，里面每一个参数的含义可以查看Hexo 的官方文档开始使用 — 配置，这里暂且只修改 title，subtitle 和 author，替换成自己网站的名字和作者名即可。

写新文章

1.在 Git sh 执行命令：

1	$ hexo new "my new post"

基本操作 — Front-matter

2.在 your_name.github.io/source/_posts文件夹下，打开my-new-post.md 如下：

Markdown 语法说明 (简体中文版)

title: my new post #可以改成中文的，如“新文章”
date: 2017/12/7 20:46:25
categories: blog #文章文类
tags: [博客，文章] #文章标签，多于一项时用这种格式，只有一项时使用tags: blog
---
#这里是正文，用markdown写，你可以选择写一段显示在首页的简介后，加上
<!--more-->
#在<!--more-->之前的内容会显示在首页，之后的内容会被隐藏，当游客点击Read more才能看到。

Hexo Test.
.....
....
..

Front-matter 是文件最上方以 ------ 分隔的区域，用于指定文章的标题、建立日期、更新日期等，如果主题模板还支持分类和标签的话，还可以指定分类和标签。

几个操作命令

$ hexo init [folder]
#新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站
$ hexo g
#生成静态文件
$ hexo server
#启动服务器。默认情况下，访问网址为： http://localhost:4000/
$ hexo d
#部署网站
$ hexo clean
#清除缓存文件 (db.json) 和 public 文件夹下已生成的静态文件。

更换主题

如果觉得默认主题 landscape 不大喜欢，可以去 Themes | Hexo 中挑选自己喜欢的主题。这里以material为例。

克隆主题

进入到本地博客目录的 themes 目录下：

执行如下命令：

1	$ git clone https://github.com/viosey/hexo-theme-material.git

配置新主题

将 your_name.github.io/_config.yml 中 theme 的值由原来默认的 landscape 改为 material 。
至此，主题已经更换完成，依次运行

1
2
3

$ hexo clean
$ hexo g
$ hexo server

我们就可以在本地，通过 http://localhost:4000/ 查看网站的新样式了

部署到 github

在上面，我们已经配置好了所需的所有东西，并成功的搭建了一个本地 Hexo 博客。
接下来使用 GitHub Pages 搭建一个他人能够访问的 Hexo 博客。

一般部署

编辑 your_name.github.io/_config.yml。

默认生成的_config.yml：

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

修改后的_config.yml：

...
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/your_name/your_name.github.io.git
  branch: 分支（User Pages为master，Project Pages为gh-pages）
...

为了能够使 Hexo 部署到 GitHub 上，需要安装一个插件：

1	$ npm install hexo-deployer-git --save

然后，执行下列指令即可完成部署：

1 2	$ hexo g $ hexo d

之后，可以通过在浏览器键入：username.github.io 进行在线浏览了

优化部署

场景需求：

当重装电脑或者在不同电脑上时,如何高效持续更新博客
当本地博客资料丢失后,该怎么办
…..

其实，Hexo生成的网站文件中就有 .gitignore 文件，因此它的本意也是想我们将 Hexo 生成的网站文件存放到 GitHub 上进行管理。这样，不仅解决了上述的问题，还可以通过git的版本控制追踪博文的修改过程。

.gitignore 文件内容如下：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

备份到 GitHub 上进行管理有两种思路：

一种是另外新建一个库,将文件上传即可
另一种是在 github pages 库的基础上新建一个分支即可

hexo 是将 markdown 源文件 ‘翻译成’ 静态网页文件，然后将网页文件部署(上传)到 github pages 上面，其实本地是两种文件都有的，也就是静态文件和Hexo环境.

所以，我们的思路其实就是把二者，分别存放在username.github.io的 master 和 hexo 分支上

如下所示：

username.github.io
     |
    ├──  master ── 存放静态文件
    └── hexo(默认) ── 存放hexo生成的网站文件

主要就是在 git 建立个分支，把本地的 hexo 环境用 git 管理起来

续以上内容
进入 your_name.github.io 文件夹，右键 Git Bash，依次输入如下命令：

$ git init #(当前分支为master)
#初始化本地仓库,就是让本地文件夹归 git 管.
$ git add .
#添加所有文件到 git 暂存区
$ git commit -m "备注信息"
#将暂存区的所有文件提交到 git 库
$ git branch hexo
#创建新分支 hexo
$ git checkout hexo #(当前分支为hexo)
#切换到分支 hexo.
$ git remote add origin https://github.com/yourname/yourname.github.io.git
#将本地 git 库"连接"到远程 blog 库
$ git push -u origin hexo
#第一次推送 hexo 分支的所有内容
$ hexo g -d
#生成网站并部署到 GitHub 上

这样一来，在 GitHub 上的 username.github.io 仓库就有两个分支，一个 hexo 分支用来存放网站的原始文件，一个 master 分支用来存放生成的静态网页。

博客管理流程

日常维护

在本地对博客进行修改（添加新博文、修改样式等等）后，通过下面的流程进行管理：

$ git add .
$ git commit -m "备注信息"
$ git push origin hexo #(当前分支为hexo)
$ hexo g -d #(当前分支为master)

新同步

当重装电脑之后，或者想在其他电脑上修改博客，可以使用下列步骤：

拷贝仓库：

1	$ git clone git@github.com:your_name/your_name.github.io.git #（默认分支为hexo）

在本地新拷贝的 `your_name.github.io` 文件夹下,依次执行：

$ npm install -g hexo-cli
$ npm install
$ npm install hexo-deployer-git
#不需要 hexo init

前言

git

安装 git

win7

Linux

配置 git

git & GitHub

与 github 建立联系

检查电脑上是否已经有 SSH keys

如果没有 SSH key，则生成新的 SSH key

将 SSH key 添加到 ssh-agent

将 SSH key 添加到 Github 账户

测试 SSH 连接

Node

win7

Linux

Hexo

安装Hexo

建立站点

配置站点

写新文章

几个操作命令

更换主题

克隆主题

配置新主题

部署到 github

一般部署

优化部署

博客管理流程

日常维护

新同步

拷贝仓库：

在本地新拷贝的 your_name.github.io 文件夹下,依次执行：

在本地新拷贝的 `your_name.github.io` 文件夹下,依次执行：