使用GitHub+Hexo快速搭建自己的技术博客

# 使用GitHub+Hexo快速搭建自己的技术博客

## 为什么要做技术博客

1. 你可能会遇到过这种情形, 开发中遇到一个问题不知道怎么去解决, 然后去百度找答案, 尝试各种解决方案, OK终于解决了, 没过多久又碰到同样的一个问题, 已经忘记之前是怎么解决的了, 又要花很长的时间去百度了. 如果我们把遇到的问题都自己总结出来做成笔记, 那么在我们整理这个笔记的过程中可能就会细化这个问题, 从而加强记忆掌握这个问题, 而不是说遇到问题只是百度解决问题下次再遇到再百度的一个过程, 而是应该遇到问题–>解决方案–>总结记住问题解决方案, 这才是我们能不断学习进步的一个过程.

2. 当我们坚持去做笔记做总结, 不仅方面我们自己日后去复习去查找, 如果把我们的总结放到网上也会帮助很多遇到同样问题的人, 可以替他们也节省很多时间, 日积月累我们的文章写的多了, 也会慢慢的提高我们在网络上的一个知名度.

## 做自己的技术博客要不要花钱呢

很多人一想到做网站就会想到说要买域名买服务器等等, 一年又得不少钱呐, 其实不用, 做一个技术博客可以完全免费的, 我们可以借用Github给我们提供的免费仓库来存放我们的博客项目, 也可以使用Github给我们提供的静态页面地址来访问到我们的博客, 所以都是免费的, 如果你想看起来高大上一些, 那你可以花钱买一个自己喜欢的域名, 那也花不了多少钱.

## 如何开始搭建自己的技术博客呢

### 软件安装

– 安装Nodejs [下载安装Nodejs](http://nodejs.cn/download/)

因为我是在windows下操作的所以下载的是windows的安装版

安装的过程非常简单, 直接下一步即可

– 安装Git [下载安装Git](https://git-scm.com/)

Git的安装也是直接下一步即可

– 安装Hexo

如果你已经安装了Nodejs和Git, 接下来就可以使用命令来安装Hexo了

因为是使用命令在线安装的所以一定要有网络连接

打开CMD窗口输入　`npm install -g hexo-cli`

– 初始化Hexo

安装Hexo之后打开一个文件夹, 用来初始化Hexo, 这个文件夹作为你的博客的主目录

然后使用CMD命令行进入到这个目录下执行初始化命令

`hexo init`

接着执行`npm install`命令

– 运行Hexo

在前面步骤都准备完毕的时候执行命令`hexo s -g`

然后在浏览器中输入`http://localhost:4000`即可查看已安装默认主题的Hexo

### 更换默认主题

#### 安装主题

Hexo默认的主题可能不是你想要的, 那你就可以去Hexo官方收集的[主题](https://hexo.io/themes/)里选择自己喜欢的主题，也可以自己去GitHub上面自己找主题。

我使用的主题是[NexT](https://github.com/theme-next/hexo-theme-next)，在此感谢所有给Hexo提供主题的作者，给我们提供了又好看又好用的主题。

下面就针对我使用的`NexT`主题的配置做一个介绍, 其他主题的配置也都大同小异, 一般主题都会有对应的配置说明, 你可以根据自己选择的主题去修改

你可以直接从GitHub上面下载然后解压到你Hexo目录的themes目录下面，也可以使用终端克隆，如果你熟悉 Git 建议你使用克隆的方式，之后的更新可以进入到主题文件夹下通过 `git pull` 来快速更新，而不用再次下载压缩包替换, 注意目录层级, 如果解压后的主题有多级目录, 建议把主题文件放到主题文件夹下面的根目录, 也可以给主题文件夹重命名

那要怎么从默认的主题切换到刚下载的这个主题呢

找到Hexo根目录下面的 `_config.yml` 文件，将theme字段设置为你的主题名称，如`theme: next`并把之前的主题名使用`#`号注释掉, 这个主题的名字一定要和你`theme`目录下的那个主题文件夹名称一致

修改后在终端输入`Hexo s -g`，然后刷新浏览器重新访问`http://localhost:4000`就可以看到你安装的新主题啦

#### 配置主题

虽然已经切换到你新下载的主题了, 但是我们还需要对主题做一些定制化的修改

这里说两个配置文件, 一个是Hexo根目录下的`_config.yml`文件, 一个是主题文件夹下面的`_config.yml`文件, 两个配置文件同名, 暂且先叫配置一文件和配置二文件

打开配置一文件, 里面可以配置一些和你这个技术站点相关的信息, 还有如果你装了一些插件的话也要在这个配置文件中配置, 这个配置非常简单, 采用键值对的形式, Hexo官方也给出了非常详细的配置说明[https://hexo.io/docs/configuration.html](https://hexo.io/docs/configuration.html)

再说一下配置二文件, 这个是针对主题做修改的, 可以参考你下载的主题说明, 由于每个人选择的主题不同, 我这里不做详细说明了

### 发布文章

当你配置好主题之后, 那么重点就来了, 怎么发布文章呢

首先打开CMD命令窗口, CD到Hexo的根目录下, 执行下面这两条命令

`hexo new page "tags"`

`hexo new page "categories"`

这两条命令是创建分类和标签文件夹的, 执行完后会在根目录下的`source`目录中创建`tags`文件夹和`categories`文件夹, 里面分别会有一个`index.md`文件

分别打开这两个文件就行修改

`categories`下的`index.md`内容如下

“`

—

title: #categories

date: 2018-05-01 10:24:00

type: "categories"

comments: false

—

“`

`tags`下的`index.md`内容如下

“`

—

title: #tags

date: 2018-05-01 10:24:00

type: "tags"

comments: false

—

“`

这些都准备好了之后就可以写文章了, 文章格式必须是markdown的这个没得说

但是在每篇文章内容之前有一个固定的头格式是这样的

“`

—

title: 博客模板

date: 2015-09-26 15:09:16

updated: 2015-09-26 15:09:16

categories: 分类名称

tags: [标签, 标签, 标签]

comments: false

description: 你对本页的描述

photos:

– 图片的网络地址

—

“`

以上字段可以根据自己需要添加或者忽略不写, 一般`title` `categories` `tags`是要有的, 其他的可以不写

在下面就是你的文章内容了, 如果你的文章内容较多, 只是想在首页文章列表中显示文件的前面一小段描述可以使用 “这个标签前面的内容就会显示, 后面的内容点击阅读全文的时候才会显示, 如果你想给你的文章弄上目录可以使用“ , 把这个加在你文章的第一行就可以了

最后写完文章之后保持`.md`文件到`source`目录下面的`_posts`文件夹中, 重新执行`hexo s -g`命令后即可在网页上看到了

### 部署Github

接下来我们就要把这个本地的博客发布到网上了, 这样其他人才可以访问的到, 我们使用的是[GitHub](https://github.com/), 如果你还没有Github的账号得先去申请一个账号, 然后登陆新建一个仓库

仓库的名称是`用户名.github.io`

创建完成之后点击Settings

如果你购买了域名的话可以在这里设置, 如果没有域名默认的访问路径就是你的仓库名称

现在就可以访问一下你的博客地址了, 会显示下面的这个界面

接下来我们就要把本地的博客上传到Github了

点击头像选择Settings

选择SSH and GPG keys

创建新的SSH key

接下来说怎么去创建上图中的Key

在你的博客的根目录右键打开一个git窗口

先设置你的用户名和邮箱

`git config –global user.email "你的邮箱地址"`

`git config –global user.name "你的英文用户名"`

生成密钥

`ssh-keygen -t rsa -C "你的邮箱地址"`

找到密钥文件的保存位置并且打开, 因为是隐藏文件所以必须显示隐藏文件才能看到

打开文件夹里面有两个文件, 打开`id_rsa.pub`并复制其内容

然后再回到Github把复制的内容粘贴过去

点击添加按钮返回添加完成页面

可以使用下列命令来测试SSH有没有添加成功

然后再返回刚才自己建的仓库

复制SSH的地址

打开博客根目录下面的`_config.yml`文件在最下方粘贴

然后打开命令行执行命令`hexo d -g`即可发布到Github

如果出现上述错误, 可以使用`npm install –save hexo-deployer-git`命令解决

再次执行命令`hexo d -g`

再次访问你的Github(用户名.github.io)地址就能看到你发布的内容了

接下来就可以尽情的写文章了

### 写在后面

#### 404页面

404页面我使用的是腾讯公益, 直接复制下面代码保存成`.html`文件放到`source`目录下重新部署到GitHub即可

“`html

“`

#### 图床

在写markdown的时候避免不了的要插入很多的图片, 这个时候就要使用到图床了, 推荐大家使用七牛图床

#### 绑定域名

域名申请推荐大家去GoDaddy申请, 然后绑定到Github Pages, 绑定方法也很简单, 在`source`目录下新建一个文件命名为`CNAME`没有扩展名, 内容就直接写上你申请的域名即可, 然后重新部署到Github

#### 域名解析

推荐大家使用[DNSPod](https://www.dnspod.cn), 具体可以参考[Godaddy注册商域名修改DNS地址](http://support.dnspod.cn/Kb/showarticle/tsid/42)

#### 其他

还可以自己添加统计, 分析, 搜索, 自定义挂件, 插件, 提交搜索引擎…..