hexo部署(一):本地部署

本文最后更新于：2025年1月19日 晚上

前言

最近发现腾讯云搞得博客费钱太多，并且因为我是未成年嘛，也没有办法备案，于是就准备去租一个香港的对象存储，然后搞静态博客，最后我选择了hexo，如你所见这个博客就是由hexo所搭建的

hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

这次教程主要介绍：

  • 最基本的部署
  • 撰写属于你的第一篇文章
  • 了解文章的基本结构

本文所采用的系统是MacOS，可能有些地方与Windows有所出入，如遇不会的地方还请评论区留下你的问题。

本文配有目录，可根据自己需求进行跳转

部署

npm

安装

在mac上部署npm其实吧也简单，需要用到homebrew，这部分我会单独开一篇文章来讲。

在这里我假设您已经安装好了homebrew

如何判断安装？

1
brew -v

如果出现版本号说明已经安装好

执行

1
brew update

更新homebrew

执行

1
brew install npm

进行安装npm。执行npm -v即可看到安装好的npm版本

换源

终端执行：

1
npm config set registry https://registry.npm.taobao.org

npm安装与配置结束

git

1
brew install git

即可安装完毕

hexo

安装

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1
npm install -g hexo-cli

建站

安装完成后，执行下述命令，hexo便会自动在指定文件夹添加所需文件。

1
2
3
hexo init <name>
cd <name>
npm install

执行完成后，使用

1
2
hexo g
hexo s

便可以在http://localhost:4000中看到以下页面：

恭喜你现在你的博客就算是在你的本地跑起来了

修改基本信息

现在让我们来看一看这个文件夹中的东西都是什么

1
2
3
4
5
6
7
8
.
├── _config.yml #网站的配置信息，您可以在此配置大部分的参数。
├── package.json #应用程序的信息。您可以自由移除留下你需要的东西
├── scaffolds #模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source #资源文件夹是存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes #主题 文件夹。Hexo 会根据主题来生成静态页面

不难看出“_config.yml”是这个站点的参数控制，以下是其翻译版本，加了一些必要配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<_config.yml>

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

title: Hexo
#站点标题
subtitle: ''
#站点副标题
description: ''
#站点描述
keywords:
#站点关键词多个时使用“,”分割
author: John Doe
#作者昵称
language: zh-CN
#网站语言（默认为en应改为zh-CN）
timezone: 'Asia/Shanghai'
#时区：使用电脑默认的就行

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
#设置你的网站地址，比如说，如果你使用github page，设置url像这样“https://username.github.io/project”
url: http://example.com
permalink: :year/:month/:day/:title/
#文章链接格式（一定要规范，方便爬虫爬取信息）
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
#资源文件夹，放在里面的东西就会生成出来
public_dir: public
#存放生成出来的静态文件夹
tag_dir: tags
#标签文件夹
archive_dir: archives
#归档文件夹
category_dir: categories
#分类文件夹
code_dir: downloads/code
#代码文件夹
i18n_dir: :lang
skip_render:
#不需要渲染的文件

# Writing
new_post_name: :title.md 
#默认的名称
default_layout: post
#默认的布局模版
titlecase: false
#是否将标题转化成标题形式
external_link:
  enable: true #在新建标签页中打开网页
  field: site 
  exclude: ''
filename_case: 0
render_drafts: false
#是否渲染草稿
post_asset_folder: false
#是否启用 Asset 文件夹
relative_link: false
#把链接改为与根目录的相对位置
future: true
#显示未来的文章
highlight: #代码块高亮显示
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10 #每页数量
  order_by: -date #排序依据

# Category & Tag
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

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

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #设置使用的主题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

在修改完这些信息后，使用

1
2
hexo g
hexo s

便可在浏览器看到你修改后的效果

开始创作

你到现在已经完成了最最最基本的设置，现在便可以撰写文章了

创建文章

  • 命令行： 使用 hexo new <title>
  • 手动创建：在hexo主目录下source ->_posts目录中创建<title>.md的文件

初步感知

hexo的文章通常是由两部分构成的，分别是：

  • Front-matter
  • 正文
Front-matter

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

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

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

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址

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

1
2
3
4
5
categories:
- Diary
tags:
- PS3
- Games
正文

正文部分使用md语法撰写，详情可查看我的上一篇文章

更新

在你重新对你的博客做出更新后，通常需要部署到网站，下面介绍几个简单的指令。

hexo clean:清理已经生成的静态文件

hexo g:生成所需的静态文件

hexo s启动本地服务，默认访问网站：http://localhost:4000

hexo d:部署网站

感谢您对本文的阅读，如果遇到不理解的地方，可以通过评论的方式进行交流

下一篇将会将博客部署在Github Pages上

技术
#hexo #网站
hexo部署(一):本地部署
https://blog.renkonti.top/posts/ddb9f012/
作者
Xiao Zhizhen
发布于
2021年2月23日
许可协议