supce's blog

利用 Hexo 3 及以上版本 + github/gitcafe 搭建博客

前言


曾经一直有搭建博客的想法,前面由于时间原因搁置了下来,这次抽时间终于把博客搭建完成了。网上很多教程都是基于 hexo 2.x 的教程,而 hexo 3.0 做了很多变动,于是把这次搭建博客的过程记录下来,供大家参考,如有不对的地方欢迎大家指正。

1 安装


请选择对应的版本下载安装

1.1 安装 node.js
1.2 安装 git

2 添加SSH公钥


由于某些因素,gitcafe 的访问速度比 github 要快,因此以 gitcafe 为例。如果想使用 github,请参考附录。

SSH ( Secure Shell)是一种安全协议,在你的电脑与 GitCafe 服务器进行通信时,我们使用 SSH 密钥(SSH Keys)认证的方式来保证通信安全。你可以在网络上搜索到关于 SSH 密钥 的更多介绍;下面我们重点讲解如何创建 SSH 密钥,并将密钥中的公钥添加到 GitCafe,以便我们通过 SSH 协议来访问 Git 仓库。

2.1 进入 SSH 目录

SSH 密钥的创建需要在终端(命令行)环境下进行,我们首先进入命令行环境。在 Windows 平台中,可以使用刚才安装的 Git Bash 工具。进入命令行环境后,我们执行以下操作来创建 SSH 密钥。

cd  ~/.ssh

如果还没有 ~/.ssh 目录,可以手工创建一个 mkdir ~/.ssh,之后再通过 cd ~/.ssh 进入 SSH 目录

可以通过 ls 命令查看 SSH 目录下的文件,来确认你是否已经生成过 SSH 密钥;如果 SSH 目录为空,我们开始第二步,生成 SSH 密钥;如果存在 id_rsa.pub 这个文件,说明你之前生成过 SSH 密钥,可以跳过第二步,直接进行密钥的获取。

2.2 生成 SSH 密钥

我们通过下面的命令生成密钥,请将命令中的 YOUR_EMAIL@YOUREMAIL.COM 替换为你自己的 Email 地址。

ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM"

在 SSH 生成过程中会出现以下信息,按屏幕的提示操作即可;当提示 Enter passphrase ( empty for no passphrase ) : 时,可以直接按两次回车键输入一个空的 passphrase;也可以选择输入一个 passphrase 口令,如果此时你输入了一个 passphrase,请牢记,之后每次提交时都需要输入这个口令来确认。

$ ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM"
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/USERNAME/.ssh/id_rsa.
Your public key has been saved in /Users/USERNAME/.ssh/id_rsa.pub.
The key fingerprint is:
15:81:d2:7a:c6:6c:0f:ec:b0:b6:d4:18:b8:d1:41:48 YOUR_EMAIL@YOUREMAIL.COM

一般情况下,在命令行中输入密码、口令一类的信息时是没有信息回显的。在我们这一步的操作中,输入 passphrase 口令时,命令行界面上不会随着键盘敲入密码而有什么反馈。

2.3 获取 SSH 公钥信息

SSH 秘钥生成结束后,你可以在 SSH 目录下看到私钥 id_rsa 和公钥 id_rsa.pub 这两个文件,不要把私钥文件 id_rsa 的信息透露给任何人。我们可以通过文本编辑器或 cat 命令来查看 id_rsa.pub 公钥信息。

  • 通过编辑器。使用你熟悉的文本编辑器,比如 记事本、Sublime Text 等软件打开 id_rsa.pub ,复制里面的所有内容以备下一步使用。
  • 通过 cat命令。在命令行中敲入 cat id_rsa.pub ,回车执行后命令行界面中会显示 id_rsa.pub 文件里的内容,复制后在下一步使用。

2.4 添加 SSH 公钥到 GitCafe

打开 GitCafe 网站,进入 账户设置 –> SSH 公钥管理 设置项,点击 添加新公钥 按钮,在「名称」文本框中可以输入任意文字。之后将我们刚刚复制的 SSH 公钥的内容粘贴到公钥文本框中,之后输入 GitCafe 的账户密码,保存。

添加ssh

至此,我们已完成 SSH 密钥的生成,并在 GitCafe 设置了公钥。

2.5 测试 GitCafe SSH 连接

完成上面的操作后,可以通过下面的命令来测试一下是否可以连接 GitCafe 服务器。

ssh -T git@gitcafe.com

如果你操作的电脑是第一次与 GitCafe 建立连接,会出现以下警告,

The authenticity of host 'gitcafe.com (50.116.2.223)' can't be established.
#RSA key fingerprint is 84:9e:c9:8e:7f:36:28:08:7e:13:bf:43:12:74:11:4e.
#Are you sure you want to continue connecting (yes/no)?

输入 yes 后回车。此时,如果你在生成 SSH 密钥时设置了 passphrase 口令,会提示你输入口令,输入后回车即可。

最后,如果你看到以下信息,说明连接成功。

Hi USERNAME! You've successfully authenticated, but GitCafe does not provide shell access.

测试通过后,你就可以到 GitCafe 创建项目并上传要托管的项目了。Happy Coding!Happy Git!

如果你对 GitCafe 网站还不熟悉,推荐阅读《 GitCafe 快速上手 》

3 gitcafe 建立项目仓库


进入 GitCafe 个人主页,点击页面右上角的 新建 按钮来新建一个项目。其中,项目名称必须与拥有者一致。

例如:我的拥有者为 byvector,则项目名称也为 byvector ,选填内容根据自己情况填写。

建立项目仓库

4 Hexo 介绍及安装


4.1 什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

4.2 Hexo 的安装
进入 git Bash,输入:

$ npm install -g hexo-cli

在你的电脑磁盘中新建文件夹 Hexo,右键文件夹,选择 git bash 输入:

$ hexo init

完成后输入:

$ npm install

安装 Hexo3.0 独立出来的模块

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

完成后,指定文件夹的目录如下:

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

_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。
package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
scaffolds
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
scripts
脚本 文件夹。脚本是扩展 Hexo 最简易的方式,在此文件夹内的 JavaScript 文件会被自动执行。
source
资源文件夹是存放用户资源的地方。除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题来生成静态页面。

生成静态文件。

$ hexo generate

开启本地server调试。

$ hexo server

浏览器中打开localhost:4000则可以在本地看到生成的页面。

4.3 Hexo 部署到gitcafe

打开 _config.yml 添加如下配置

将uer_name 替换成您自己的用户名

deploy:
  type: git
  repo: git@gitcafe.com:usr_name/user_name.git
  branch: gitcafe-pages

输入命令

$ hexo deploy

就可以通过user_name.gitcafe.io访问您自己的博客了。

其他具体内容可以参考 Hexo 中文文档

4.4 更换主题

输入命令

git clone https://<git/repository> themes/<themename>

_config.yml文件中的theme字段设置为与 <themename>一致

更新主题,更新前备份 themes/<themename>目录下的_config.yml

cd themes/<themename>
git pull origin master

以下以 jacman 主题为例
输入命令

$ git clone https://github.com/wuchong/jacman.git themes/jacman

_config.yml文件中的theme字段设置为 jacman
更新主题

cd themes/jacman
git pull origin master

执行hexo deploy时发现fatal: ‘github’ does not appear to be a git repository
在重新设置 Repo 的时候要把 .deploy/ 文件夹删掉,让 Hexo 再次初始化,否则 Hexo 只是执行 push 操作,所以会一直报错。

更多有关主题详细内容可以参考 jacman中文说明