基于Hexo和Butterfly创建个人技术博客，(1) 初始化博客站点，您只需要知道Hexo框架的这些内容就足够了

最新推荐文章于 2024-07-26 09:00:00 发布

korgs

最新推荐文章于 2024-07-26 09:00:00 发布

阅读量666

点赞数 3

分类专栏： # 个人博客站点开发文章标签： npm 前端 hexo 技术博客 butterfly

本文链接：https://blog.csdn.net/liudonglovehemin/article/details/131085837

版权

个人博客站点开发专栏收录该内容

17 篇文章 15 订阅

订阅专栏

专题概述

本文是个人建站系列的第一篇文章，最终有多少篇文章笔者现在也说不好，因为是一边创建个人站，一边沉淀这个过程。每一步都是实操后再总结文档，文档是以章为单位总结的，每一章都会有几篇文章，在发文前也都经过至少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的文件，内容如下：
<!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，然后执行以下命令：

建立名为 <你的 GitHub 用户名>.github.io 的储存库;
在 _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:

执行 hexo clean && hexo deploy 。
浏览 <GitHub 用户名>.github.io 检查你的网站能否运作。

rsync

rsync是linux系统下的数据镜像备份工具。使用快速增量备份工具Remote Sync可以远程同步，支持本地复制，或者与其他SSH、rsync主机同步。

安装插件：$ npm install hexo-deployer-rsync --save
修改配置

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

安装插件：$ npm install hexo-deployer-sftp --save
修改配置

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-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 就不被当成是语言。

korgs

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Hexo和Butterfly创建个人技术博客，(1) 初始化博客站点，您只需要知道Hexo框架的这些内容就足够了

基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入，详细记录了个人建站全过程。系列专题-博客站点搭建以及Hexo安装和命令详解
复制链接

扫一扫