基于Hexo和Butterfly创建个人技术博客，(1) 初始化博客站点，您只需要知道Hexo框架的这些内容就足够了
专题概述
本文是个人建站系列的第一篇文章，最终有多少篇文章笔者现在也说不好，因为是一边创建个人站，一边沉淀这个过程。每一步都是实操后再总结文档，文档是以章为单位总结的，每一章都会有几篇文章，在发文前也都经过至少3次的大纲、文案的调整和校对，目的是为了尽量让您能看明白，内容包括但不限于教程、实操、最佳实践等，相对系统化，不过真的非常耗费时间。
- 本地环境要求：node、git，高级用户可选装nvm进行node管理；
- 本文档面向：MacOS用户
专题目标
个人建站其实并不简单，但没啥技术门槛，看下Hexo和theme插件的文档，那么代码层面基本就可以无忧了（主题插件一定要在建站之初选定，因为每个主题的使用方法都不一样，决定了网站的风格。后期更换主题需要修改很多配置），但要真正上线的话您还要了解，比如域名、云主机、备案、流量、安全、网站运营、成本控制等等知识。好在笔者这几年工作下来对上述知识多少还是有经验积累的。
本教程终极目标：
对Hexo和Butterfly主题的技术讲解只是初始目标，除hexo和butterlfy外还会涉及其它很多内容，包括运营和成本控制等知识，这将有助于帮您构建自己的技术体系提供参考思路（不局限于个人建立领域）。So，如果您能掌握本系列教程的知识，至少能丰富您个人的技术图谱，也会重新审视技术发展路线以及对未来的规划，而后者是笔者最希望看到的。因为本专题是以建站这个事来开展的，hexo等框架的存技术使用只是做成这个事的充分但不必要条件。
面向对象
本教程即可以做为教程系统的学习也可以做为字典手册来查询使用。
本教程的目标人群：
首先要说的一点就是知识的积累没有捷径可走，全是无数个不眠夜和时间堆出来的。但个体由于目的的不同，其选择的过程和方法也不一样，所以笔者就目的和教程的用法做下简单总结：
- 如果您只是想
了解此方面的内容，那么建议您只需要详读建站流程相关的章节了解下建站的大至内容，然后再按兴趣选读；- 如果您想系统
掌握这方面的技能，但不做任何与商业化相关的事，建议您每个章节都实操下但不必每个章节都一点不落的操作，一是比较耗时间，二是如果没有明确的目的性很难有所收获，因为本教程很多部分是围绕如何后期商业化运营展开的；- 如果您想
打造个人技术品牌甚至实现商业化运营，那么我建议您按章节顺序一字不落的实操下。但我还是要先泼盆冷水，要达到这一目的一点也不容易甚至可能会失败，单时间上对于普通人可能需要1-2年的时间甚至更长。建站只是其中一步，本系列教程虽不能带给您全部内容，但一定可以带给您更多的思考以及选择。但庆幸的是我个人认为这是值得的，因为这件事一旦成功其带来的长尾效益和衍生空间是您无法想象的，技术积累和金钱收益只是其中一部分。
本章目标：
掌握hexo的安装、命令使用，并能在本地成功运行网站；也可参考基于hexo和aws云搭建个人博客，0基础0费用，有点豪横（2W字超详细图文教程）一文中描述发布博客到github或云主机上。
一、搭建博客站点
暂定我们的博客的源码所在的根目录的文件夹名为blog，这个文件夹不需要手工创建，在hexo init则初始化时会自动生成，如下；
$npm install hexo-cli -g
$hexo init blog # 创建博客源码目录
$cd blog
$npm install # npm install [email protected] 安装指定的版本
#安装butterfly主题，推荐下载源码包。
$npm install hexo-theme-butterfly
$npm install hexo-renderer-pug hexo-renderer-stylus --save
修改_config.yml文件中的theme属性值为bufferfly
在_config.yml文件所在的目录下创建一个名为_config.buffterlfy.yml的主题文件
$ npm install hexo-server --save #选装单独的服务器模块
#服务器启动
$hexo server --debug #--debug参数也可以不写
bufferfly建议用源码安装：
1、下载源码：github bufferfly
2、拷贝源码包中 buffery主题一节中代码示例中的文件 到/themes/bufferfly/下面。
1、hexo源码
2、hexo landspace theme源码 ，安装方式同butterfly。
npm view hexo //查看信息
npm view hexo versions //查看所有版本
npm info hexo //查看依赖信息
project说明
上述操作完成后，我们的项目代码大概如下图所示：
.
├── _config.butterfly.yml
├── _config.yml
├── package.json
├── package-lock.json #锁定安装时的包的版本号
├── scaffolds #Hexo的模板是指在新建的文章文件中默认填充的内容。
├── source
| ├── _drafts
| └── _posts
└── themes
└── bufferfly
- package-lock.json：文件锁定版本号，当执行npm install的时候，node不会自动更新package.json文件中的模块，方便多人开发环境的统一；
- source：资源文件夹，于用存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
theme配置
_config.butterfly.yml是主题配置文件，和主配置文件_config.yml都放在根目录下，主题配置文件的内容优先级会高于主配置文件，如果是下载的butterfly主题源码，那么目录结构如下，这些内容是需要拷贝到/themes/butterfly/文件夹下的：
.
├── _config.yml
├── package.json
├── plugins.yml
├── languages
├── layout
├── scripts
└── source
/themes/bufferfly/_config.yml文件建议保留，做为参考文档，如不需要建议删除掉;
scaffolds模版
Hexo 的模板是指在新建的文章文件中默认填充的内容，每创建一个页面都要指定其使用的layout，默认值是post，以下是各页面相对应的模板名称。
| 模板 | 用途 | 回退 |
|---|---|---|
index |
首页 | |
post |
文章(发博客文章时用到) | index |
page |
分页 | index |
archive |
归档 | index |
category |
分类归档 | archive |
tag |
标签归档 | archive |
layout自定义布局
如果页面结构类似，例如两个模板都有页首（Header）和页脚（Footer），可考虑通过「布局」让两个模板共享相同的结构。您可在 front-matter 指定其他布局，或是设为 false 来关闭布局功能。
全局布局的写法
//在layout文件下新建一个名为index.ejs的文件，内容如下：
index
// 然后再创建一个名为layout.ejs的文件，内容如下：
DOCTYPE html>
<html>
<body><%- body %>body>
html>
// 最终会生成
DOCTYPE html>
<html>
<body>indexbody>
html>
// 局部模版的写法（Partial），比如partial/header.ejs
<h1 id="logo"><%= config.title %>h1>
//index.ejs
<%- partial('partial/header') %>
<div id="content">Home pagediv>
//生成
<h1 id="logo">My Siteh1>
<div id="content">Home pagediv>
// 局部变量的定义，比如partial/header.ejs
<h1 id="logo"><%= title %>h1>
//index.ejs
<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home pagediv>
//生成
<h1 id="logo">Hello Worldh1>
<div id="content">Home pagediv>
//优化：新增的局部缓存（Fragment Caching） 功能，，它可用于页首、页脚、侧边栏等文件不常变动的位置
<%- fragment_cache('header', function(){
return '<header>header>';
});
//如果您使用局部模板的话
<%- partial('header', {}, {cache: true});
二、Hexo常用插件
您可以使用 Hexo 提供的官方工具插件来加速开发，如果功能不太复杂建议编写.js脚本，并把其放到 scripts 文件夹中，在启动时就会自动载入。
- hexo-fs：文件 IO
- hexo-util：工具包
- hexo-i18n：本地化（i18n）
- hexo-pagination：分页
三、Hexo命令详解
这些命令在开发时会经常使用，需要完全掌握。
全局参数
$hexo server --debug #参数举例
--config Specify config file instead of using _config.yml
--debug Display all verbose messages in the terminal
--draft Display draft posts, source/_drafts
--safe Disable all plugins and scripts
--silent Hide output on console
命令列表
clean Remove generated files and cache.
config Get or set configurations.
deploy Deploy your website.
generate Generate static files.
help Get help on a command.
init Create a new Hexo folder.
list List the information of the site
migrate Migrate your site from other system to Hexo.
new Create a new post.
publish Moves a draft post from _drafts to _posts folder.
render Render files with renderer plugins.
server Start the server.
version Display version information.
命令详解
hexo init，新建一个网站
$ hexo init [folder]
hexo new，新建一篇文章
$ hexo new [layout] <title>
如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来，示例如下：
#创建文件：/source/tags/index.md
$ hexo new page tags
#创建文件： /source/_posts/post-title-with-whitespace.md
$ hexo new "post title with whitespace"
#创建文件： /source/about/me.md
$ hexo new page --path about/me "About me"
#创建文件： source/_posts/about/me.md
$ hexo new page --path about/me
hexo publish, 发布草稿
这个命令不太常用，在用hexo new 创建文章时，如果layout指定为draft则会认为是创建一篇了草稿，这个命令就是把创建好的草稿移到post文件夹中，这里的publish是指文章的publish，而不是网站的deploy。
$ hexo publish [layout] <filename>
hexo g , 生成网站
网站部署的其实是.html等静态文件，此命令就是用于生成这些待部署的静态文件的，本地开发时直接用hexo server命令即可，不需要生成静态文件。
$ hexo g
$ hexo g -w #动态生成文件，改一个生成一个
# 使用 custom.yml 和 custom2.json，其中 custom2.json 优先级更高
$ hexo g --config custom.yml,custom2.json,custom3.yml
hexo server, 启动服务器
# 可选参数：-p 重设端口， -l 启动日记记录，使用覆盖记录格式
$ hexo server
$ hexo server -p 5000
# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml
hexo deploy，部署网站
需要配置_config.xml中的deploy参数，此命令才会生效。发布配置可查看，其实笔者并不建议用此命令来部署网站，做为练习使用还可以。即使是个人站点后期维护时此命令不但不会提效还会带来很多麻烦
$ hexo d
hexo render，渲染文件（不太常用）
$ hexo render <file1> [file2] ...
hexo clean，清除缓存文件
这条命令主要会清除缓存文件 (db.json) 和已生成的静态文件 (public)，如果发现修改源码后UI样式未更新，可用此命令清除下缓存。
$ hexo clean
hexo list, 列出网站资料
types有以下类型可选page, post, route, tag, category
$ hexo list <type>
四、博客站点发布
github
先安装插件$ npm install hexo-deployer-git --save，然后执行以下命令：
- 建立名为 <你的 GitHub 用户名>.github.io 的储存库;
- 在 _config.yml 中添加以下配置
deploy:
type: git
repo: https://github.com/>/> # example, https://github.com/hexojs/hexojs.github.io
branch: gh-pages //分支名称
message: [message] //自定义提交信息
######或
deploy:
type: git
repo: >
branch: [branch]
token: ''
message: [message]
name: [git user]
email: [git email]
extend_dirs: [extend directory]
ignore_hidden: false # default is true
ignore_pattern: regexp # whatever file that matches the regexp will be ignored when deploying
#######也可以配置多个type一次发布到多个网站上
deploy:
- type: git
repo:
- type: heroku
repo:
- 执行
hexo clean && hexo deploy。 - 浏览
.github.io 检查你的网站能否运作。
rsync
rsync是linux系统下的数据镜像备份工具。使用快速增量备份工具Remote Sync可以远程同步，支持本地复制，或者与其他SSH、rsync主机同步。
- 安装插件：
$ npm install hexo-deployer-rsync --save - 修改配置
deploy:
type: rsync
host: >
user: >
root: >
port: [port]
delete: [true|false] 删除远程主机上的旧文件，默认值true
verbose: [true|false] 显示调试信息，默认值true
ignore_errors: [true|false]，默认值false
sftp
- 安装插件：
$ npm install hexo-deployer-sftp --save - 修改配置
deploy:
type: sftp
host: >
user: >
pass: >
remotePath: [remote path]
port: [port]
privateKey: [path/to/privateKey] ssh私钥的目录地址
passphrase: [passphrase] （可省略）ssh私钥的密码短语
agent: [path/to/agent/socket]，ssh套接字的目录地址， 默认值 $SSH_AUTH_SOCK
五、I18N国际化（可选）
先在 _config.yml 中调整 language 设定，这代表的是预设语言，您也可设定多个语言来调整预设语言的顺位。
language: zh-tw
language:
- zh-tw
- en
语言文件编写
语言文件可以使用 YAML 或 JSON 编写，放在主题文件夹中的 languages 文件夹下，可以在语言文件中使用 printf 格式。
语言文件使用
在模板中，通过 __ 或 _p 辅助函数，即可取得翻译后的字符串，前者用于一般使用；而后者用于复数字符串。例如：
index:
title: Home
add: Add
video:
zero: No videos
one: One video
other: %d videos
<%= __('index.title') %>
// Home
<%= _p('index.video', 3) %>
// 3 videos
语言文件存放路径
可在 front-matter 中指定该页面的语言，也可在 _config.yml 中修改 i18n_dir 设定，让 Hexo 自动侦测。
i18n_dir: :lang
i18n_dir 的预设值是 :lang，也就是说 Hexo 会捕获网址中的第一段以检测语言，举例来说：
/index.html => en
/archives/index.html => en
/zh-tw/index.html => zh-tw
捕获到的字符串唯有在语言文件存在的情况下，才会被当作是语言，因此例二 /archives/index.html 中的 archives 就不被当成是语言。