【hexo】如何用hexo搭建一个网站

306 阅读1分钟

几行命令就可以搞定

$ npm install -g hexo-cli
$ npm install hexo
$ hexo init <folder>
$ cd <folder>
$ npm install

网站目录结构

├── _config.yml  // 配置信息
├── package.json
├── scaffolds  // 模板文件
├── source
|   ├── _drafts
|   └── _posts
└── themes

其他就不用多介绍了

config.yml 基本参数介绍

title网站标题
subtitle网站副标题
description网站描述
keywords网站的关键词。支持多个关键词。
author您的名字
language网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans和 zh-CN
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_YorkJapan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai

其他配置参数详见配置

模板文件

常见的模板文件有三种

├── scaffolds
    ├── _drafts
    └── _posts
    └── _page

与此对应的创建命令 hexo new draft/post/page 你的名字

写作

写作就用MD或者EJS格式。原理是因为hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs。如果你安装了 hexo-renderer-pug,也可以用pug的格式

Front-matter

就是开始写一篇文章后,用于指定文章的变量

参数描述默认值
layout布局config.default_layout
title标题文章的文件名
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签(不适用于分页)
categories分类(不适用于分页)
permalink覆盖文章网址
excerptPage excerpt in plain text. Use this plugin to format the text
disableNunjucksDisable rendering of Nunjucks tag {{ }}/{% %} and tag plugins when enabled
langSet the language to override auto-detectionInherited from _config.yml

tagscategories这两个参数,一般自己手动添加

categories 小知识

并列分类: categories:

  • [前端]
  • [后端]

并列+子分类 categories:

  • [前端, JavaScript]
  • [后端, JAva]

本地启动

hexo server

部署

部署有多种方式,我浅尝了github pages, 即不需要服务器和域名

1、 安装git部署插件

npm install hexo-deployer-git --save

2、 编辑_config.yml

deploy:
  type: git
  repo:  在github创建的.io的repo
  branch: [branch] // 部署的分支
  message: [message]

部署命令

$ hexo clean 清除缓存
$ hexo generate 生成静态文件
$ hexo deploy

image.png

3、 遇到的问题

  • 经常性443

image.png

  • source 和build后如何隔开来

  • 部署的原理是什么

4、 TODO

  • 下次不用git pages部署

常见问题

troubleshooting