Hexo建站教程

本文最后更新于:4 个月前

Hexo 建站教程

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

本文主要介绍 Hexo 建站的过程和可能遇到的一些问题。

安装前提

Hexo 建站环境配置详见:Hexo 建站环境配置

Hexo 安装

进入 Hexo 官方网站 就能看见 Hexo 的安装命令

1
npm install -g hexo-cli

安装完成后,打开 Git Bash,输入 hexo -v 查看版本信息,验证安装是否成功。

1
hexo -v

提示:如果 npm 速度慢或者安装失败,可以通过淘宝镜像安装,即使用如下命令

1
cnpm install -g hexo-cli

Hexo 初始化

选定一个文件夹,如 F:\Blog (名字可以随便取),之后所有的文件都会在这个目录下。进入 Blog 文件夹,鼠标右键 Git Bash Here 进入 Git Bash ,输入 hexo init 命令初始化,接着输入 npm install 安装必备的组件。

1
2
hexo init
npm install

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

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

下面对这几个文件进行简单的说明

  1. _config.yml是网站的配置信息,可以在此配置大部分的参数

  2. source 是用来存放发表后的博文的

    • _drafts 为草稿
    • _posts 为已发表文章
  3. themes 文件夹存放主题

打开 _config.yml 可以进行简单修改,更多详细信息可以参考 官方网站配置说明

1
2
3
4
5
6
7
title: EmoryHuang    # 在浏览器中打开时,显示在标签页上的标题
subtitle: '' # 副标题
description: '' # 站点的基本信息
keywords: # 网站关键词
author: EmoryHuang # 作者名称,
language: zh-CN # 网站语言
timezone: '' # 设置时区

博客生成、预览

初始化完成之后就可以生成博客并进行预览

1
2
hexo g # 生成
hexo s # 启动服务

hexo g 生成静态网页,hexo s 打开本地服务器,然后浏览器打开 http://localhost:4000/,就可以看到博客了,当然现在还是非常丑,之后可以通过添加主题进行美化。

在 Git Bash 中按 ctrl+c 关闭本地服务器。

部署到 GitHub

安装 Git 部署程序插件

1
npm install hexo-deployer-git --save

打开博客根目录下的_config.yml 文件,修改最后一行的配置(注意冒号后面有空格):

1
2
3
4
deploy:
type: git
repository: git@github.com:EmoryHuang/EmoryHuang.github.io.git
branch: master

repository 修改为你自己的 github 项目地址,将我的用户名替换即可。

接下来就是把博客部署到 GitHub 上:

1
hexo d

之后进入你的 GitHub 仓库,会发现多了很多文件,在浏览器中打开 https://你的GitHub用户名.github.io 来查看博客页面,如果无法显示,可以稍微等几分钟。如果依然不行,那么就检查一下是否有出错的步骤。

建议每次部署时,首先通过 hexo clean 清除掉 public 文件夹,再使用 hexo d -g 部署。

1
2
hexo clean
hexo d -g

Hexo 命令使用

1
2
3
4
5
6
hexo new "postName"      # 新建文章
hexo generate # 生成静态页面
hexo server # 开启预览访问端口
hexo deploy # 部署到GitHub
hexo help # 查看帮助
hexo version # 查看Hexo的版本

上述命令可简写为:

1
2
3
4
hexo n                   # 新建文章
hexo g # 生成静态页面
hexo s # 开启预览访问端口
hexo d # 部署到GitHub

Hexo 写文章

首先需要新建一篇文章,具体的使用方法为 hexo new [layout] <title> 其中 layout 为可选项

1
hexo new "MyBlog"   #新建一篇名为MyBlog的文章

上述命令会在 source/_post/ 文件夹下生成 MyBlog.md 的文件。

可以通过这种方法新建文章,当然也可以直接在这个文件夹下创建 MyBlog.md 文件,效果是一样的。

通过命令新建文章并打开 MyBlog.md 文件,会发现信息:

1
2
3
4
5
---
title: myblog
date: 2021-04-29 20:04:20
tags:
---

这在 Hexo 中称为 Front-matter,它是以 --- 分隔的区域,用于指定个别文件的变量

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签
categories 分类
excerpt 摘要

举例如下,通过 Front-matter,可以很方便的指定个别文件的变量

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Hexo建站教程
tags:
- Hexo
- 博客搭建
categories: 学习教程
comment: true
excerpt: Hexo 是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。本文主要介绍Hexo建站的过程和可能遇到的一些问题。
index_img: https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/2132319733.jpg
banner_img: https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/2132319733.jpg
abbrlink: 2132319733
date: 2021-04-29 20:30:36
---

在正文部分,可以按照 markdown 语法书写,可以参考 MarkDown 写作语法

书写完成之后,就可以把文章部署到 GitHub 上了

1
2
hexo clean
hexo d -g

参考

相关内容


本文作者: EmoryHuang
本文链接: https://emoryhuang.cn/blog/2132319733.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明来自EmoryHuang