hexo

hexo介绍:

Hexo 是一个快速、简洁且高效的博客框架
Hexo官网文档:https://hexo.io/zh-cn/docs/configuration

1、安装

  1. 前提先安装node.js、Git
  2. 利用npm安装hexo :$ npm install -g hexo-cli

2、建站

  1. 安装hexo之后,执行以下命令,hexo将会在指定的文件夹中新建所需的文件:
$ hexo init   
$ cd   
$ npm install

新建完成后,指定文件夹的目录如下:


image.png

3、配置

修改配置Config.yml参数:

  1. 网站:
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述(主要用于seo
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC
  1. 网址:
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
  1. 目录:
参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
  1. 文章:
参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout` 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置
  1. 分类、标签
参数 描述 默认值*
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名
  1. 日期、时间格式:
参数 描述 默认值
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 H:mm:ss
  1. 分页:
参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page
  1. 扩展:
参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

4、指令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init#初始化博客

命令简写:

// 新建文章 
hexo new "我的博客" 
hexo n "我的博客" // 简写
// 生成静态文件 
hexo generate
hexo g // 简写
// 启动服务预览
hexo server 
hexo s // 简写
// 部署
hexo deploy
hexo d // 简写

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

5、Front-matter

Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

---
title: hello world
date: 2020/3/12 10:10:19
---

在json也可以编写front-matter,只需要将----改为;;;就即可:

"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

参数:

参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址

注意:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。例子:

categories:
- Diary
tags:
- PS3
- Games
categories:
  - Diary
  - Life

Categories有层级之分,life成为diary的子分类,而不是同级

6、标签插件

  1. 引用块:在文章中引入引言,可包含作者,来源和标题。别号:quote;使用时去掉中括号[],下同。
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
  1. 代码块,在文章中插入代码。别号:code
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}
  1. 反引号代码块,另一种形式的代码块,用三个反引号来包裹:
    ``` [language] [title] [url] [link text] code snippet ```
  2. 在文章中插入Pull Quote,class可为left或right。
{% pullquote [class] %}
content
{% endpullquote %}
  1. 在文章嵌入JSField
    {% jsfiddle shorttag [tabs] [skin] [width] [height] %}
  2. 在文章中嵌入Gist
    {% gist gist_id [filename] %}
  3. 在文章中插入iframe
    {% iframe url [width] [height] %}
  4. 在文章中插入指定大小的图片image
    {% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
  5. 在文章中插入链接,并自动给外部连接添加target=”_blank”属性;Link
    {% link text url [external] [title] %}
  6. include code插入source文件内的代码文件
    {% include_code [title] [lang:language] path/to/file %}
  7. 在文章中插入youtube视频
    {% youtube video_id %}
  8. 在文章中插入vimeo视频
    {% vimeo video_id %}
  9. 引用其他文章的链接
{% post_path slug %}
{% post_link slug [title] %}
  1. 引用文章资源
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
  1. 如果想要在文章中插入swing标签,可以尝试使用raw标签,以免发生解析异常
`{% raw %}
content
{% endraw %}

7、资源文件夹

资源asset代表source文件中除文章以外的所有文件。

  1. 文件资源文件夹
    Config.yml文件中的post-asset-folder选项设为true打开之后,则每一次新建文章时都会自动创建一个与文章名字相同的文件夹,可将所有与文章有关的资源放在此文件夹中,之后可通过相对路径来引用。
  2. 相对路径引用的标签插件
    通过常规的markdown语法和相对路径引用图片和其他资源可能会导致它们在存档或者主页显示不正确。
    [图片上传失败...(image-914568-1585130729432)]此种方式图片不会出现在首页。
    例子:通过这种方式图片将会同时出现在文章和主页以及归档页中
    {% asset_img example.jpg This is an example image %}

8、数据文件

当需要在主题中使用某些资料,而这些资料不在文章内,并且需要重复使用时可以使用hexo3.0新增的数据文件功能。此功能会载入source/_data内的yml或json文件,如此便能在网站中复用这些文件。

9、服务器

  1. Hexo-server
    Hexo3.0把服务器独立成了个别模块,必须先安装hexo-server才能使用。
    $ npm install hexo-server --save
    安装完成后输入以下命令以启动服务器,网站会在http://localhost:4000下启动。在服务器启动期间,hexo会监视文件变动并自动更新,无需重启服务器。
    $ hexo server
    如果想要修改端口,或是在执行时遇到看EADDRINUSE错误,可以在执行时使用-p选项指定其他端口,如下:
    $ hexo server -p 5000
  2. 静态模式
    在静态模式下,服务器只处理public文件夹内的文件,而不会处理文件变动,在执行时,应该先执行hexo generate,此模式通常用于生产环境(production mode)下:
    $ hexo server -s
  3. 自定义IP
    服务器默认运行在0.0.0.0,您可以覆盖默认的IP设置。指定这个参数后,您就只能通过该IP才能访问站点。如下:
    $ hexo server -i 192.168.1.1
  4. pow是一个Mac系统上的零配置Rack服务器,它也可以作为一个简单易用的静态文件服务器来使用。
    安装:$ curl get.pow.cx | sh
    设置:在~/.pow文件夹建立链接(symlink)。
    $ cd ~/.pow
    $ ln -s /path/to/myapp
    网站将会在http://myapp.dev下运行,网址根据链接而定

10、生成文件

使用hexo生成静态文件快速而且简单:
$ hexo generate

  1. 监视文件变动
    Hexo能够监视文件变动并立即重新生成静态文件,在生成时会比对文件SHA1 checksum,只有变动文件才会写入。
    $ hexo generate --watch
    2、完成后部署
    $ hexo g -d
    $ hexo d -g

11、部署

  1. Hexo提供了快速方便的一键部署功能,只需要一条命令就能将网站部署到服务器上:
    $ hexo deploy
    在开始之前,必须先在_config.yml中修改参数,一个正确的部署配置中至少要有type餐数,例如:可同时使用多个deployer,hexo会按顺序执行。
deploy:
- type: git
 repo:
- type: heroku
 repo:
  1. Git
    安装hexo-deployer-git
    $ npm install hexo-deployer-git --save
    修改参数:
deploy:
 type: git
 repo:  #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
 branch: [branch] #published
 message: [message]

repo:库(Repository)地址;
branch:分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测;
message:自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

  1. heroku
    安装hexo-deployer-heroku:
    $ npm install hexo-deployer-heroku --save
    修改配置:
deploy:
 type: heroku
 repo: 
 message: [message]
repo Heroku 库(Repository)地址
message 自定提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
  1. Netlify
    Netlify是一个提供网络托管的综合平台。它集持续集成(CI)CDN自定义域名HTTPS持续部署(CD)等诸多功能于一身。
    通过以下两种方式将hexo站点部署到netlify:
    1、使用Netlify提供的网页端用户界面,前往新建一个网站页面,选择需要关联的Github/BitBucket/Gitlab库,然后遵循网站提示。
    2、使用Netlify提供的命令客户端工具Node based CLI管理和部署你的站点。
    此外还可以在项目的readme中增加一个部署至Netlify按钮,这样其他用户在fork或clone了你的项目之后可以方便快捷的一键部署。
  2. Rsync
    安装hexo-deployer-rsync
    $ npm install hexo-deployer-rsync --save
    修改配置
deploy:
 type: rsync
 host: 
 user: 
 root: 
 port: [port]
 delete: [true|false]
 verbose: [true|false]
 ignore_errors: [true|false]

host:远程主机的地址
user:使用者名称
root:远程主机的根目录
port:端口,默认值:22
delete:删除远程主机上的旧文件,默认值:true
verbose:显示调试信息,默认值:true
ignore_errors:忽略错误false
rsync部署模块的工作方式:需要在远程的主机上为hexo站点建立一个用户,并允许其通过SSH登陆。

  1. openShift
    安装hexo-deployer-openshift
    $ npm install hexo-deployer-openshift --save
    修改配置
deploy:
 type: openshift
 repo: 
 message: [message]
repo OpenShift 库(Repository)地址
message 自定提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
  1. FTPSync
    安装hexo-deployer-ftpsync
    $ npm install hexo-deployer-ftpsync --save
    修改配置
deploy:
 type: ftpsync
 host: 
 user: 
 pass: 
 remote: [remote]
 port: [port]
 ignore: [ignore]
 connections: [connections]
 verbose: [true|false]
参数 描述 默认值
host 远程主机的地址
user 使用者名称
pass 密码
remote 远程主机的根目录 /
port 端口 21
ignore 忽略的文件或目录
connections 使用的连接数 1
verbose 显示调试信息 false

FTP部署可能出现的问题:需要预先通过其他方式将所有文件上传到远程主机中。否则初次使用ftpsync插件就可能出现报错。另外,由于ftp协议的特征,它每传送一个文件就需要一次握手,相对速度较慢。

  1. SFTP
    安装hexo-deployer-sftp
    $ npm install hexo-deployer-sftp --save
    修改配置:
deploy:
 type: sftp
 host: 
 user: 
 pass: 
 remotePath: [remote path]
 port: [port]
 privateKey: [path/to/privateKey]
 passphrase: [passphrase]
 agent: [path/to/agent/socket]
参数 描述 默认值
host 远程主机的地址
user 使用者名称
pass 密码
remotePath 远程主机的根目录 /
port 端口 22
privateKey ssh私钥的目录地址
passphrase (可省略)ssh私钥的密码短语
agent ssh套接字的目录地址 $SSH_AUTH_SOCK

你可能感兴趣的:(hexo)