1.准备环境
安装 Node
安装 Git
注册码云
npm安装 Hexo
npm install hexo-cli -g
2.初始化Hexo
新建文件夹项目，初始化
hexo init
#生成静态页面
hexo g
#启动
hexo s
浏览器访问 http://localhost:4000
关闭hexo服务，ctrl+c
3.Next主题
项目文件夹\themes 内
git clone https://github.com/theme-next/hexo-theme-next.git
根目录下的_config.yml 设置next主题
theme: hexo-theme-next
4.发布文章
两种方法：
1.根目录下，命令创建
hexo new "此处输入文章名字"
项目名称 /source/_posts 目录下，直接创建md文件
5.next主题的细致美化
1. next主题风格选择
主题文件夹下（非根目录）的 _config.yml 配置文件
scheme: Mist
2. 博客site设置，中文设置
根目录下的_config.yml
# Site
title: 网站名
subtitle: '只玩有趣的，顶级的2'
description: '只玩有趣的，顶级的'
keywords:
author: xxx
language: zh-CN
timezone: ''
3. 添加分类
根目录下，命令创建categories文件夹
hexo new page categories
打开 categories 文件夹中的 index.md 文件，添加 type 字段，设置为 “categories”
---
title: categories
date: 2021-04-12 08:08:59
comments: false
type: "categories"
---
到主题文件夹下的 _config.yml 配置文件下，找到 menu 模块，把 categories 的注释给去掉
给文章分类，在文章 的front-matter 部分加入categories（注意冒号后面多一个空格）
---
title: Hello World
comments: false
categories: 测试
---
4. 如何添加其他类似分类的网站导航
主题文件夹下的 _config.yml 配置文件下，找到 menu 模块，PowerBI作品就是新加的
menu:
home: / || fa fa-home
PowerBI作品: /gallery/ || fa fa-th
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
about: /about/ || fa fa-user
5. Hexo 博客添加站内搜索（Local Search）
根目录，命令（cmd或git bash）
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
项目根目录下的 _config.yml 配置文件的文末添加下面这段代码
search:
path: search.xml
field: post
format: html
limit: 10000
编辑主题文件夹的 _config.yml 配置文件，设置 local_search 为 ture
local_search:
enable: true
6. 头像设置
主题文件夹的 _config.yml 配置文件
avatar:
# Replace the default image and set the url here.
url: /images/mao2.gif
照片地址在themes\hexo-theme-next\source\images
7. 首页文章预览设置
每篇文章在想要展示的地方使用 < !–more–> 切断
8. 社交小图标设置
在主题文件夹下的 _config.yml 配置文件中，搜索 Social，然后提示自己增加自己需要的小图标并设置对应连接。 图标可以到 Font Awesome Icon 网站查找。
9. 底部隐藏由Hexo强力驱动，主题NexT.Mist
注释即可
<!--
{%- if theme.footer.powered %}
<div class="powered-by">
{%- set next_site = 'https://theme-next.org' %}
{%- if theme.scheme !== 'Gemini' %}
{%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
{%- endif %}
{{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
</div>
{%- endif %}
{%- if theme.add_this_id %}
<div class="addthis_inline_share_toolbox">
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
</div>
{%- endif %}
{{- next_inject('footer') }}
-->
10. 设置网站图片 Favicon
在 阿里巴巴矢量图标库 下载图标，覆盖主题文件夹下的 source/images 目录里面的三张图片。
11. 博客置顶
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
文章的 front-matter， 加入 top ，数值越大表示等级越高，越靠前显示。
---
title: this is my first blog
date: 2019-04-14
top: 100
---
设置置顶标志
打开：/blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：
<div class="post-meta">
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=e94563>TOP</font>
<span class="post-meta-divider">|</span>
{% endif %}
12. 文章代码主题设置
NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties。
在主题文件夹的 _config.yml 配置文件中，定位到 highlight_theme，根据需求修改相应的值即可。
13. 网站底部字数统计设置，主题添加访客统计、访问次数统计、文章阅读次数统计
npm install hexo-wordcount --save
主题文件夹下的 layout/_partials/footer.swig 文件，在文末添加
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
打开next主题配置文件\themes\next_config.yml，搜索找到busuanzi_count，把enable设置为true
# Show Views / Visitors of the website / page with busuanzi.#展示访问数
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true #统计访客数
total_visitors_icon: user
total_views: true #统计访问数
total_views_icon: eye
post_views: true #统计文章阅读数
post_views_icon: eye
busuanzi_count设置后，这一步没必要
同样是在next主题配置文件\themes\next_config.yml下，搜索footer，在它底下添加counter，设值为true
#统计
counter: true
busuanzi_count设置后，这一步好像也没必要
来到themes\next\layout_partials，找到footer.swig文件，打开编辑，在底下添加代码
{% if theme.footer.counter %}
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}
根目录_config.yml
symbols_count_time:
symbols: true # 文章字数统计
time: false # 文章阅读时长
total_symbols: false # 站点总字数统计
total_time: false # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
使用hexo s部署在本地预览效果的时候，uv数和pv数会过大，这是由于不蒜子用户使用一个存储空间，所以使用localhost:4000进行本地预览的时候会导致数字异常，这是正常现象，只需要将博客部署至云端即可恢复正常
14. 评论模块接入
首先得先到 来必里(http://livere.com/) 申请一个账号。
点击右上角的头像，进入“管理页面”，会看到“您确定要获得来必力安装代码吗?”的提示，直接点击“实行”即可。
申请 City 免费版，如实填写信息即可。申请成功后，可以看到“一般网站”下的第二行代码，有个 data-uid，把后面的值复制下来留着备用。
在主题文件下打开 _config.yml 配置文件，定位到 livere_uid，把刚刚拷贝的data-uid粘贴到相应的位置。
# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: MTAyM88656522228DI3OQ==
文章禁止出现评论页面，front-matter加入comments: false
6. 部署到码云（或github）
在码云上创建一个公有仓库，获取链接
打开项目根目录下的 _config.yml 配置文件，修改 deploy 的值
deploy:
type: git
repo: https://gitee.com/xxx/xxx.git
branch: master
在项目根目录下，打开 Git Bash，配置码云的用户和邮箱
git config --global user.name空格+你的码云的名字
git config --global user.email空格+你的码云的邮箱
安装hexo-deployer-git
npm install hexo-deployer-git --save
部署命令
hexo d -g
在项目首页 -> 服务 -> Gitee Pages
打开项目根目录下的 _config.yml 文件，修改 URL 部分的参数。
url 字段的值修改为远程访问连接
root 字段的值修改 /+远程仓库的名称
网友评论