基于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 hexo@7.0.0-rc1  安装指定的版本

#安装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的文件，内容如下：


<%- body %>


// 最终会生成


index

// 局部模版的写法（Partial），比如partial/header.ejs
<%= config.title %>

//index.ejs
<%- partial('partial/header') %>
Home page

//生成
My Site
Home page

// 局部变量的定义，比如partial/header.ejs
<%= title %>

//index.ejs
<%- partial('partial/header', {title: 'Hello World'}) %>
Home page

//生成
Hello World
Home page

//优化：新增的局部缓存（Fragment Caching） 功能，，它可用于页首、页脚、侧边栏等文件不常变动的位置
<%- fragment_cache('header', function(){
  return '
';
});

//如果您使用局部模板的话
<%- 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]