临夜写稿，将一直规划很久迟迟没有动笔的这一系列落实，也为今日清晨就要举办的前端社区活动做干货分享准备。我的这个学习模型，每当有一个技术主题出现，常常伴随着以下几个

线上社区宣传主题
博客写作
加班加点的制作相关 ppt
微信订阅号的文章推送配合并群发宣传

每一次的技术分享都走遍了所有流程，回首看来，着实挺累，但也还算值得。

这一系列便来讲讲 Github Pages+ Hexo 搭建专属静态博客站点。

我的博客模板

1 博客与静态博客？

正如我之前的这篇文章《如何写一篇优质的博客》画图所示，网络博客在短短的几十年间得到了巨大的普及，传递着每一个故事。博客有一个最忠实的群体，那就是发明他们的人：程序员，或者叫做极客、黑客和软件工程师更能生动的形容他们对新技术的激情。

写博客的好处是我们用博客表达自己、升华自己。在我们学会写博客的同时还能提升我们的演讲、辩论能力。写博客的前期准备便需要我们能够对自己、对博客主题进行明确的定位以及对博客叙述的把控，达到最好的效果。

Weblog = Web + Log;

那静态博客是什么？通俗来讲，静态博客站点便是没有数据库没有后台交互的纯前台博客站点，哪怕是评论系统也是由第三方提供数据支持。静态博客站点常常作为 HTML 页面出现，可用博客制作器制作，Hexo 便是其中之一。相比有数据库有后台交互的动态博客站点来说，静态博客站点有如下好处：

省钱。静态网站占用的系统资源少。如果挂到github pages上，只要注册一个域名就可以了。

速度快。不经过php解析器，不用数据库，速度自然比动态网站快
安全。由于静态网站的简洁，免疫很多web攻击方式。
服务器端配置简单。只需要一个web server（apache、nginx）。
非常容易维护。

Git、Github 和 Github Pages？

Git 是一个版本控制系统，可以用来随着时间变化跟踪一个项目中文件的改变。Git 代表性的功能就是记录文件有什么改变、谁做出的改、改变者对这次改变做出了怎样的阐述和说明等。Git 主要被各类软件开发项目所使用。

如下图所示，每一个文件代表着一次“保存”，没有了 Git，你就不能随意退回到曾经的某次修改之中。

有了 Git，改变将是多方向的，每一次修改都会得到保存，每一个保存都可以引发新的时间线，版本回退、分支管理、协作开发等功能都有了发展条件。

--everything-is-local

在基于 Git 的众多管理系统中， Github 是最突出的一个。Github 上有成千上万激动人心的卓越项目，我们可以轻松的下载项目源代码或
克隆这个项目到自己的仓库并进行自己的开发。目前最火的开源项目便是 freeCodeCamp，一个 JS 全栈在线学习平台。

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持自动利用第三方静态站点生成工具生成站点，也同样支持纯 HTML 文档，将你的静态站点托管在 Github Pages 上是一个不错的选择。

Hexo？

有很多静态站点的主题可供我们选择，根据这些主题所用的开发语言可以分为如下几类，可见我这里选择 Hexo 的原因在于 Hexo 基于 Node.js ，与我的前端技术栈相匹配且有一定的用户量，主题仓库里会得到很多及时的更新。

Ruby：Jekyll，Octopress、Middleman
Node.js：Hexo、Metalsmith、Wintersmith
GO：Hugo
Python：Pelican

开始实战

搭建 Node.js 开发环境

官网下载：https://nodejs.org/zh-cn/

Node.js®是一个基于Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。Hexo 博客制作器需要 node 和 npm 的环境。

安装 Git 客户端

官网下载：https://git-scm.com/

一般来说，Linux 和 MaxOS 都会默认集成 Git 的功能，进行版本控制。而在 Windows 下，常常需要下载 Git 客户端 -- Git Bash 来进行命令行操作。

安装过程中一路默认即可。

解决 git bash 中 node、npm 命令不存在的问题

安装完 Node.js 和 Git，发现在 Git Bash 中输入 node -v 和 npm -v 提示命令不存在的报错信息，是我们在 Windows 下没有链接环境变量的缘故。打开环境变量的设置，在 PATH 变量后加入 Node 安装的目录即可。

安装初始化 Hexo

现在有了 Node 的 js 环境和 Git Bash 提供的命令行环境，开始着手安装 Hexo。

npm install -g hexo

以上命令会用 npm 的 node 包管理器将 hexo 安装到本地，-g 参数表明安装目录为本地的全局 npm 包中，而不是某个项目的 npm 包中。这时我们就可以使用 hexo 命令了。

新建一个文件夹，并在这个文件夹中初始化 Hexo 站点。

mkdir test
cd test
hexo init

初始化过程较为缓慢，hexo 将会把核心站点仓库从远程服务器拉到本地，并默认配置好 landscape 主题，这个主题可以根据自己的爱好来去官网主题仓库挑选。hexo init 命令会在当前文件夹下生成如下目录：

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

有了 Hexo 的本地博客站点，在可以进行快速的博客发布前，我们还得配置当前目录下的 _config.yml 文件，具体配置及简介如下。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site # 站点信息
title: 韩亦乐の博客集 # 标题
subtitle: 做最好的自己，影响该影响的人 # 副标题
description: 韩亦乐の博客集 # 站点描述，给搜索引擎看的
author: 韩亦乐 # 作者
email: [email protected] # 电子邮箱
language: zh-cn # 语言
timezone:

# URL # 链接格式
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://hylerrix.github.io/Blog # 网址
root: /Blog/ # 根目录
permalink: :year/:month/:day/:title/ # 文章的链接格式
permalink_defaults:

# Directory # 目录
source_dir: source # 源文件目录
public_dir: public # 生成的网页文件目录
tag_dir: tags # 标签目录
archive_dir: archives # 存档目录
category_dir: categories # 分类目录
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # 新文章标题
default_layout: post # 默认的模板，包括 post、page、photo、draft
titlecase: false # 标题转换成大写
external_link: false # 在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: # 语法高亮
  enable: true # 是否启用
  line_number: true # 显示行号
  auto_detect: false
  tab_replace:

# Category & Tag # 分类和标签
default_category: uncategorized # 默认分类
category_map:
tag_map:

# Archives
# 2: 开启分页
# 1: 禁用分页
# 0: 全部禁用
archive: 2
category: 2
tag: 2

# Server # 本地服务器
# port: 4000 # 端口号
# server_ip: localhost # IP 地址
# logger: false
# logger_format: dev

# Date / Time format # 日期时间格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination # 分页
## Set per_page to 0 to disable pagination
per_page: 10 # 每页文章数，设置成 0 禁用分页
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: freemind.386 # 主题
plugins: # 插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:hylerrix/Blog.git
  branch: gh-pages

配置好

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

hexo init Blog
cd Blog
npm install hexo-server --save
npm install hexo-deployer-git --save
git clone [email protected]:blackshow/hexo-theme-freemind.386.git themes/freemind.386
rm -rf themes/landscape
vim _config.yml

选择 Hexo 主题

https://github.com/litten/hexo-theme-yilia

https://github.com/hexojs/hexo-theme-landscape
https://github.com/wzpan/hexo-theme-freemind
https://github.com/blackshow/hexo-theme-freemind.386
https://github.com/giscafer/hexo-theme-cafe

Hexo 拓展

插件之向百度主动提交链接
Hexo 第三方评论系统

Hexo插件之百度主动提交链接

Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的个人主页中，有我的订阅号二维码和 Github 主页地址；我的知乎主页中也会坚持产出，欢迎关注。

本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。

Github + Hexo 免费搭建静态博客站点#01