一、前置条件 1、安装Git
下载地址：https://git-scm.com/
2、安装Node.js
下载地址：http://nodejs.cn/download/
配置npm镜像
1 2 3 4 5 6 7 8 9 10 11 12 13 npm config set registry https://registry.npmmirror.com npm config get registry npm config set registry https://registry.npmjs.org/ npm config get registry npm install -g cnpm --registry=https://registry.npmmirror.com
二、安装Hexo 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 npm install -g hexo-cli hexo -v hexo init blog hexo generate hexo s hexo clean
三、修改主题 以下都是以next主题为例子
1 2 git clone https://github.com/theme-next/hexo-theme-next themes/next
编辑文件路径站点根目录 /下 _config.yml
四、配置
站点配置文件： 根目录/_config.yml
主题配置文件：根目录/themes/主题名称/_config.yml
一、站点配置 1、基本配置 编辑文件路径站点根目录 /下 _config.yml
字段
说明
title
博客的名称。
subtitle
根据主题的不同，有的会显示有的不会显示。
description
主要用于SEO，告诉搜索引擎一个关于站点的简单描述，通常建议在其中包含网站的关键词。
author
作者名称，用于主题显示文章的作者。
language
语言会对应的解析正在应用的主题中的languages文件夹下的不同语言文件。所以这里的名称要和languages文件夹下的语言文件名称一致。
timezone
Asia/Shanghai //可不填写。
网站存放在子目录http://yoursite.com/blog，则请将您的 :
url 设为 http://yoursite.com/blog 并把
root 设为 /blog/。
2、设置语言
编辑 站点配置文件， 将 language 设置成你所需要的语言
3、首页只显示部分摘要（不显示全文）
方法一：写概述
在文章的 frontmatter 中添加description，其中description中的内容就会被显示在首页上，其余一律不显示。
1 2 3 4 5 6 7 --- title: Hello World date: 2024-11-30 12:55:10 description: 这是这篇文章显示在首页的内容，可以写这篇文章的一个总结。 --- # todo
方法二：文章截断
在文章内容中，需要截断的地方加入 <!--more-->
首页就会显示这条以上的所有内容，隐藏接下来的所有内容。
4、图片展示配置
旧版的hexo，markdown图片需要安装npm install hexo-asset-img --save或者hexo-asset-image
但是新版不需要装插件了，hexo-renderer-marked 可以正确转换图片
在站点配置文件中修改如下：
1 2 3 4 5 6 7 8 9 10 11 post_asset_folder: true relative_link: false marked: prependRoot: true postAsset: true
然后在文章中引用图片： 这个test.png直接放在同名文件夹即可
二、主题基本配置
1、外观设置
Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。
1 2 3 4 5 # Schemes # scheme: Muse scheme: Mist # scheme: Pisces # scheme: Gemini
Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini mini版本，好像和Pisces差不多
2、顶部导航菜单修改 修改主题配置文件，在菜单项添加以下内容(把注释打开即可)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 menu: home: / || fa fa-home about: /about/ || fa fa-user tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th archives: /archives/ || fa fa-archive guestbook: /guestbook/ || fa fa-comments menu_settings: icons: true badges: false
其中questbook 是新增的，需要修改简体中文对应的翻译文件 languages/zh-CN.yml，在 menu 字段下添加一项：
1 2 3 4 5 6 7 8 9 10 11 menu: home: 首页 archives: 归档 categories: 分类 tags: 标签 about: 关于 search: 搜索 schedule: 日程表 sitemap: 站点地图 commonweal: 公益 404 guestbook: 留言板
3、设置头像 1 2 3 4 5 6 7 8 9 10 11 12 avatar: url: rounded: false opacity: 1 rotated: false
4、侧边栏社交链接
侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标
1 2 3 4 5 6 7 8 # Social Links # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon. social: GitHub: https://github.com/rstyro || fab fa-github Gitee: https://gitee.com/rstyro || fab fa-codiepie 简书: https://www.jianshu.com/u/651c15a1758a || fa fa-book
5、开启打赏功能
只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。
1 2 3 4 5 6 7 8 9 10 11 12 13 # Reward (Donate) # Front-matter variable (unsupport animation). reward_settings: # If true, reward will be displayed in every article by default. enable: true animation: false comment: 您的打赏，是我创作的动力！不给钱？那我只能靠想象力充饥了。 reward: wechatpay: /images/wechat_pay.jpg alipay: /images/alipay.jpg #paypal: /images/paypal.png #bitcoin: /images/bitcoin.png
6、友情链接
1 2 3 4 5 6 7 8 9 # Blog rolls links_settings: icon: fa fa-link title: 友链 # Available values: block | inline layout: block links: 胖不了小陆: https://rstyro.github.io/blog/
7、修改网页底部
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 footer: # 网站底部显示网站的开始时间 since: 2017-04-10 # Icon between year and copyright info. icon: # 显示的图标. See: https://fontawesome.com/icons name: fa fa-heart # 图标动画，比如： 心形会跳动 animated: true # 图标颜色 color: "#ff0000" # 版权文案. copyright: 以梦为马，诗酒趁年华 # 去掉 Hexo & NexT 的powered文案 powered: false
8、首页文章添加阴影
在next主题文件下找到themes\next\source\css\_common\components\post的post.styl文件在.post_block位置,更改如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (hexo-config ('motion.transition.post_block' )) { .post -block { opacity : 0 ; margin-top : 60px; margin-bottom : 60px; padding : 25px; -webkit-box-shadow : 0 0 5px rgba (202 , 203 , 203 , .5 ); -moz-box-shadow : 0 0 5px rgba (202 , 203 , 204 , .5 ); } .pagination , .comments { opacity : 0 ; } }
9、显示当前浏览进度
搜索关键字 scrollpercent，把 false 改为 true
1 2 3 4 5 6 back2top: enable: true # Back to top in sidebar. sidebar: false # Scroll percent label in b2t button. scrollpercent: true
10、文章的标签改为图标
11、修改加载特效
由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条
安装 theme-next-pace
1 2 3 4 5 # 进入到next主题根目录 $ cd themes/next # 下载包 到next目录下的 source/lib/pace $ git clone https://github.com/theme-next/theme-next-pace source/lib/pace
然后修改主题配置文件，把pace.enable设置为true即可
1 2 3 4 5 6 7 8 # Progress bar in the top during page loading. # Dependencies: https://github.com/theme-next/theme-next-pace # For more information: https://github.com/HubSpot/pace pace: enable: true # corner-indicator | fill-left | flat-top | flash | minimal theme: flash
12、修改网页logo图标
1 2 3 4 5 6 7 favicon: small: /images/favicon.jpg medium: /images/favicon.jpg apple_touch_icon: /images/favicon.jpg safari_pinned_tab: /images/favicon.jpg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml
13、代码块配置
1 2 3 4 5 6 7 8 9 10 codeblock: #高亮的主题色，查看: https://github.com/chriskempson/tomorrow-theme highlight_theme: night # 是否开启复制代码按钮 copy_button: enable: true # 复制结果显示 show_result: true # 代码边框样式，可选: default | flat | mac style:mac
14、右上角显示Github
把github_banner.enable设置为true
1 2 3 4 5 # `Follow me on GitHub` banner in the top-right corner. github_banner: enable: true permalink: https://github.com/rstyro title: Follow me on GitHub
15、归档页面添加十二生肖图标
首先，点击这里 下载十二生肖字体。下载后将解压的三个字体文件全部放在 hexo/source/fonts/目录下（若无 fonts 文件夹需要自行创建）
编辑 hexo/themes/next/layout/_macro/post-collapse.swig 文件
找到class=collection-header 然后在后面加入< <div class="chinese-zodiac">...</div> 这一段就可以了
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 {%- if year !== current_year %} {%- set current_year = year %} <div class="collection-year"> <span class="collection-header">{{ current_year }}</span> <div class="chinese-zodiac"> {%- if current_year % 12 == 0 %} <i class="symbolic-animals icon-monkey"></i> {%- endif %} {%- if current_year % 12 == 1 %} <i class="symbolic-animals icon-rooster"></i> {%- endif %} {%- if current_year % 12 == 2 %} <i class="symbolic-animals icon-dog"></i> {%- endif %} {%- if current_year % 12 == 3 %} <i class="symbolic-animals icon-pig"></i> {%- endif %} {%- if current_year % 12 == 4 %} <i class="symbolic-animals icon-rat"></i> {%- endif %} {%- if current_year % 12 == 5 %} <i class="symbolic-animals icon-ox"></i> {%- endif %} {%- if current_year % 12 == 6 %} <i class="symbolic-animals icon-tiger"></i> {%- endif %} {%- if current_year % 12 == 7 %} <i class="symbolic-animals icon-rabbit"></i> {%- endif %} {%- if current_year % 12 == 8 %} <i class="symbolic-animals icon-dragon"></i> {%- endif %} {%- if current_year % 12 == 9 %} <i class="symbolic-animals icon-snake"></i> {%- endif %} {%- if current_year % 12 == 10 %} <i class="symbolic-animals icon-horse"></i> {%- endif %} {%- if current_year % 12 == 11 %} <i class="symbolic-animals icon-goat"></i> {%- endif %} </div> </div> {%- endif %}
编辑上面之后，还需要添加自定义样式，新增文件：根目录/source/_data/zodiac.styl
编辑如下内容：
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 .chinese-zodiac { float: right; } @font-face { font-family: 'chinese-zodiac'; font-display: swap; src: url('/fonts/chinese-zodiac.eot'); src: url('/fonts/chinese-zodiac.eot') format('embedded-opentype'), url('/fonts/chinese-zodiac.woff2') format('woff2'), url('/fonts/chinese-zodiac.woff') format('woff'); font-weight: normal; font-style: normal; } .symbolic-animals { display: inline-block; font: normal normal normal 14px/1 chinese-zodiac; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-dragon:before { content: '\e806'; font-size: 35px;} .icon-tiger:before { content: '\e809'; font-size: 35px;} .icon-pig:before { content: '\e810'; font-size: 35px;} .icon-horse:before { content: '\e813'; font-size: 35px;} .icon-rat:before { content: '\e816'; font-size: 35px;} .icon-goat:before { content: '\e818'; font-size: 35px;} .icon-snake:before { content: '\e820'; font-size: 35px;} .icon-ox:before { content: '\e822'; font-size: 35px;} .icon-dog:before { content: '\e825'; font-size: 35px;} .icon-rabbit:before { content: '\e826'; font-size: 35px;} .icon-monkey:before { content: '\e829'; font-size: 35px;} .icon-rooster:before { content: '\e82f'; font-size: 35px;}
然后在主题配置文件中编辑 custom_file_path新增上面添加的样式
1 2 3 # Define custom file paths. custom_file_path: style: source/_data/zodiac.styl
三、插件配置
1、本地搜索
1 npm install hexo-generator-searchdb --save
修改主题配置文件，把local_search.enable设置为true
1 2 3 4 # Local Search # Dependencies: https://github.com/theme-next/hexo-generator-searchdb local_search: enable: true
2、扩展流程图插件
1 2 3 4 5 6 7 8 9 npm install hexo-filter-mermaid-diagrams --save npm install hexo-filter-flowchart --save npm install hexo-filter-sequence --save
安装mermaid插件之后，配置主题配置文件 编辑Mermaid设置为true
1 2 3 4 5 # Mermaid tag mermaid: enable: true # Available themes: default | dark | forest | neutral theme: default
3、添加评论功能:Gitalk
1 2 3 4 5 6 7 8 9 10 11 12 13 14 # Gitalk # For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk gitalk: enable: true github_id: rstyro # GitHub 仓库拥有者用戶名，用于指定存储评论的仓库 repo: blog # 用于存储评论的GitHub仓库名称。评论将以issue的形式存储在这个仓库中 client_id: 你的ClientId # GitHub Application Client ID client_secret: 你刚才生成的Secret # GitHub Application Client Secret admin_user: rstyro # 具有初始化GitHub issues权限的用户列表 distraction_free_mode: true # 用“专注模式”，在这种模式下，评论框会减少其他干扰，更加简洁。 #proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # 官方 proxy 地址 # 现在的语言，默认即可，可选: en | es-ES | fr | ru | zh-CN | zh-TW language:
五、新建文章
上面各种主题配置好之后，就可以写文章了
CMD控制台使用hexo new 生成页面或文章
1、生成文章命令 1 2 3 4 5 6 7 8 9 10 11 12 hexo new page tags hexo new page about hexo new page categories hexo n page test hexo n 文章名
1 2 3 4 5 --- title: 文章名 date: 2024-11-30 22:39:11 tags: ---
2、文章头部字段解析 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 /* ！！！！！！！！！！ ** 每一项的 : 后面均有一个空格 ** 且 : 为英文符号 ** ！！！！！！！！！！ */ title: /* 文章标题，可以为中文 */ date: /* 建立日期，如果自己手动添加，请按固定格式 ** 就算不写，页面每篇文章顶部的发表于……也能显示 ** 只要在主题配置文件中，配置了 created_at 就行 ** 那为什么还要自己加上？ ** 自定义文章发布的时间 */ updated: /* 更新日期，其它与上面的建立日期类似 ** 不过在页面每篇文章顶部，是更新于…… ** 在主题配置文件中，是 updated_at */ permalink: /* 若站点配置文件下的 permalink 配置了 title ** 则可以替换文章 URL 里面的 title（文章标题） */ categories: /* 分类，支持多级，比如： - technology - computer - computer-aided-art 则为 technology/computer/computer-aided-art （不适用于 layout: page） */ tags: /* 标签 ** 多个可以这样写 [标签1,标签2,标签3] ** （不适用于 layout: page） */ description: /* 文章的描述，在每篇文章标题下方显示 ** 并且作为网页的 description 元数据 ** 如果不写，则自动取 <!-- more --> ** 之前的文字作为网页的 description 元数据 */ keywords: /* 关键字，并且作为网页的 keywords 元数据 ** 如果不写，则自动取 tags 里的项 ** 作为网页的 keywords 元数据 */ comments: /* 是否开启评论 ** 默认值是 true ** 要关闭写 false */ layout: /* 页面布局，默认值是 post，默认值可以在 ** 站点配置文件中修改 default_layout ** 另：404 页面可能用到，将其值改为 false */ type: /* categories，目录页面 ** tags，标签页面 ** picture，用来生成 group-pictures */
3、自定义生成的文章模板
默认的文章模板比较简单，我们修改根目录/scaffolds/post.md即可
1 2 3 4 5 6 7 8 --- title: {{ title }} date: {{ date }} updated: {{date}} tags: [] description: 文章描述 ---
六、部署
可以把代码推送到Github部署到Github Pages 服务
安装Git部署插件
1 2 # 安装Git部署插件 $ npm install hexo-deployer-git --save
修改站点配置文件 在deploy 修改如下：
1 2 3 4 5 6 # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: https://github.com/rstyro/blog.git # 你的github 仓库地址 branch: master #部署到哪个分支
更多的配置方式：
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 # You can use this: deploy: type: git repo: <repository url> branch: [branch] token: '' message: [message] name: [git user] email: [git email] extend_dirs: [extend directory] ignore_hidden: false # default is true ignore_pattern: regexp # whatever file that matches the regexp will be ignored when deploying # or this: deploy: type: git message: [message] repo: <repository url>[,branch] extend_dirs: - [extend directory] - [another extend directory] ignore_hidden: public: false [extend directory]: true [another extend directory]: false ignore_pattern: [folder]: regexp # or you could specify the ignore_pattern under a certain directory # Multiple repositories deploy: repo: # Either syntax is supported [repo_name]: <repository url>[,branch] [repo_name]: url: <repository url> branch: [branch]
