搭建Hexo
搭建前提
- Installation
- Requirements
- Install Git
- Install Node.js
For Mac users
You may encounter some problems when compiling. Please install Xcode from App Store first. After Xcode is installed, open Xcode and go to Preferences -> Download -> Command Line Tools -> Install to install command line tools.Linux(DEB/RPM-based): Install it with NodeSource.Others: Install it through respective package manager. Refer to the guide provided by Node.js.
安装
Hexo-cli
npm install -g hexo-cli- 初始化博客目录
- 进入目录,并安装依赖
# 初始化博客目录
hexo init website-hexo
# 进入博客目录
cd website-hexo
# 安装博客相关依赖
npm install- 目录结构如下
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes_config.yml
Site configuration file. You can configure most settings here.
package.json
package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^0.3.2",
"hexo-server": "^0.3.3"
}
}scaffolds
Scaffold folder. When you create a new post, Hexo bases the new file on the scaffold.
source
Source folder. This is where you put your site’s content. Hexo ignores hidden files and files or folders whose names are prefixed with _ (underscore) - except the _posts folder. Renderable files (e.g. Markdown, HTML) will be processed and put into the public folder, while other files will simply be copied.themes
Theme folder. Hexo generates a static website by combining the site contents with the theme
- 使用命令启动
hexo
hexo server配置
HEXO整体配置
下载主题,并解压到
thems目录下- 下载地址
https://github.com/blinkfox/hexo-theme-matery
- 下载地址
修改项目根目录下的配置文件
_config.yml,将theme属性改为hexo-theme-matery```bash
theme: hexo-theme-matery- 其他配置 - 网站配置 - 网址配置 - 首页配置 ```yaml # 网站配置 title: rudy's blog # 网站标题 subtitle: 'rudy 的个人博客' # 网站副标题 description: 'Justice may be late, but will never be absent.' # 网站描述 keywords: author: rudy # 网站作者 language: zh-CN # 网站使用的语言，可以设置为中文 timezone: '' # 网址配置 url: http://localhost:4000 # 网址，会影响文章页的原文链接地址 permalink: :year/:month/:day/:title/ # 文章的永久链接格式 # 首页配置 index_generator: path: '' per_page: 12 # 分页设置，该主题设置6、12、18比较好 order_by: -date # 按时间倒序排列 # 分页配置 per_page: 12 pagination_dir: page
添加固定页面
创建导航按钮如标签、分类、归档对应页面
使用
hexo new page "categories"命令新建分类页，分类页至少包含如下内容；
---
title: categories
date: 2021-09-06 10:19:56
type: "categories"
layout: "categories"
---- 使用
hexo new page "tags"命令新建标签页，标签页至少包含如下内容；
---
title: tags
date: 2021-09-06 10:25:04
type: "tags"
layout: "tags"
---
- 使用
hexo new page "about"命令新建关于页面,关于页至少包含如下内容;
---
title: about
date: 2021-09-06 10:28:56
type: "about"
layout: "about"
---- 使用
hexo new page 404命令新建404页，404至少包含如下内容；
---
title: 404
date: 2021-09-06 10:32:48
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---
hexo new page "friends"
Edit the file /source/friends/index.md you just created, at least you need the following:
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---- 使用
hexo new page "contact"现建一个交流页面
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---主题配置
- 菜单导航配置 修改
hexo-theme-matery下的_config.yml
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book- 子菜单配置
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
# 子菜单配置
Medias:
icon: fas fa-list
children:
- name: Music
url: /music
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image- 代码高亮配置 修改
website-hexo下的_config.yml
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''搜索插件安装
npm install hexo-generator-search --save汉语转拼音
npm i hexo-permalink-pinyin --save- 修改
website-hexo下的_config.yml
permalink_pinyin:
enable: true
separator: '-' # default: '-'文章统计分析
- 安装插件命令
npm i --save hexo-wordcount - 修改主题中的
_config.yml文件
postInfo:
date: true
update: false
wordCount: false # set true.
totalCount: false # set true.
min2read: false # set true.
readCount: false # set true.添加表情支持
- 安装插件命令
npm install hexo-filter-github-emojis --save- 修改
website-hexo目录下的_config.ymal文件
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:Add RSS feed support (Optional)
- 支持
RSS反馈,插件安装命令
npm install hexo-generator-feed --save- 修改
website-hexo目录下的_config.ymal文件
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date- 运行命令完成配置
hexo clean && hexo g社交链接修改
修改主题目录下
_config.yaml文件,主题默认支持QQ,Github和邮箱配置然后修改主题文件
/layout/_partial/social-link.ejs,添加或者修改链接信息
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github"></i>
</a>
<% } %>编写文章
- 熟悉MarkDown语法
- 编写Fornt Matter
部署
Hexo生成网站既快速又简单，一个命令生成静态文件，然后放置到Nginx的html目录下即可。在命令行使用
hexo generate命令可以将项目打包成静态文件，输出文件目录为public；接下来把
public目录下的所有文件复制到Nginx的html目录下即可完成部署，部署后显示内容如下。部署命令
- Run
hexo clean&&hexo deploy - 查看网站地址
<username>.github.io
- Run
Github Pages
- 创建一个Github页面站点
- 添加主题
- Settings配置选择主题
- 配置发布资源
- 发布之前确定指定分支的仓库是存在的
- 自定义404页面
- 配置Https
- 使用子模块访问私有仓库
- 关闭部署的网站
- 参考部署链接
GitLab Pages
使用Hexo搭配
hexo-theme-matery来搭建博客网站，不仅界面漂亮，而且功能强大。如果你想搭建自己的博客网站，这是个很好的选择
参考资料
- hexo-theme-matery主题官网：https://github.com/blinkfox/hexo-theme-matery
- hexo官网：https://hexo.io/zh-cn/
项目地址
项目github地址:
https://github.com/blinkfox/hexo-theme-matery
