临夜写稿，将一直规划很久迟迟没有动笔的这一系列落实，也为今日清晨就要举办的前端社区活动做干货分享准备。我的这个学习模型，每当有一个技术主题出现，常常伴随着以下几个
- 线上社区宣传主题
- 博客写作
- 加班加点的制作相关 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 开发环境
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: hylerrix@gmail.com # 电子邮箱
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: git@github.com: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 git@github.com:blackshow/hexo-theme-freemind.386.git themes/freemind.386
rm -rf themes/landscape
vim _config.yml
选择 Hexo 主题
- 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 第三方评论系统
- Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的简书个人主页中，有我的订阅号二维码和 Github 主页地址；我的知乎主页 中也会坚持产出，欢迎关注。
- 本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。
网友评论