麦田的博客

Hexo使用教程和经验

2019-09-01


Hexo是排名最靠前的静态博客生成器,安装简单,主题多。和Hugo、Jekyll都属于热门的静态博客生成器。本文是Hexo的使用经验和使用教程:

Hexo生成的目录结构及作用

|-- node_modules #存放安装的Hexo扩展
|-- public #生成静态文件存放的文件夹,存放网站成果
|-- scaffolds #骨架,不用理会
|-- source #来源的意思,网站内容.md文件所在文件夹
   |-- _drafts
   |-- _posts
|-- themes #主题目录
|-- _config.yml #重要,全局配置文件
|-- package.json #hexo框架的参数

source

新建的文章保存在这个目录下的_posts文件夹,默认有个hello-world.md的文件,文章就在这个文件中编辑。

config.yml

全局配置文件,网站信息都在这里配置:网站名称,副标题,描述,作者,语言,主题,部署等等参数。这个文件,下面会详细介绍!

注意:必须使用notepad等软件打开编辑,不能使用记事本编辑。

配置config.yml文件

# Hexo Configuration
## Docs: http://zespia.tw/hexo/docs/configuration.html
## Source: https://github.com/tommy351/hexo/

#Site    #站点信息配置
title: 浪花一朵朵        #网站标题
subtitle: 技术是海,深不见底;生活是洋,广不着边;而我如浪花,清澈透明并且舞动双手,仰望天空。        #网站副标题
description: 浪花一朵朵        #网站描述,网站上不会显示出来,但搜索引擎会用到改字段
author: 员员        #作者
email: syxiaqj@gmail.com    #联系邮箱
language: zh-CN        #语言,简体中文当然用zh-CN

# URL    #部署到公网,信息配置,后面介绍如何将网站部署到git上时介绍此信息
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://syxiaqj.github.io    
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

# Directory
source_dir: source
public_dir: public

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination        #启用分页
## 1: Disable pagination    #不启用分页
## 0: Fully Disable            #完全不可见
archive: 1
category: 1
tag: 1

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus
disqus_shortname:
# Extensions
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: light        #使用的主题名称
exclude_generator:
plugins:            #插件列表
- hexo-generator-feed
- hexo-generator-sitemap

# Markdown
## https://github.com/chjj/marked
markdown:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

# Deployment        #部署到公网配置,后面介绍部署到git上时再详细介绍
## Docs: http://zespia.tw/hexo/docs/deployment.html
deploy:
  type: github
  repository: https://github.com/syxiaqj/syxiaqj.github.io.git    

Markdown文件的标准

Markdown 文件的 Front-Matter(前提,就是下面这段)

title: 文章标题
date: 2019-12-02
categories: 分类  #文章分类目录,可以为空
tags: [tag1,tag2,tag3]  #标签,可以为空,建议填写
description: #文章概要信息,可以为空

以上是Hexo的.md文件的页头标准写法,注意必须是英文冒号,还要留一个空格

麦田建议,至少写三个:标题、时间和标签!

Hexo常用命令

1、新建网站命令:hexo init

在当前文件夹内新建一个网站;

2、hexo new “post”

新建一个以post为标题的.md文件;

hexo new page “pageName” #新建页面

3、生成静态文件:hexo generate,简写:hexo g

4、启动服务器预览:hexo server,简写:hexo s

网站预览网址:localhost:4000

连起来执行:hexo g && hexo s

5、清除缓存和静态文件:hexo clean

更换主题等情况,导致无法看到最新的效果,需要清除缓存;

连起来执行:hexo clean && hexo g && hexo s

更多Hexo命令:hexo.io/zh-cn/docs/commands.html

Hexo常见问题

注意

修改网站和主题,hexo的主题文件主要是ejs格式,使用dw的查找功能无效,必须使用notepad软件查找需要修改的信息!

1、修改网站结构,定义永久链接;

hexo默认的网站结构是:网址.com/2019/07/14/hello-world/

我想修改成:网址.com/hello-world.html

方法:编辑config.yml文件,把permalink: :year/:month/:day/:title/修改成:

permalink: :title.html

2、特殊定制:去掉source文件夹内的_posts;

hexo默认要把md文件放在_posts文件夹内,进入多一道操作,我想设置成把文件直接放在source文件夹内!

这是个特殊要求,自己想的方法是Notepad搜索_posts

找到D:\hexo\node_modules\hexo\lib\plugins\processor下的文件post.js内的这段话:

const postDir = ‘_posts/';

我去掉_posts/后,hexo就可以识别出source文件夹内的md文件!

3、添加分类模块;

方法:hexo new page categories

source文件夹下有了categories\index.md,打开index.md文件,修改如下:

title: 分类
date: 2019-09-11
type: categories
layout: categories

4、添加标签功能(默认打不开标签)

方法:hexo new page tags

source文件夹下有了tags\index.md,打开index.md文件,修改如下:

title: 标签 tags
date: 2019-09-11
type: tags
layout: tags

5、添加about页面;

方法:hexo new page about

该页面内容在文件source\about\index.md中修改

6、点击查看:hexo给网页末尾添加相关文章功能

7、网站导航菜单设置

方法:进入模板文件夹,打开_config.yml文件编辑,添加关于等页面时,必须要绝对路径,比如正确设置如下:

   title: "关于",
   url: "https://www.mtdsj.com/about/index.html"

如果url写:/about/index.html,那么在首页以外的页面会出错!

8、友情链接也在主题内的_config.yml文件设置;

9、添加近期文章板块,有的主题自带这个功能;

10、点击查看:hexo添加评论系统

11、修改了模板,但是没有生效?

解决:先清除缓存:hexo clean,然后hexo generate

12、hexo安装的常见插件如下

npm install -g hexagon-cli
npm install hexo-abbrlink --save
npm install hexo-github-card --save
npm install hexo-related-popular-posts --save
npm install hexo-symbols-count-time --save
npm install hexo-all-minifier --save
npm install hexo-auto-category --save
npm install hexo-generator-feed --save
npm install hexo-generator-searchdb --save

13、测试很多主题:让命令连起来执行

执行:hexo clean&&hexo g&&hexo s

这是三个命令会被连续执行,分别是:清除旧网站、生成新网站、打开服务器预览新站

14、hexo生成网站的速度

网上说hexo生成网站的速度很慢,hugo生成速度快,实际测试:hugo的生成速度确实很快,但hexo生成静态网站的速度并不慢,实测速度如下:

hexo生成2000个网页,需要1.13分钟,生成5000个网页8.2分钟,生成1万个网页耗时30分钟还是失败;

hugo生成2000个文件,只需1.38秒,生成1万个网页19秒,可见hugo在这方面的优势极大。

但是绝大部分网站的内容并不多,照样可以使用hexo,更新一次只需要几分钟而已!

15、hexo生成网站错误;

原因之一是,编辑_config.yml文件时,冒号后的内容和冒号没有保持一个空格!

hexo实现其他功能:

文章置顶、文章阅读量、站内搜索、热门文章排行榜(LeanCloud实现)


相关内容

  • GitBook介绍安装和使用教程
  • Hugo升级方法和遇到的问题
  • Markdown软件推荐
  • HTML引入CSS的方法和示例
  • vscode的使用经验-编辑md文件
  • WordPress评论模块删除邮箱和网址表单
  • 麦田收集的优秀网站
  • RAKsmart主机教程
  • OpenCart商城程序使用经验
  • 静态博客生成器大全和简评
  • 标签

    静态网站生成器教程博客Hexo