github-hexo搭建好看的个人自由博客

前言

一. 前言

本文介绍怎么利用github+hexo在windows下搭建自己的博客。小编苦苦撕逼两天总结了这篇实战经验。

先看体验效果：https://blogs.yumiaoxia.com

特点：

1. 全是静态文件，访问速度快
2. 免费方便，不用花钱就可以搭建一个自由的个人博客，不需要服务器
3. 可以绑定自己的域名
4. 数据安全，基于github的版本管理，可以恢复
5. 博客内容可以轻松打包，迁移
6. 由于基于GitHub page，服务器在国外，访问速度受影响
7. 博客内容使用html或者mardown编写，需要作者具备基础 IT 知识
8. 博客功能（评论、登录等）主要受限于主题，个性化配置需要一定技术功底

1.1 准备工作

1. 注册一个github账号

2. 安装了git客户端

3. 安装nodeJs、npm环境

1.2 大致流程

1. 搭建github博客
2. 配置SSH key
3. 安装、配置hexo
4. 使用主题
5. 写博客、发布

二. 搭建github博客

2.1 创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了。注意用户名必需都是小写，每个账户只能一个这样可以使用域名访问的仓库。创建的时候指定一个README.md文件，用来显示创建空间后首页的展示内容

创建成功后，在仓库里点击右边的settings,往下拉，可以看到

第一个红框说明可以使用该url访问你的github博客，第二个红框中的按钮可以点击进去选择一个主题样式。

2.2 绑定域名

这是一个可选步骤，根据个人喜欢可以绑定一个域名，如果不进行这一步，则你的的博客还是按“https://用户名.github.io”访问。

首先注册一个域名，腾讯云的域名注册地址点击这里

绑定域名分2种情况：带www和不带www的。

域名配置最常见有2种方式，CNAME和A记录，CNAME填写域名，A记录填写IP，由于不带www方式只能采用A记录，所以必须先ping一下你的用户名.github.io的IP，然后到你的域名DNS设置页，将A记录指向你ping出来的IP，将CNAME指向你的用户名.github.io，这样可以保证无论是否添加www都可以访问，如下：

然后到你的github项目根目录新建一个名为CNAME的文件（无后缀），里面填写你的域名，加不加www看你自己喜好，经测试

• 如果你填写的是没有www的，比如 mygit.me，那么无论是访问 http://www.mygit.me 还是 http://mygit.me ，都会自动跳转到 http://mygit.me
• 如果你填写的是带www的，比如 www.mygit.me ，那么无论是访问 http://www.mygit.me 还是 http://mygit.me ，都会自动跳转到 http://www.mygit.me
• 如果你填写的是其它子域名，比如 abc.mygit.me，那么访问 http://abc.mygit.me 没问题，但是访问 http://mygit.me ，不会自动跳转到 http://abc.mygit.me

三. 配置SSH key

直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

检查本机已存在的ssh密钥

$ cd ~/.shh

如果提示”no such file or directory”,说明以前在本机没有配置过，这是，利用ssh工具生成:

$ ssh-keygen -t rsa -C "邮件地址" #注意参数C为大写

然后，连续默认3次就可以了，打开用户目录下 .ssh/id_rsa.pub文件，editPlus打开复制里面内容。然后进入 gitbub个人主页》settings》SSH and GPG keys》new SSH key，按下图粘贴拷贝的内容

最后测试是否成功：

$ ssh -T git@github.com #邮箱地址不用改

如果提示“Hi yumiaoxia! You’ve successfully authenticated, but GitHub does not provide shell access.”说明SSH配置成功。

需要在Git中配置全局变量：你的用户名、密码。在git命令客户端窗口执行：

$ git config --global user.name "用户名"
$ git config --global user.email "邮箱地址"

四. 安装、配置hexo

4.1 hexo简介

Hexo是一个简单，轻量、快速、强大的基于 Github Pages的博客发布工具，支持Mardown语法，有众多优秀插件和主题

官网：http://hexo.io

4.2 使用前注意事项

1. 有些命令受限于git，所以建议以下命令都是用Git bash 工具完成。

2. hexo初始化后有两种_config.yml文件，一个是根目录下的，一个是各个heme下面的

3. 先新建一个目录文件夹hexo，以下命令都在该文件夹下执行

4.3 安装及初始化

安装：

$ npm install -g hexo

初始化：

$ hexo init

这步命令执行完，会在hexo根目录下生成一些列固定文件及文件夹

4.4 配置

如上图，我们看到根目录有一个配置文件_config.yml,在EditPlus工具中打开，我们需要对里面的一些内容进行设置。设置项可以参考官方文档，例如使用语言，网站名字，作者等。

我们要将编写的网页能上传到 Github上面，需要在该配置文件末尾添加：

deploy:
  type: git
  repository: git@github.com:yumiaoxia/yumiaoxia.github.io.git
  branch: master

我们要能推送到github上，还需要一个安装插件

$ npm install hexo-deployer-git --save

完成上面工作，基础配置已经Ok，我们可以测试以下效果

依次执行

$ hexo g # 将所有文件打包到根目录public下，这个过程会把md文件转换为html文件 == hexo generator
$ hexo s # 启动服务器

提示以下信息，服务成功启动

打开浏览器，输入“http://localhost:4000"

如图界面已经正常显示，可以将博客推送到Github上面了

$ hexo d

之后，你就可以在 你的用户名.github.io上看到同样的效果，到这里Hexo的基本搭建算高成功了。

4.5 一些其他常用命令

$ hexo init # hexo环境初始化
$ hexo g  # hexo 构建博客项目
$ hexo s  # hexo 启动本地服务
$ hexo d  # 推送到github，使用该命令需要安装git插件
$ hexo new '文章' # 新建一篇文章，source目录下按日期生成一个扩展名（.md）的文件，可以使用markdown语法编辑你想发布的内容，构建时会自动转换html文件在浏览器显示
$ hexo new page '页面名字' #该命令会生成一个目录，目录下有一个index的页面
$ hexo clean # 清空缓存，一般在重新构建项目前使用该命令

五. 使用主题

hexo 默认是使用 landscape主题，个人感觉比较丑，简陋。官网上可以找到大量的主题供我们选择，我们可以点击预览，相信总有一款高大上符合你心意的。

官网提供的主题模板林林总总，有的比较简洁，配置简单；有的功能健壮，但配置稍微复杂，没有花一些时间摸索是不行的，百度给出来的教程就大概是（yilia,next,jekyll…)这几种。

针对程序员来说，一般比较喜欢模板层次分明，代码高亮，功能强大的主题，这里推荐以下几种：

• Fan： 界面精美，整体颜色黑色带些透明，星光动画。代码高亮，目录显示，一键置顶，上下文章切换，支持搜索，浏览统计，不支持评论系统。总体来说，确实一款不错的主题，但是该主题作者没有提供较为详细的配置教程，还是需要使用者画一些精力，时间配置的

• snark：该主题视觉上也是非常丰富的，文章黑底白字，代码看起来也比较酷炫，支持搜索，评论系统，一键置顶，上下文章切换，浏览统计，不支持目录，总体来说也是一款非常不错的主题。

  

• black-blue: 该主题以黑灰色为主调，外观还是蛮漂亮的，支持上下文章切换，文章目录，搜索，评论系统，最大的特点是不同的标签以不同颜色区分，代码高亮显示行号，支持评论，登录，文章列表，也是一款不错的主题选择

  

起始还有一些满优秀的主题，这里限于篇幅，就介绍这几款。下面就以snark为例，介绍怎么配置使用。

在官网主题列表中搜索“snark”，点击图中连接

拷贝项目路径，粘贴在Git bash中，使用git clone下载在“themes/snark”下

$ git clone https://github.com/Litreily/hexo-theme-snark.git themes/snark

然后阅读README.md文件，根据文件提示操作

首先，提示我们安装两个插件，我们照着执行

$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save

记得，安装玩插件之后需要到插件列表中找到该插件，看看该插件的使用刚发，有可能主题的发布者会忽略提示，导致你的配置失败。

在sass插件下，可以看到需要的配置项，直接拷贝到 根目录/_config.yml中

然后提示我们禁用原本的代码高亮的配置，我们照着操作

另外需要的一些插件：

$ npm install hexo-generator-feed --save
$ npm install hexo-generator-search --save
$ npm install hexo-generator-sitemap --save

根目录配置文件加入如下配置

## snark所需配置
node_sass:
  outputStyle: nested
  precision: 5
  sourceComments: false
  ## snark所需配置
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  ## snark所需配置
search:
  path: search.xml
  field: post
  content: true
  ## snark所需配置
sitemap:
    path: sitemap.xml

主题配置文件，评论系统（使用第三方评论系统，需要先到learnclound注册）

其他一些通用配置（主题发布没提示）

1. 主配置下修改

   theme: snark

2. 安装的插件需要指定

   Plugins:
       - hexo-generator-search
       - hexo-generator-feed
       - hexo-generator-sitemap

3. 语言。需要根据主题目录下的语言包指定，snark没有，这里指定通用的两种中文

   language: 
      - zh-CN
      - zh-Hans

   其他一些配置，如目录，友链等

   4. 完成后，使用如下命令查看效果

   $ hexo clean #清除缓存
   $ hexo g      #构建项目
   $ hexo s       #开启服务

4. 打开浏览器查看效果

   

ps: 本教程第五章只是其中一个主题安装的示范,而文章开头的预览效果使用的主题是BlueLake（安装教程看这里），另外读者可根据自己的喜好选择安装，只要细心一些，相信你也可以成功的😊！