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

1次阅读

共计 7552 个字符，预计需要花费 19 分钟才能阅读完成。

专题概述

本文是集体建站系列的第一篇文章，最终有多少篇文章笔者当初也说不好，因为是一边创立集体站，一边积淀这个过程。每一步都是实操后再总结文档，文档是以章为单位总结的，每一章都会有几篇文章，在发文前也都通过至多 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-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 就不被当成是语言。

正文完
hexo
发表至： hexo
2023-06-16
 0
关于hexo:Hexo-静态博客指南建站教程上
利用-Hexo-Github-Pages-搭建博客
hexo插件向谷歌必应百度提交链接以快速收录
关于hexo:CodingHexo博客搭建教程

站内搜索

-「」