Hexo 搭建博客教程

353 阅读3分钟

需要会使用命令行工具,并且有GitHub账号。
这篇文章的主要目的是记录自己搭建博客时踩的坑,所以可能没那么全面
部分内容来自: Hexo官方文档

在 Github 新建一个仓库

名称格式:

username.github.io

注:username 必须是你的 GitHub 用户名

在新仓库中点击 Settings 下拉,在 GitHub Pages 中点击 Choose a theme ,随便选择一个主题应用

刷新页面会发现 GitHub Pages 中多了一行网址 ,复制这个网址,这个网址就是后面要配置的 URL 的网址

环境搭建

安装 Hexo

npm install -g hexo-cli

在要创建博客的目录下初始化环境

hexo init

安装必备的组件

npm install

然后生成静态网页

hexo g

打开一个本地服务器测试

hexo s

配置默认设置

打开博客根目录下的 _config.yml 文件

修改其中的一些配置: 首先修改URL

url:你的仓库主页预览网址

root:你的仓库名称

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://username.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

然后修改 Deployment

主要修改 repository 改为你的仓库的下载地址

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

发布更新文章

在根目录下打开命令行

安装一个拓展工具:

npm i hexo-deployer-git

新建一篇文章:

hexo new post "article title"

文章的目录在 source\_posts

生成静态网页

hexo g

开启本地服务器预览

hexo s

部署到 GitHub

hexo d

其他相关命令

清除文件缓存

hexo clean

删除 hexo

3.0.0版本执行

npm uninstall hexo-cli -g

之前版本执行

npm uninstall hexo -g

命令全称

生成静态网页

hexo generate

开启本地服务器预览

hexo server

部署到 GitHub

hexo deploy

自定义文件命名

Hexo 默认以标题做为文件名称,但您可编辑 new_post_name 参数来改变默认的文件名称,

举例来说,它的默认值是 :title.md,你可以更改为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量描述
:title标题(小写,空格将会被替换为短杠)
:year建立的年份,比如, 2015
:month建立的月份(有前导零),比如, 04
:i_month建立的月份(无前导零),比如, 4
:day建立的日期(有前导零),比如, 07
:i_day建立的日期(无前导零),比如, 7

Front-matter

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

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

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

给文章添加标签分类

只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

删除标签

首先把每篇文章中那个标签的属性去除,然后执行以下命令,清除之前的缓存

hexo clean

然后再次 hexo g 生页面成即可

给文章添加 favicon.ico 图标

首先修改主题文件夹的配置信息:

在根目录 根目录/themes/xxx/_config.yml

找到 favicon 并修改为以下路径:

favicon: favicon.ico

然后将准备好的 favicon.ico 图标放到 hexo/themes/xxx/source 路径下即可

注:xxx 表示你的主题文件的路径,博客主题文件都存放在 根目录/themes

ico 图标转换网站转换:www.bitbug.net/

VSC 安装 stylus 语法高亮

搜索插件:language-stylus

使用VSC修改主题样式可以安装