GitHub+Hexo+Next搭建免费独立个人博客

2015-11-04 本文已影响6051人黄学涛

背景

大四理工科学生，精力旺、时间多。觉得有一个自己的空间，写点自己感兴趣的东西这事挺酷的。

我为什么要搭建个人博客

博客是一个很酷的产品。虽然博客辉煌的年代已经过去，但我认为在这个后博客时代的博文会更纯粹也更精髓。

我要搭建一个怎么样的博客

免费

莫名其妙的原因，就是不想买域名，买空间。

独立

独立的才是自己的。

简洁

内容是博客的灵魂，所以博客界面必须足够简洁。我想搭建的博客看不到胡里花哨的东西，能让人只专注到内容上面。这也是我不用新浪博客、网易博客等现成博客的原因之一。

怎样去实现它

在知乎上面瞎逛的时候，碰巧看到这样一个回答。你见过最棒的个人博客是什么？温柔的回答。

刚好满足我对个人博客的一些幻想。所以确定了用GitHub+Hexo+Next主题的思路。

正题

以上是背景，接下来进入正题。

准备：配置开发环境

依次下载安装：

Node.js
Git

怎样打开Git？

开始界面点击Git Bash

开始界面打开.jpg

进入目标文件夹鼠标右键打开Git Bash

文件夹内鼠标右键打开.jpg

推荐使用第二种方法。

一. 注册访问Github

Github为广大开发者提供了一个非常好的平台，不仅是代码的开源，同时Github还提供了开发者可以在Github上建立自己的站点。这个功能的局限是只能创建静态的网站。

注册完成后，需要验证邮箱。我第一次平时用的163邮箱，不过没有收到验证邮件。发现很多同学都遇到跟我一样的问题，换成QQ邮箱之后OK。

接下来：

新建Repository

页面右上角，新建Repository

新建repository.jpg
创建yourname.github.io，打勾表示名称可用

新建repository名称.jpg

配置SSH-Key

检查是否已经有SSH Key：打开Git Bash
$cd ~/.ssh　
如果说没有这个目录，就直接看第三步。
备份
生成一个新的SSH。
$ssh-keygen -t rsa -C "your e-mail"
之后直接回车，不用填写东西。然后就生成一个目录.ssh ，里面有两个文件：id_rsa , id_rsa.pub。
成功之后是这样的：

SSH-Key成功结果.jpg
把这个SSH放到github上：进入account-setting ，把id_rsa.pub的内容复制进去就可以了。

二. Hexo

关于Hexo

快速，简单而高效的静态博客框架

Hexo初始化博客框架

1.安装Hexo

    $ npm install -g hexo-cli

2.初始化框架

   $ hexo init <yourFolder>
   $ cd <yourFolder>
   $ npm install

初始化完成后，指定文件夹的目录如下

   .
   ├── _config.yml //网站的配置信息，您可以在此配置大部分的参数。
   ├── package.json
   ├── scaffolds //模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
   ├── source //资源文件夹是存放用户资源的地方。
   | ├── _drafts
   | └── _posts
   └── themes //主题文件夹。Hexo会根据主题来生成静态页面。

3.新建文章（创建一个hello world）

    $ hexo new "Hello World"

会在/source/_post里添加hello-world.md文件，之后新建的文章都将存放在此目录下。编辑hello-world.md文件可修改内容。

4.生成网站

    $ hexo generate

此时会将/source的.md文件生成到/public中，形成网站的静态文件。

5.本地服务器

   $ hexo server

输入http://localhost:4000 即可查看网站。
可修改：

   $ hexo server -p 3000

此时，输入http://localhost:3000 查看网站。

6.部署网站

   $ hexo deploy

部署网站之前需要生成静态文件。
可以用$ hexo generate -d直接生成并部署。此时需要在_config.yml中配置你所要部署的站点：

部署网站.jpg

到此为止完成网站的雏形。输入yourname.github.io可访问博客主页。例如：http://moyatao.github.io/ 。
绕坑：
部署的时候有可能会出错，别急，加这一步操作就ok了
```
 $ npm install hexo-deployer-git --save
```

在此感谢知友“温柔”的帮助，这是他的博客：http://ursocute.github.io/

附：

Hexo官方帮助文档

三. Next主题

NexT 主旨在于简洁优雅且易于使用，所以首先要尽量确保NexT的简洁易用性。

这是一个扩展主题，由一个台湾学生iissnan开发。主题秉承精于心，简于形的理念。

下载Next主题
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
启用Next主题
下载完成后，打开站点配置文件，找到theme字段，并将其值更改为 next。
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
验证是否可用
运行hexo s --debug，并访问http://localhost:4000 ，确保站点正确运行。

附：

四. Markdown语法

Markdown 是一种「电子邮件」风格的「标记语言]，Hexo支持Markdown。

打开之前生成的Hello World.md文件，惊奇地发现，就是用Markdown语法写的。

Hello World.jpg

Markdown 编辑器

网上搜索一下，网友推荐的Markdown编辑器很多，看个人选择。我对简书这个产品比较有好感，用的是简书的Markdown在编辑器。效果就是酱紫滴：

简书在线编辑器效果.jpg
备注：

正在学习Markdown基础语法，第二篇博客内容就整理Markdown语法。

附：

感悟

从想要搭建一个独立免费的个人博客开始，网上搜索各种资料。用过一个国外的傻瓜式软件，生成的界面太粗糙，而且不稳定。这点与我的初心不符直接放弃。

瞎逛了几天之后，终于确定了用本文的方法，然后开始摸索。什么懂不懂的小白，用了三天时间，终于搭建了我的第一个个人博客Mr H's Blog。过程中遇到了一些问题，但我这人就喜欢和自己死磕到底。感谢网友的分享和热情帮助。