教程 | 一文搭建你的第一个免费专属博客

我建了一个QQ学习交流群，旨在“分享、讨论、学习、资源分享、就业机会、互联网内推、共同进步！”，感兴趣的可以加一下，也可以添加我的QQ~ QQ群：1002821945；QQ号：498073774；

前言

和大多数搭建个人博客的博主一样，我之所以搭建个人博客的主要原因也是因为不希望受制于各大内容分享平台，生怕有朝一日被安上一个“莫须有”的罪名，所有辛苦创作的内容都付之一炬。

关于搭建个人博客，我在内心规划了很久，<!--more-->一直在徘徊于两个选项之间，

1. 自己从底层搭建、注册域名、备案全流程做起；
2. 使用一些免费的托管平台和成熟的博客管理系统；

最终，我还是选择了后者，主要原因有如下几点：

• 容易搭建
• 操作和管理简单
• 免费
• 界面美观

目前有很多优秀的博客管理系统，例如WordPress、Halo、hexo，经过反复的对比，我选择了Github Page+hexo的方式进行搭建个人主页，虽然看上去只涉及两个工具或平台，但是要搭建一个完整的个人博客，要做的远不止这些，还要考虑有如下内容，

• 菜单栏
• 搜索框
• 评论功能
• 分享功能
• 访问量
• RSS
• 链接
• ......

本文就详细的介绍一下通过Github Page结合hexo搭建一个完整的个人博客。

域名-GithubPage

要想让别人能够访问到我们的个人博客，首先就需要有一个域名，我们可以自己申请、备案域名然后购买并部署到对应服务器，但是对于入门级这显然是繁琐且需要耗费一定资金的，因此可以使用github pages来托管我们的静态网页，这样我们就可以获取一个名为*.github.io的域名。

注册Github Page的过程如下：

第一步：注册Github账号

首先打开链接https://github.com/join?source=header-home，注册github账号，然后登录github。

第二步：创建github仓库

点击右上角"+"，选择New repository，填写Repository name，这个就是可以直接访问的域名，然后点击create repository即可。

到此为止，我们就把创建好了github page。

博客管理工具-hexo

hexo是一个轻量级的博客管理系统，这里要注意，hexo是一个管理系统，它负责新建、部署等博客管理工作。如果使用过git做版本控制的话应该很容易理解，它可以类比为git，可以通过一些命令生成静态网页、把静态网页推送到远程仓库。

hexo安装

由于hexo是基于node.js制作的一款博客管理工具，所以要按照hexo就需要事先安装node，
http://nodejs.cn/download/

$ npm install -g hexo-cli

hexo初始化

安装hexo之后需要对hexo进行初始化，首先需要新建文件夹，进入到新建文件夹之后再进行初始化，

$ mkdir hexo
$ cd hexo
$ hexo init

然后安装一些依赖包，

$ npm install

最后可以得到如下目录，

• 文章
• 关于
• 分类
• 标签

themes中包含的是博客的主题相关内容，其中默认的主题是landscape。

hexo使用

前面提到过，hexo其实类似于git，通过一些命令来实现静态网页生成、部署等工作，我们在维护博客过程中主要使用的有如下几个命令，

$ hexo n blogname      # 新建文章，例如，hexo n ComputerScience
$ hexo clean          # 清除缓存文件
$ hexo g              # 生成静态文件
$ hexo s              # 启动本地服务器，预览网页
$ hexo d              # 部署文件到指定的仓库

记住上述命令就可以进行日常的个人博客维护工作。

主题-Next

经过前面的配置，就可以通过hexo s启动本地服务器http://localhost:4000/，在浏览器中打开，对网站进行预览，

hexo默认的主题是landscape，我们可以修改为我们自己喜欢的主题，目前hexo有很多适配的主题，其中比较常用，也是本文推荐的就是Next主题。

一个hexo主题的好坏不仅仅取决于它的界面，还要考虑到后期扩展必备功能的需要，Next主题相对比较成熟，能够轻松的配置谷歌、百度检索，此外还可以很容易添加标题栏、阅读量等功能，下面就来看一下Next主题的配置。

克隆Next主题

首先需要把Next主题克隆到博客中themes路径下，

$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

这样在~/hexo/themes路径下就会有一个next文件夹。

修改配置文件

克隆next主题之后需要修改博客根目录下_config.yml文件，找到theme字段修改成next即可，

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

修改主题样式

next主题包含多个样式，我们可以根据自己的喜好进行修改，修改样式的文件在~/hexo/themes路径下，名字同为_config.yml，需要注意，这和前面提到的不是同一个文件，前面的配置文件是博客管理系统hexo的配置文件，这里的是主题的配置文件。

# Schemes
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

必备功能

通过前面的配置，我们已经完成个人主页“骨架”部分的搭建，打开预览页面如下，

可以看出，目前为止博客还比较“干净”，很多必要的功能都没有，例如菜单栏不完整，没有搜索框，此外，评论、阅读量、友情链接这些重要的功能都没有，下面就来一一介绍一下这些功能的配置过程。

注意：通过上述配置之后，博客所在路径和主题所在路径下分别有一个config.yml文件，后面所提到的站点配置文件指的是博客根目录下的config.yml，主题配置文件是指themes/_config.yml。

菜单栏

打开主题目录下的配置文件themes/_config.yml，找到menu字段修改菜单栏，

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

其中about是关于，tags是标签，其他的站点之类的也可以根据自己的喜欢进行添加。

搜索框

搜索框是一个博客必不可少的部分，当更新的文章数量逐渐增加之后，为了方便访问者阅读或快速定位目标文章，我们需要给它添加上一个搜索功能，hexo添加搜索框的方式如下，

首先，安装hexo-generator-search，

$ npm install hexo-generator-search --save

然后，在站点配置文件添加下面内容，

search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000

最后，在把主题配置文件local_search下的enable修改为true，

local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

修改后重新生成静态网页，预览一下即可，

到目前为止，应该可以看到，博客的名称为hexo且没有作者和网站描述信息、此外，网页显示的语言都是英文，我们可以通过修改站点配置文件来把它转换成英文，同时修改博客标题、描述、作者信息，

title: 平凡而诗意
subtitle: Jackpop
description: 原创技术分享网站
keywords:
author: Jackpop
language: zh-Hans

访问量、阅读量

访问量和文章阅读量是我们了解文章受欢迎程度最直接的方式，因此，访问量、阅读量也是一个完整博客不可或缺的部分，如果使用的是其他主体，需要通过一些脚本配置方式来为博客添加阅读量访问量，但是，如果使用Next主题，则不需要这些繁琐的步骤，这也应了前面所说的那句话--评价一个主题不仅仅要依赖它的美观程度，还要依赖它完善而强大的功能。Next主题自带不蒜子计数功能，我们只需要修改主题配置文件，把busuanzi_count下的enable由false改为true即可，

busuanzi_count:
  enable: true

评论功能

评论是一个博客非常重要的一项功能，目前有很多知名的博客评论插件，例如比较知名的畅言、来必力、valine等，在这里我还是推荐valine，因为它界面比较简洁，而且不需要访问者注册、登录即可评论，这样对于访问者更加友好。

由于评论内容需要耗费存储资源，因此需要首先注册LeanCloud获取存储引擎，然后复制appid、appkey，然后打开主题配置文件，

valine:
  enable: true
  appid: Ikslsdjflsjdnclskdfjlskdklalla # your leancloud application appid
  appkey: Kokkall09kkssmmcsslla # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 请在此输入您的留言 # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

配制后，重新生成，预览一下可以看到如下效果，

分享功能

当我们看到不错的文章想分享给其他同学怎么办？这时候就需要有博客有一个分享功能，强大的Next主题已经集成了百度分享功能，但是百度分享不支持https，如果想正常使用还需要更多的配置。

首先，修改主题配置文件，

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
baidushare:
  type: button
  baidushare: true

把baidushare改为true。

然后，为了解决百度分享不支持https的问题，需要进一步的修改，要先访问下方链接，

https://github.com/hrwhisper/baiduShare

把static文件夹下载到themes\next\source目录下，

最后，修改themes\next\layout_partials\share\baidushare.swig文件，把末位的代码修改一下，

修改前：

.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

修改后：

.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

RSS

RSS(Really Simple Syndication)是一种简易的信息聚合方式，是一种常用的信息订阅方式，但是对于我个人而言这项功能很少使用，如果觉得有必要也可以配置一下，下面就来介绍一下RSS的配置方式。

首先，安装RSS订阅插件，

$ npm install hexo-generator-feed --save

其次，修改站点配置文件，

plugin:
- hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

最后，修改主题配置文件，添加下面字段，

rss: /atom.xml

社交、友情链接

在我们的博客中，有时需要添加直达github、知乎、E-mail等社交工具的链接，也需要一些链接到其他网站的友情链接，下面来介绍一下怎么添加社交、友情链接。

首先，打开主题配置文件，搜索social，配置社交链接，

social:
  GitHub: https://github.com/Jackpopc || github
  E-Mail: mailto:498073774@qq.com || envelope
  知乎: https://www.zhihu.com/people/sharetechlee || book
  专栏: https://zhuanlan.zhihu.com/sharetechlee || edit

然后，搜索Blog rolls配置友情链接，

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  Title: http://example.com/

福利

我在公众号分享了Python、机器学习、计算机视觉、强化学习等领域相关的学习资源、电子文档。此外，还整理了一些高效的实用工具，如果需要可以关注公众号【平凡而诗意】，回复相应关键字获取~