前几天终于更新了几篇自己的博客，技术人怎么开始写博客和运营公众号、关于公众号引流，如果有兴趣可以点开查看一下，当然这也并非是太高深，只是我在准备写博客的时候自己整理的，如果你是准备开始可以参考一下，我感觉就是自己平时写的笔记，没有华丽的词汇，基本就是一些大白话，没办法理科生真的写不出来啊。好在也开始了，慢慢来吧。

这篇试着分析一下程序员使用hexo + next搭建个人的免费博客，说是免费其实在搭建的时候也花了一盒烟的钱，不过也相对于来说基本是白嫖。为什么程序员要搭建个人博客，其实这个问题我也Google了好多次，我基本上认从以下几点：

对自己平时知识的总结：这个过程其实就是把我们平时积累知识再通过写作这件事加深一下印象，在写的过程中我们会反复的去验证，这样就能让我们对知识的理解更透彻。
分享经验，帮助他人：我觉得新时代的程序员在这块享受了不少便利，不像以前如果遇上难题只能去啃那些经典难啃的著作，所以我们有必要把自己在工作遇到的困难或自己的感想记录下来，如果能有幸帮助到其他人也是我们回馈的一种方式。
个人博客更自由独立：现在各个流量平台都有自己的规则，不小心触碰的话我们的文章是会被限流或删除的风险，当然最惨的是自己辛苦搭建的博客被封。所以这个时候个人的博客优势就有了，并且我们可以在这个基础上推广和优化，虽然比较繁琐，但这个过程中还是能学到非常多的知识的，对与开拓眼界很有帮助。

Hexo 搭建

我本身是做Android开发的，如果让我自己来开发一个博客系统，对于我来说还是有点难度的，所以选择一套开源的博客系统还是有必要的，所以我最终评估选择了Hexo, 我搭建起来大概用了2天，当然这包括踩坑和优化主题的时间 , 后边我会尽量少点废话，尽量简洁。

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装准备

这块我Google了好几，所有的基本都是大同小异的，并且我在一篇Blog上还遇到了错误的指示，这让我耽误了一些时间，所以刚开始我不推荐去博客上按照那些执行，我们应该直接去官网，上边有比较详细的教程。关于安装准备我是参考官网，基本上看完就可以顺利的安装上了。后边我着重介绍我们选择主题和一些比较实用的功能，对于太花哨的东西我觉得没必要，Blog的简洁也很重要。

在博客搭建完成之后，原生的主题一般的很Low，所以找一款比较适合自己的主题就很有必要了，hexo 官方给了我们一些参考，Hexo 主题，里面有很多，样式都可以参考，我个人比较喜欢Next 主题，这个在Github上受欢迎度也是很高的，所以就选择了它，后边的配置基本是以Next为基础的来配置的，当然选择其它的也都有很多文档支持。在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，就是你的Blog根目录下 _config.yml, ，主要包含 Hexo 本身的配置；另一份位于主题目录下，是指 Blog/theme/next/下的 _config.yml文件，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

安装Next

Hexo 安装主题还是挺简单的，懂得开发的基本是秒配。推荐使用Git的方式，打开终端，切换到Hexo目录下，执行以下代码：

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

配置完之后就可以启用主题了，我们打开站点配置文件_config.yml 按照以下修改：

theme: next

验证主题

安装完成之后需要验证，首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。当命令行输出中提示出：

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

主题设定

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

选择 Pisces Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces

设置菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

编辑 主题配置文件，修改以下内容：

设定菜单内容，对应的字段是 menu。菜单内容的设置格式是：item name: link。其中 item name是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

菜单示例配置

menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

若你的站点运行在子目录中，请将链接前缀的 / 去掉

NexT 默认的菜单项有（标注的项表示需要手动创建这个页面）：

键值	设定值	显示文本（简体中文）
home	`home: /`	主页
archives	`archives: /archives`	归档页
categories	`categories: /categories`	分类页
tags	`tags: /tags`	标签页
about	`about: /about`	关于页面
commonweal	`commonweal: /404.html`	公益 404

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项：
```
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料
```
设定菜单项的图标，对应的字段是 menu_icons。此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

菜单图标配置示例
```
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
```
在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字）的情况下，NexT 将会使用作为图标。

请注意键值（如 home）的大小写要严格匹配

侧栏设置

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置，其二是侧栏显示的时机。

设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：
- left - 靠左放置
- right - 靠右放置
目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。
```
sidebar:
  position: left
```
设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：
- post - 默认行为，在文章页面（拥有目录列表）时显示
- always - 在所有页面中都显示
- hide - 在所有页面中都隐藏（可以手动展开）
- remove - 完全移除
```
sidebar:
  display: post
```
已知侧栏在 use motion: false 的情况下不会展示。影响版本5.0.0及更低版本。

设置头像

编辑 主题配置文件，修改字段 avatar，值设置成头像的链接地址。其中，头像的链接地址可以是：

地址	值
完整的互联网 URI	`http://example.com/avatar.png`
站点内的地址	将头像放置主题目录下的 `source/uploads/` （新建 uploads 目录若不存在）配置为：`avatar: /uploads/avatar.png`或者放置在 `source/images/` 目录下配置为：`avatar: /images/avatar.png`

头像设置示例

avatar: http://example.com/avatar.png

设置作者昵称

编辑 站点配置文件，设置 author 为你的昵称。

站点描述

编辑 站点配置文件，设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

添加「标签」页面

新建「标签」页面，并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签，若你的所有文章都未包含标签，此页面将是空的。底下代码是一篇包含标签的文章的例子：

title: 标签测试文章
tags:
  - Testing
  - Another Tag
---

请参阅 Hexo 的分类与标签文档，了解如何为文章添加标签或者分类。

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：

$ cd your-hexo-site
$ hexo new page tags

**注意：**如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

禁用评论示例

title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

添加「分类」页面

新建「分类」页面，并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类，若你的所有文章都未包含分类，此页面将是空的。底下代码是一篇包含分类的文章的例子：

title: 分类测试文章
categories: Testing
---

请参阅 Hexo 的分类与标签文档，了解如何为文章添加标签或者分类。

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories ：

$ cd your-hexo-site
$ hexo new page categories

**注意：**如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

禁用评论示例

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

设置字体

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

为了解决 Google Fonts API 不稳定的问题，NexT 在 5.0.1 中引入此特性。通过此特性，你可以指定所使用的字体库外链地址；与此同时，NexT 开放了 5 个特定范围的字体设定，他们是：

全局字体：定义的字体将在全站范围使用
标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）
文章字体：文章所使用的字体
Logo字体：Logo 所使用的字体
代码字体：代码块所使用的字体

各项所指定的字体将作为首选字体，当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组：

非代码类字体：Fallback 到 "PingFang SC", "Microsoft YaHei", sans-serif
代码类字体： Fallback 到 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

另外，每一项都有一个额外的 external 属性，此属性用来控制是否使用外链字体库。开放此属性方便你设定那些已经安装在系统中的字体，减少不必要的请求（请求大小）。

配置示例

font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。两者配置均在 主题配置文件 中。

链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

配置示例

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

配置示例
```
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo
```

开启打赏功能

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。只需要 主题配置文件 中填入微信和支付宝收款二维码图片地址即可开启该功能。

打赏功能配置示例

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

友情链接

编辑 主题配置文件 添加：

友情链接配置示例

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业 , 建议大家都配置一下这个，看到这个之后我是很难受，所以果断配置！效果如下 http://www.ixirong.com/404.html

使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

站点建立时间

配置示例

订阅微信公众号

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

然后编辑 主题配置文件，如下：

配置示例

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！
  
follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  Wechat: /images/wechat-qcode.jpg || wechat
  #RSS: /atom.xml || rss

补充因为我是用的最新版本，上边的配置是无效的，这个百度了也没找到太好的答案，所以只能自己摸索了，一下给出我的解决方案，首先在把上边的代码插入到主题配置文件中，下一步找到theme/next/layout/_partials/post_followme.swig 文件把下面这写代码拷贝到

{%- if theme.follow_me %} 下面，然后把下面除去最后一行以外的全部注释。

<div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="width: auto; height:250px; max-width: 100%;"/>
    <div>{{ theme.wechat_subscriber.description }}</div>
</div>

淘先锋技术网

Hexo 搭建免费的个人博客

程序猿为什么要搭建个人博客

Hexo 搭建

什么是Hexo

安装准备

关于主题选择

安装Next

验证主题

主题设定

设置菜单

侧栏设置

设置头像

设置作者昵称

站点描述

添加「标签」页面

添加「分类」页面

设置字体

侧边栏社交链接

开启打赏功能

友情链接

腾讯公益404页面

站点建立时间

订阅微信公众号

结尾