社区首页 >专栏 >Hexo建站教程

Hexo建站教程

EmoryHuang

发布于 2022-10-27 13:11:00

1.5K00

代码可运行

文章被收录于专栏：EmoryHuang's BlogEmoryHuang's Blog

运行总次数：0

代码可运行

Hexo 建站教程

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

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

安装前提

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

Hexo 安装

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

npm install -g hexo-cli

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

hexo -v

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

cnpm install -g hexo-cli

Hexo 初始化

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

hexo init
npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

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

_config.yml是网站的配置信息，可以在此配置大部分的参数
source 是用来存放发表后的博文的
- _drafts 为草稿
- _posts 为已发表文章
themes 文件夹存放主题

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

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

博客生成、预览

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

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

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

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

部署到 GitHub

安装 Git 部署程序插件

npm install hexo-deployer-git --save

打开博客根目录下的_config.yml 文件，修改最后一行的配置（注意冒号后面有空格）：

deploy:
  type: git
  repository: git@github.com:EmoryHuang/EmoryHuang.github.io.git
  branch: master

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

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

hexo d

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

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

hexo clean
hexo d -g

Hexo 命令使用

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

上述命令可简写为：

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

Hexo 写文章

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

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

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

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

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

---
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，可以很方便的指定个别文件的变量

---
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
---