SWBetaWiKi纯小白在GitHub上利用Git和Hexo搭建静态博客 2016-02-04

看了很多网上的朋友写的关于在 GitHub 上利用 Git 和 Hexo 搭建静态博客的文章，对于完全“小白”的我，尽管一步一步诚慌诚恐地操作，总有这样或那样的问题令我无所适从。参照 N 个博友的方法后，磕磕绊绊地总算搭建成了，将具体的方法逐一记录，以备参考。

准备工作

Win7环系统下需要使的软件：

Hexo 简介

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

发布时，Hexo 可以部署在自己的 Node 服务器上面，也可以部署 github 上面。对于个人用户来说，部署在github上好处颇多，不仅可以省去服务器的成本，还可以减少各种系统运维的麻烦事(系统管理、备份、网络)。所以，基于 github 的个人站点，正在开始流行起来……

Hexo 的官方网站，也是基于Github构建的网站。

安装 Git

按提示安装即可。

安装 Node.js

注意: 安装完成后，检查是否将Node.js的安装路径添加入环境变量path，使npm命令生效。

安装Hexo

因为安装 Git 和 Node.js 需将相应的目录添加入环境变量path，应先重启电脑。重启后，打开Git Bash，输入以下命令安装即可：

1
2
3
4
5
npm install hexo-cli -g
npm install hexo --save

#如果命令无法运行，可以尝试更换taobao的npm源
npm install -g cnpm --registry=https://registry.npm.taobao.org

Hexo初始化设置

创建Hexo文件夹

安装完Hexo后，可以根据需要建个目录（例如：F:\hexo），然后右键点击，打开Git Bash，执行停命令如下：

打开Git Bush

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo init
npm install
#新建完成后，指定文件夹的目录如下
#或略有不同，根据不同版本 Hexo 而不同
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|      ├── _drafts
|      └── _posts
└── themes

安装Hexo插件

1
2
3
4
5
6
7
8
9
10
11
12
13
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-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --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

Hexo简写命令

1
2
3
4
5
6
7
hexo v      #查看hexo的版本
hexo init   #创建一个hexo项目
hexo clean  #清除缓存文件和已生成的静态文件
hexo n      #生成文章，或者source\_posts手动编辑
hexo s      #本地发布预览效果，可打开localhost:4000查看
hexo g      #生成public静态文件
hexo d      #同步更新至GitHub

创建Hexo文件夹并安装好插件后，便可在此文件夹右键打开Git Bash，启动 Hexo 服务，查看本地生成静态网页的效果了。

1
2
3
hexo clean
hexo g
hexo s

这时端口4000被打开，可通过浏览器打开地址 http://localhost:4000/，查看博客。

查看博客

注册GitHub账号及建立仓库

注册GitHub

访问，注册十分简单，一定要记住注册时使用的邮箱，因为 GitHub 的通知是发往邮箱的。如下图所示：

注册 Github 账号

申请成功后，在GitHub官网上登录，并验证邮箱即可。

在GitHub上建立仓库

与 GitHub 建立好连接之后，就可以方便的使用它提供的 Pages 服务。GitHub Pages 分两种，一种是用你的 GitHub 用户名建立的 username.github.io 这样的用户&组织站点，另一种是依附项目的 Pages。想建立个人博客是用的第一种，形如 username.github.io 这样的可访问的站点，每个用户名下面只能建立一个。如下图所示:

创建仓库1

创建仓库2

生成测试页面

进入刚才创建的仓库,点击右边菜单中的Settings按钮，在跳转到的页面 Update your site 对应处点击“Automatic page generator”按钮，这样就有了一个github自动生成的页面用来测试的时候使用。之后点击继续。

创建 Page

发布 Page

选择主题，点击Publish page发布:

发布 Page

再次回到仓库，Settings按钮，点击链接就可以看到测试地址页面。

博客地址

配置 SSH Key

生成 SSH Key

我们如何让本地git项目与远程的GitHub建立联系呢？用SSH key。在桌面或开始菜单中找到 Git Shell，打开后输入以下命令：

1
cd ~/. ssh   #检查本机的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。需要生成 SSH Key，用以下命令：

1
2
3
ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):  #<回车就OK>

注意 1: 此处的邮箱地址，你应输入自己的在 GithHub 上使用的邮箱；
注意 2: 此处的「-C」的是大写的「C」。

然后系统会要求你输入 GitHub 注册用户名的密码。这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

1
2
Enter passphrase (empty for no passphrase):  #<输入密码>
Enter same passphrase again:                 #<再次输入密码>

注意：输入密码的时候没有*字样的，你直接输入就可以了。

最后看到这样的界面，就成功设置ssh key了：

配置SSH Key

添加SSH Key到GitHub

在本机设置 SSH Key 之后，需要添加到 GitHub 上，以完成 SSH 链接的设置。

  • 打开本地 C:\Documents and Settings\Administrator.ssh\id_rsa.pub 文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。

  • 登陆github系统。点击右上角的 Account Settings—>SSH Public keys —> add another public keys。

  • 把你本地生成的密钥复制到里面（key文本框中）， 点击 add key 就ok了。

测试

可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

1
ssh -T git@github.com

如果是下面的反馈：

1
2
3
The authenticity of host 'github.com (207.97.227.239)' 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
Hi swbetawiki! You've successfully authenticated, but GitHub does not provide shell access.

设置用户信息

现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字必须是你在 Github 上注册用名，而不是GitHub的昵称。

1
2
git config --global user.name "swbetawiki"//用户名
git config --global user.email  "XXXX@gmail.com"//填写自己在 GitHub上的邮箱

本机已成功连接到github。若有问题，请重新设置。常见错误请参考：

GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)

将本地文件部署到 GitHub

修改 _config.yml 配置

在创建的 Hexo 文件夹中找到 _config.yml 文件,如下图所示：

_config.yml

找到其中的deploy标签，改成下图所示形式，并保存。注意：冒号后面要加上一个空格，否则会报错。

修改deploy

将博客 deploy 到仓库

右键点击 Hexo 文件夹，打开Git Bash，依次输入以下命令：

1
2
3
hexo clean
hexo g
hexo d

出现以下提示则表示正确：

发布博客

到这一步，个人博客就已经部署到 GitHub 上了，你可以到你的 GitHub 仓库查看是否已经更新。此时,通过 your_user_name.github.io（即你那个仓库的名称，形如：swbetawiki.github.io），就可以看到你的个人博客了。

发布新博文

新建博文

可以使用命令新建一篇博文,使用 Git Shell 进入 Hexo 文件夹，输入以下命令：

1
hexo n 文章标题

命令执行完后，就会发现在 Hexo\source_posts 目录中多了一个文件博文名.md，这就是我们刚才新建的博文。

此外，也可以直接进入 Hexo\source_posts 目录中，右键新建一个文本文档，将名字改为博文名.md,这样也新建了一篇博文。

新建页面

上一步新建的博文是显示在单个文章界面。这一步新建的页面是作为单个页面显示的，比如下图的分类、标签、归档和关于我，你点击后都是显示为单个页面。
命令新建页面：

1
hexo new page "页面名称"

命令执行完后，就会发现在在 Hexo\source 目录中多了一个文件夹，里面还有一个index.md,这就代表我们新建了一个页面。

写博文

用文本编辑器打开上面新建的博文，如下图所示：

写博文

新建的博文没有categories和toc，这是手动加上去的，具体有什么用，可参考 Hexo 配置（另写博文）。
三个“—”下面就可以四平八稳的写博文了。

发博文

写好博文后，保存，使用 Git Shell 进入 Hexo 文件夹，输入以下命令：

1
2
3
4
hexo clean
hexo g
#(若要本地预览就先执行 hexo server)
hexo d

打开博客，OK!

下次写关于 Hexo 美化的博文。

参考资料

▲