专题概述

本文是集体建站系列的第一篇文章，最终有多少篇文章笔者当初也说不好，因为是一边创立集体站，一边积淀这个过程。每一步都是实操后再总结文档，文档是以章为单位总结的，每一章都会有几篇文章，在发文前也都通过至多3次的纲要、文案的调整和校对，目标是为了尽量让您能看明确，内容包含但不限于教程、实操、最佳实际等，绝对系统化，不过真的十分消耗工夫。

  • 本地环境要求：node、git，高级用户可选装nvm进行node治理；
  • 本文档面向：MacOS用户

专题指标

集体建站其实并不简略，但没啥技术门槛，看下Hexo和theme插件的文档，那么代码层面根本就能够无忧了（主题插件肯定要在建站之初选定，因为每个主题的应用办法都不一样，决定了网站的格调。前期更换主题须要批改很多配置），但要真正上线的话您还要理解，比方域名、云主机、备案、流量、平安、网站经营、老本管制等等常识。好在笔者这几年工作下来对上述常识多少还是有教训积攒的。

<font color=green size=4>本教程终极目标：</font>
对Hexo和Butterfly主题的技术解说只是初始指标，除hexo和butterlfy外还会波及其它很多内容，包含经营和老本管制等常识，这将有助于帮您构建本人的技术体系提供参考思路（不局限于集体建设畛域）。So，如果您能把握本系列教程的常识，至多能丰盛您集体的技术图谱，也会从新扫视技术倒退路线以及对将来的布局，而后者是笔者最心愿看到的。因为本专题是以建站这个事来发展的，hexo等框架的存技术应用只是做成这个事的充沛但不必要条件。

面向对象

本教程即能够做为教程零碎的学习也能够做为字典手册来查问应用。

<font color=green size=4>本教程的指标人群：</font>
首先要说的一点就是常识的积攒没有捷径可走，全是无数个不眠夜和工夫堆进去的。但个体因为目标的不同，其抉择的过程和办法也不一样，所以笔者就目标和教程的用法做下简略总结：

  • 如果您只是想理解此方面的内容，那么建议您只须要详读建站流程相干的章节理解下建站的大至内容，而后再按趣味选读；
  • 如果您想零碎把握这方面的技能，但不做任何与商业化相干的事，建议您每个章节都实操下但不用每个章节都一点不落的操作，一是比拟耗时间，二是如果没有明确的目的性很难有所播种，因为本教程很多局部是围绕如何前期商业化经营开展的；
  • 如果您想打造集体技术品牌甚至实现商业化经营，那么我建议您按章节程序一字不落的实操下。但我还是要先泼盆冷水，要达到这一目标一点也不容易甚至可能会失败，单工夫上对于普通人可能须要1-2年的工夫甚至更长。建站只是其中一步，本系列教程虽不能带给您全部内容，但肯定能够带给您更多的思考以及抉择。但庆幸的是我集体认为这是值得的，因为这件事一旦胜利其带来的长尾效益和衍生空间是您无奈设想的，技术积攒和金钱收益只是其中一部分。
<font color=green size=4>本章指标：</font>
把握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的文件，内容如下：<!DOCTYPE html><html><body><%- body %></body></html>// 最终会生成<!DOCTYPE html><html><body>index</body></html>
// 部分模版的写法（Partial），比方partial/header.ejs<h1 id="logo"><%= config.title %></h1>//index.ejs<%- partial('partial/header') %><div id="content">Home page</div>//生成<h1 id="logo">My Site</h1><div id="content">Home page</div>
// 局部变量的定义，比方partial/header.ejs<h1 id="logo"><%= title %></h1>//index.ejs<%- partial('partial/header', {title: 'Hello World'}) %><div id="content">Home page</div>//生成<h1 id="logo">Hello World</h1><div id="content">Home page</div>
//优化：新增的部分缓存（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 ，而后执行以下命令：

  1. 建设名为 <你的 GitHub 用户名>.github.io 的储存库;
  2. 在 _config.yml 中增加以下配置
deploy:  type: git  repo: https://github.com/<username>/<project> # example, https://github.com/hexojs/hexojs.github.io  branch: gh-pages  //分支名称  message: [message] //自定义提交信息######或 deploy:  type: git  repo: <repository url>  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:
  1. 执行 hexo clean && hexo deploy 。
  2. 浏览 <GitHub 用户名>.github.io 查看你的网站是否运作。

rsync

rsync是linux零碎下的数据镜像备份工具。应用疾速增量备份工具Remote Sync能够近程同步，反对本地复制，或者与其余SSH、rsync主机同步。

  1. 装置插件：$ npm install hexo-deployer-rsync --save
  2. 批改配置
deploy:  type: rsync  host: <host>  user: <user>  root: <root>  port: [port]  delete: [true|false]  删除近程主机上的旧文件，默认值true  verbose: [true|false] 显示调试信息，默认值true  ignore_errors: [true|false]，默认值false

sftp

  1. 装置插件：$ npm install hexo-deployer-sftp --save

  2. 批改配置

    deploy:  type: sftp  host: <host>  user: <user>  pass: <password>  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-twlanguage: - 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 就不被当成是语言。