Hexo建站日志 (2) - Github Pages + Hexo 创建博客

使用 GitHub Pages 建立博客站点

什么是 GitHub Pages

Github 是项目托管网站,列出了项目的源文件。Github Pages 可以被认为是用户编写的、托管在github上的静态网页。

参考GitHub Pages 官方文档

GitHub Pages 提供两种类型的主页

  • 个人或组织主页 - 页面内容位于 master 下,用户名建立的 username.github.io 这样的用户&组织站点
  • 项目主页 - 页面内容位于每个项目的master下

想建立个人博客是用的第一种,形如 username.github.io 这样的可访问的站点,每个用户名下面只能建立一个。

注册 GitHub

Github 进行注册。

在 GitHub 上建立仓库

安装

安装 Git

什么是Git ?简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。如果想要了解Git的细节,参看廖雪峰老师的 Git教程

Git 官网下载相应版本进行安装。

Windows系统可直接点此下载: Download Now

安装成功后,将 GitGitHub 帐号绑定。在菜单栏里搜索并打开 Git Bash,设置 user.name 和 user.email 配置信息:

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成 ssh 密钥文件:

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

直接三个回车即可,默认不需要设置密码。在 C:\Users\username 路径下,找到生成的 .ssh 的文件夹,进入并找到 id_rsa.pub 文件,用记事本打开,将内容全部复制下来。

打开 GitHub_Settings_keys 页面,新建 New SSH Key ,如下图所示。

Title 为标题,任意填即可,将刚刚复制的 id_rsa.pub 内容粘贴进去,最后点击 Add SSH key 。

接下来检测 GitHub 公钥设置是否成功,在 Git Bash 中输入:

1
ssh git@github.com

如出现:

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.

直接输入 yes,就配置成功了。

之所以设置 GitHub 密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在 GitHub 上,私钥放置在自己的电脑里。 GitHub 要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了 ssh,当你推送的时候,git 就会匹配你的私钥跟 GitHub 上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

安装 Node.js

下载 Node.js 直接安装。 Download Now

检查 Git , Node.js 和 npm 是否安装成功

打开命令行cmd,分别输入:

1
2
3
git --version
node --version
npm --version

如出现下图所示,则表明安装成功。

安装 Hexo

在命令行窗口输入:

1
npm install -g hexo-cli

安装 Hexo 完成后,我们首先需要在电脑中为我们的项目创建一个 指定文件夹 (我在 C 盘创建了一个 blog 文件夹。C:\Users\DHK\Dropbox\blog )。

在命令行用 cd 命令到 指定文件夹 路径下,执行下列命令, Hexo 将会在指定文件夹中新建所需要的文件。

1
hexo init

等待安装,安装完成后, 指定文件夹 的目录如下:

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└──

继续执行命令

1
2
hexo generate
hexo server

Hexo 将 source 文件夹中除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件夹会被拷贝过去。

此时打开浏览器,在浏览器地址栏输入 localhost:4000/ (默认端口为4000), 便可以看到最原始的博客了。以后发表博文想先预览,也可以通过 hexo server 在本地先跑起来,看看效果。

部署博客到 Github Page 服务器

修改 Hexo 中的 _config.yml 文件

在 Hexo 文件夹下找到 _config.yml 文件,并用文本编辑器(Text Editor,我用的是 Atom)打开,下图所示:

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

将其 deploy 到仓库中

在命令行中运行以下命令:

1
npm install hexo-deployer-git --save

再依次输入以下命令:

1
2
3
hexo clean
hexo generate
hexo deploy

以上命令都是在 指定文件夹 路径下运行的。

可能会需要输入 Github 账号密码

至此,个人博客就已经部署到 GitHub 上了,你可以到你的 GitHub 仓库查看是否已经更新。在浏览器中输入 username.github.io (username 改成自己的 github 账户名),就可以看到你的个人博客了。

Hexo 的工作原理

  • hexo clean: 清除缓存文件 (db.json) 和已生成的静态文件 (public)
  • hexo server(可简写为:hexo s):启动服务器
  • hexo generate (可简写为:hexo g):生成静态文件,将我们的数据和界面相结合生成静态文件的过程。会遍历主题文件中的 source 文件夹(js、css、img 等静态资源),然后建立索引,然后根据索引生成 pubild 文件夹中,此时的 publid 文件是由 html、 js、css、img 建立的纯静态文件可以通过 index.html 作为入口访问你的博客。
  • hexo deploy (可简写为:hexo d):部署文件。部署主要是根据在 _config.yml 中配置的 git 仓库或者 coding 的地址,将 public 文件上传至 github 或者 coding 中。然后再根据上面的 github 提供的 pages 服务呈现出页面。当然你也可以直接将你生成的 public 文件上传至你自己的服务器上。