Hexo搭建站点
准备
- Github新建仓库,命名为
{username}.github.io
- 安装Node.js,安装Stable版本。
安装Hexo-cli,即Hexo的命令行工具。
1
npm install -g hexo-cli
初始化
创建项目,进入创建的文件夹
1
2hexo init {name}
cd {name}启动项目
1
hexo server
显示如下界面,浏览器打开
http://localhost:4000/
查看博客站点编译部署项目
修改根目录的
_config.yml
文件,修改Deployment部分为新建仓库的地址,修改分支为master1
2
3
4deploy:
type: "git"
repo: "git@github.com:xxx/xxx.github.io.git"
branch: master安装git部署插件
hexo-deployer-git
1
npm install hexo-deployer-git --save
根目录创建文件
deploy.sh
,内容如下:1
2
3
4
5hexo clean
hexo generate
hexo deploy控制台输入
sh deploy.sh
,编译部署项目,Hexo会把编译后的静态内容上传到master
分支Github新建
source
分支放置源码1
2
3
4
5
6git init
git checkout -b source
git add -A
git commit -m "init blog"
git remote add origin git@github.com:{username}/{username}.github.io.git
git push origin source
主站配置
修改
_config.yml
文件1
2
3
4
5
6
7
8# Site
title: MY BLOG
subtitle: ""
description: ""
keywords: Javascript
author: HJL
language: zh-CN
timezone: ""延迟发布,手动指定日期晚于当前时间不会生成
1
future: false
归档页面删除分页效果
1
2archive_generator:
per_page: 0指定文件夹跳过渲染,在根目录source中创建html文件夹即可放置html文件
1
2skip_render:
- "html/**"
主题配置-Next
下载Next源码到Themes文件夹中
1
git clone https://github.com/theme-next/hexo-theme-next themes/next
根目录下
_config.yml
文件,修改theme
字段1
theme: next
themes/next目录下
_config.yml
文件布局样式:scheme,选择一种取消注释:
1
2
3
4# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: GeminiFavicon: 图片转为图标网站,图标下载后放置在
themes/next/source/images
文件夹,并配置favicon:1
2
3
4
5
6
7favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-pinned-tab.svg
#android_manifest: /images/manifest.json
ms_browserconfig: /images/browserconfig.xml头像:avatar,
themes/next/source/images
文件夹中放置avatar.png
作为图像,rounded配置圆形,rotated配置hover旋转:1
2
3
4
5
6
7
8avatar:
# Replace the default image and set the url here.
# url: #/images/avatar.gif
url: /images/avatar.png
# If true, the avatar will be dispalyed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: trueBack2top:快速返回文章顶部,
enable
开启,sidebar
配置侧边栏,scrollpercent
配置阅读百分比:1
2
3
4
5
6back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: trueReading_progress:显示阅读进度,上方显示进度条:
1
2
3
4
5
6reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3pxGithub_banner:页面右上角跳转到Github仓库
1
2
3
4github_banner:
enable: true
permalink: https://github.com/xxx
title: Follow me on GitHubLocal_search:搜索功能
安装插件
hexo-generator-searchdb
:1
npm install hexo-generator-searchdb --save
根目录的
_config.yml
文件配置搜索:1
2
3
4
5
6search:
path: search.xml
field: post
content: true
format: html
limit: 10000themes/next目录下的
_config.yml
文件配置搜索:1
2
3
4
5
6
7
8
9
10
11local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: falseCustom_file_path:自定义文件路径,例如,在根目录
source/_data
创建styles.styl
文件,在该文件自定义修改网站的css:1
2
3
4
5
6
7
8
9
10
11custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.stylpowered:去掉footer中Hexo与Next强力驱动文字
1
2# Powered by Hexo & NexT
powered: falsebusuanzi_count:不蒜子访客统计
1
2
3
4
5
6
7
8busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eyeReward:打赏功能,将图片放到source/images中即可
1
2
3
4
5
6
7
8
9
10
11reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
# comment: Donate comment here.
reward:
wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.pngfancybox:点击图片时放大该图片,并且可以快速浏览当前文章的所有图片
1
2
3# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true
新建内容
新建文章:创建的文章在目录
source/_posts
文件夹下,MarkDown格式1
hexo new xxx
文章开头采用如下格式添加信息:
1
2
3
4
5
6title: Hexo构建
date: 2023-11-04 20:01:20
tags:
-Hexo
categories:
-Hexo检查Next主题的
_config.yml
中简介设置打开:(默认安装时打开)1
2# Automatically excerpt description in homepage as preamble text.
excerpt_description: true在文章中添加截断,只有截断之前的内容才会在列表页展示
1
<!--more-->
点击“阅读全文”按钮跳转后,会自动定位到
more
标签的位置,如果想要取消定位,在
themes/next/layout/_macro/post.swig
中去除#more
即可隐藏文章:在Font-Matter中添加
published: false
即可新建分类:
新建分类页面,生成
/source/categories/index.md
文件1
hexo new page categories
Front Matter中添加
type: categories
1
2
3
4title: categories
date: 2023-11-06 17:21:15
type: "categories"
comments: false创建文章的Front Matter中设置分类
一级分类
1
2categories:
- FE二级分类
1
2
3categories:
- FE
- CSS
新建标签
新建标签页,生成
/source/tags/index.md
文件1
hexo new page tags
Front Matter中添加
type: tags
:1
2
3
4title: tags
date: 2023-11-04 15:45:29
type: "tags"
comments: false修改主题的
_config.yml
文件,配置Tags和categories1
2
3
4
5
6
7
8
9menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat清除无用的标签:
1
hexo clean