KovLento

使用GithubPages和Hexo搭建博客

发表于 | 分类于 | | 阅读次数

摘要

这是一篇使用GithubPages和Hexo搭建自己独立博客的教程，介绍了如何使用和配置Hexo框架，如何将Hexo部署到自己的Github项目中，域名注册，以及域名的绑定等一步步搭建起自己独立博客的完整过程。

前言

本文主要针对Windows平台和Hexo 3.x

起步

一.安装node.js（百度or谷歌）

二.安装git（百度or谷歌）

三.安装Hexo

一、Hexo安装

桌面右键鼠标，点击Git Bash Here（安装了git才能看到），输入npm命令即可安装
npm install hexo-cli -g
npm install hexo —save

二、Hexo初始化配置

创建Hexo文件夹

安装完成后，根据自己喜好建立目录（如F:\Blog\Hexo），直接在F:\Blog\Hexo文件夹下右键鼠标，点击Git Bash Here，进入Git命令框，执行以下操作。
$ hexo init $ npm install
安装 Hexo 完成后，Hexo 将会在指定文件夹中新建所需要的文件。Hexo文件夹下的目录如下：

安装Hexo插件(如果想不出错，就将下面的插件都安装完。)
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
然后执行下面语句，执行完即可登录localhost:4000查看效果
hexo generate
hexo server
登录localhost:4000，即可看到本地的效果如下：

四.将博客部署到GitHub Pages上（最关键的一步）

一、注册Github账户

  1. 访问Github首页
  2. 点击右上角的 Sign Up，注册自己的账户

二、创建项目代码库

  1. 注册完登陆后，我们就创建一个我们自己的Github Pages项目。点击New repository。

三、配置SSH密钥

配置Github的SSH密钥可以让本地git项目与远程的github建立联系，让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步。操作如下：

第一步、看看是否存在SSH密钥(keys)

首先，我们需要看看是否看看本机是否存在SSH keys,打开Git Bash,并运行:
$ cd ~/. ssh
检查你本机用户home目录下是否存在.ssh目录
如果，不存在此目录，则进行第二步操作，否则，你本机已经存在ssh公钥和私钥，可以略过第二步，直接进入第三步操作。

第二步、创建一对新的SSH密钥(keys)

$ssh-keygen -t rsa -C “your_email@example.com”
这将按照你提供的邮箱地址，创建一对密钥
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
直接回车，则将密钥按默认文件进行存储。
接着，根据提示，你需要输入密码和确认密码（说到这里，如果你很放心，其实可以不用密码，就是到输密码的地方，都直接回车，所以每次push就只管回车就行了。所谓的最安全的密码，就是没有密码 哈哈）。相关提示如下：（这一步只管回车就行）
Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]
直到出现
Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

第三步、在GitHub账户中添加你的公钥

运行如下命令，将公钥的内容复制到系统粘贴板(clipboard)中。
clip < ~/.ssh/id_rsa.pub
接着：

  1. 登陆GitHub,进入你的Account Settings（点击头像—》setting）.
  2. 选择SSH Keys
  3. 粘贴密钥，添加即可

    第四步、测试

    可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：
    $ ssh -T git@github.com
    如果是下面的反馈：
    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就好，然后会看到：
    Hi cnfeat! You‘ve successfully authenticated, but GitHub does not provide shell access.

    第五步、设置用户信息

    现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。
    $ git config —global user.name “cnfeat”//用户名
    $ git config —global user.email “cnfeat@gmail.com”//填写自己的邮箱
    这样SSH Key就配置成功了。

    四、将本地的Hexo文件更新到Github的库中

    一、登录Github打开自己的项目 username.github.io

    第二步、打开之后，SSH类型地址，并复制

    第三步、打开你一开始创建的Hexo文件夹（如F:\Blog\Hexo），用记事本打开刚文件夹下的_config.yml文件

    第四步、在配置文件里作如下修改，保存

    第五步、在Hexo文件夹下执行：

    hexo g -d
    执行完之后会让你输入github的账号和密码，输入完后就可以登录我们自己的部署在Github Pages服务器上的博客了。对应的地址是 username.github.io(我的是：bluskytee.github.io)。

    第六步、在浏览器上输入自己的主页地址

    在浏览器上输入即可看到我们自己的博客

    五.美化自己博客

那么现在我们的博客已经挂在了服务器上面，别人已经可以通过网址来登陆我们的博客了，但是我们这时就有了新的需求，就是自己的博客并不好看，那怎么办的？这很简单，要知道很多前端开发者在Hexo框架下开发了很多的主题给我们使用，我们只需要把他们的主题克隆过来，然后通过修改配置文件即可达到我们所需要的效果。
那么我们应该怎么修改呢？

一、进入Hexo的官网主题专栏

二、挑选我们喜欢的主题

可以看到有很多主题给我们选，我们只要选择喜欢的主题点击进去，然后进入到它的github地址，我们只要把这个地址复制下来(例如我是选择：hexo-theme-next这个主题)

三、克隆主题

再打开Hexo文件夹下的themes目录（F:\Blog\hexo\themes），右键Git Bash，在命令行输入:
git clone https://github.com/iissnan/hexo-theme-next(此处地址替换成你需要使用的主题的地址)
下载中，等待下载完成：

四、修改Hexo配置文件

下载完成后，打开Hexo文件夹下的配置文件_config.yml
修改参数为：theme: hexo-theme-next

五、部署主题，本地查看效果

返回Hexo目录，右键Git Bash，输入
hexo g
hexo s
打开浏览器，输入
http://localhost:4000/
即可看见我们的主题已经更换了。

六、如果效果满意，将它部署到Github上

打开Hexo文件夹，右键Git Bash，输入
hexo clean (有时因为缓存问题，服务器更新不了主题)
hexo d -g

七、打开自己的主页，即可看到修改后的效果

更多修改效果请查看对应主题的说明文档，查看本主题(Next)对应的说明文档（去Next的github主页）。

六.在博客写文章

一、用hexo发表新文章

$ hexo n “文章标题”

其中 我的家 为文章标题，执行命令 hexo n “我的家” 后，会在项目 \Hexo\source_posts 中生成 我的家.md文件，用编辑器打开编写即可。
当然，也可以直接在\Hexo\source_posts中新建一个md文件，我就是这么做的。
写完后，推送到服务器上，执行以下命令即可在我们的站点看到新的文章。
$ hexo g #生成
$ hexo d #部署 # 可与hexo g合并为 hexo d -g

二、用Markdown写文章

我们注意到在 \Hexo\source_posts 文件夹下存放着我们的文章，它们的格式都是以.md格式结尾的，没错，Hexo也是支持Markdown语法的，所以当我们需要写具有格式化的文章时，我们可以使用支持Markdown语法的编辑器进行文章编译，然后保存文件到 \Hexo\source_posts 文件夹下即可。

复制进去之后，只要执行
$ hexo d -g
推送到我们的Github仓库即可。

那么什么是Markdown？

Markdown是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的HTML 标记语言来说，Markdown可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

Markdown有什么优点？

  • 专注你的文字内容而不是排版样式。
  • 轻松的导出 HTML、PDF 和本身的 .md 文件。
  • 纯文本内容，兼容所有的文本编辑器与字处理软件。
  • 可读，直观。适合所有人的写作语言。

我该用什么工具？

  • Windows下可以使用 MarkdownPad2。
  • 在 Mac OS X 上，我建议你用 Mou 这款免费且十分好用的 Markdown 编辑器。
  • Web 端上，我强烈推荐 简书 这款产品。

七.关于将自己的域名关联到Github Pages上

如果你觉得自己的域名不够个性可以去买一个域名然后绑定到自己的博客上（购买域名需要收费）
此步骤也比较简单，大家都自行百度。我就不累赘了。

有问题欢迎留言,只要我知道的会一一解答。