博客 - - Hexo + fluid + Github 搭建教程(github.io)_hexo和fluid

环境：

        Windows 10 LTSC

        GitHub.io：提供网站文件托管+域名

        Hexo：由markdown文件和配置主动生成网页静态文件

        fluid：Hexo主题

1、安装 Git

2、安装 node.js

3、github

        3-1 创建 Yourname.github.io 仓库

        3-2 填写仓库名，

                格式：Yourname.github.io。

                Yourname 需要和 xxx.github.com 保持一致。

                否则访问地址会是：https://tom.github.com/tom.github.io 。

                无法通过 Yourname.github.io 域名记性访问。

                例如： github网址：tom.github.com ，那么新建的仓库名是：tom.github.io。

        3-3 进入 setting 下的 pages 选项

                在github pages页面，source 选择Deploy from a branch; 

                Branch 根据仓库的分支名来确定，这里是main 的 / 根目录下。

 

4、安装 Hexo

# 至于Hexo 版本，官方推荐最新的（需兼容node.js版本）
 
# 全局安装（小白推荐，cmd中可直接使用hexo init）
 
npm install -g hexo-cli 
 
 
 
# 局部安装
 
npm install hexo  # npm 安装 hexo
 
npx hexo <command>  # npm5.2版以后可用，npx init myhexo ；npx 将 hexo 下载到一个临时目录，再次执行 重新下载 hexo。
 
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile  # 记得将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>

Windows 下 Ctrl + R 打开运行，输入 CMD 打开命令行。

新建 hexo目录并cd 进去（以下基于全局安装模式）。

cd Hexo
 
hexo init //Hexo 即会自动在目标文件夹建立网站所需要的所有文件。
 
npm install //安装依赖包

本地查看hexo服务：

hexo generate  # 或者 hexo g ；生成静态文件
 
hexo server  # 启动本地http服务 浏览器输入：http://localhost:4000

至此，hexo 搭建完成

5、安装Fluid 主题

进入 hexo 目录，执行：

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制进去。

 _config.yml 内容如下：

​
#---------------------------
 
# Hexo Theme Fluid
 
# Author: Fluid-dev
 
# Github: GitHub - fluid-dev/hexo-theme-fluid: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo
 
#
 
# 配置指南: 配置指南 | Hexo Fluid 用户手册
 
# 你可以从指南中获得更详细的说明
 
#
 
# Guide: Guide | Hexo Fluid Docs
 
# You can get more detailed help from the guide
 
#---------------------------
 
#---------------------------
 
# 全局
 
# Global
 
#---------------------------
 
# 用于浏览器标签的图标
 
# Icon for browser tab
 
favicon: /img/fluid.png
 
# 用于苹果设备的图标
 
# Icon for Apple touch
 
apple_touch_icon: /img/fluid.png
 
# 浏览器标签页中的标题分隔符，效果： 文章名 - 站点名
 
# Title separator in browser tab, eg: article - site
 
tab_title_separator: " - "
 
# 强制所有链接升级为 HTTPS（适用于图片等资源出现 HTTP 混入报错）
 
# Force all links to be HTTPS (applicable to HTTP mixed error)
 
force_https: false
 
# 代码块的增强配置
 
# Enhancements to code blocks
 
code:
 
  # 是否开启复制代码的按钮
 
  # Enable copy code button
 
  copy_btn: true
 
  # 代码语言
 
  # Code language
 
  language:
 
    enable: true
 
    default: "TEXT"
 
  # 代码高亮
 
  # Code highlight
 
  highlight:
 
    enable: true
 
    # 代码块是否显示行号
 
    # If true, the code block display line numbers
 
    line_number: true
 
    # 实现高亮的库，对应下面的设置
 
    # Highlight library
 
    # Options: highlightjs | prismjs
 
    lib: "highlightjs"
 
    highlightjs:
 
      # 在链接中挑选 style 填入
 
      # Select a style in the link
 
      # See: highlight.js demo
 
      style: "github gist"
 
      style_dark: "dark"
 
    prismjs:
 
      # 在下方链接页面右侧的圆形按钮挑选 style 填入，也可以直接填入 css 链接
 
      # Select the style button on the right side of the link page, you can also set the CSS link
 
      # See: Prism
 
      style: "default"
 
      style_dark: "tomorrow night"
 
      # 设为 true 高亮将本地静态生成（但只支持部分 prismjs 插件），设为 false 高亮将在浏览器通过 js 生成
 
      # If true, it will be generated locally (but some prismjs plugins are not supported). If false, it will be generated via JS in the browser
 
      preprocess: true
 
# 一些好玩的功能
 
# Some fun features
 
fun_features:
 
  # 为 subtitle 添加打字机效果
 
  # Typing animation for subtitle
 
  typing:
 
    enable: true
 
    # 打印速度，数字越大越慢
 
    # Typing speed, the larger the number, the slower
 
    typeSpeed: 70
 
    # 游标字符
 
    # Cursor character
 
    cursorChar: "_"
 
    # 是否循环播放效果
 
    # If true, loop animation
 
    loop: false
 
    # 在指定页面开启，不填则在所有页面开启
 
    # Enable in specified page, all pages by default
 
    # Options: home | post | tag | category | about | links | page | 404
 
    scope: []
 
  # 为文章内容中的标题添加锚图标
 
  # Add an anchor icon to the title on the post page
 
  anchorjs:
 
    enable: true
 
    element: h1,h2,h3,h4,h5,h6
 
    # Options: left | right
 
    placement: left
 
    # Options: hover | always | touch
 
    visible: hover
 
    # Options: § | # | ❡
 
    icon: ""
 
  # 加载进度条
 
  # Progress bar when loading
 
  progressbar:
 
    enable: true
 
    height_px: 3
 
    color: "#29d"
 
    # See: https://github.com/rstacruz/nprogress
 
    options: { showSpinner: false, trickleSpeed: 100 }
 
# 主题暗色模式，开启后菜单中会出现切换按钮，用户浏览器会存储切换选项，并且会遵循 prefers-color-scheme 自动切换
 
# Theme dark mode. If enable, a switch button will appear on the menu, each of the visitor's browser will store his switch option
 
dark_mode:
 
  enable: true
 
  # 默认的选项（当用户手动切换后则不再按照默认模式），选择 `auto` 会优先遵循 prefers-color-scheme，其次按用户本地时间 18 点到次日 6 点之间进入暗色模式
 
  # Default option (when the visitor switches manually, the default mode is no longer followed), choosing `auto` will give priority to prefers-color-scheme, and then enter the dark mode from 18:00 to 6:00 in the visitor’s local time
 
  # Options: auto | light | dark
 
  default: auto
 
# 主题颜色配置，其他不生效的地方请使用自定义 css 解决，配色可以在下方链接中获得启发
 
# Theme color, please use custom CSS to solve other colors, color schema can be inspired by the links below
 
# See: LOL Colors - Curated color palette inspiration
 
color:
 
  # body 背景色
 
  # Color of body background
 
  body_bg_color: "#eee"
 
  # 暗色模式下的 body 背景色，下同
 
  # Color in dark mode, the same below
 
  body_bg_color_dark: "#181c27"
 
  # 顶部菜单背景色
 
  # Color of navigation bar background
 
  navbar_bg_color: "#2f4154"
 
  navbar_bg_color_dark: "#1f3144"
 
  # 顶部菜单字体色
 
  # Color of navigation bar text
 
  navbar_text_color: "#fff"
 
  navbar_text_color_dark: "#d0d0d0"
 
  # 副标题字体色
 
  # Color of navigation bar text
 
  subtitle_color: "#fff"
 
  subtitle_color_dark: "#d0d0d0"
 
  # 全局字体色
 
  # Color of global text
 
  text_color: "#3c4858"
 
  text_color_dark: "#c4c6c9"
 
  # 全局次级字体色（摘要、简介等位置）
 
  # Color of global secondary text (excerpt, introduction, etc.)
 
  sec_text_color: "#718096"
 
  sec_text_color_dark: "#a7a9ad"
 
  # 主面板背景色
 
  # Color of main board
 
  board_color: "#fff"
 
  board_color_dark: "#252d38"
 
  # 文章正文字体色
 
  # Color of post text
 
  post_text_color: "#2c3e50"
 
  post_text_color_dark: "#c4c6c9"
 
  # 文章正文字体色（h1 h2 h3...）
 
  # Color of Article heading (h1 h2 h3...)
 
  post_heading_color: "#1a202c"
 
  post_heading_color_dark: "#c4c6c9"
 
  # 文章超链接字体色
 
  # Color of post link
 
  post_link_color: "#0366d6"
 
  post_link_color_dark: "#1589e9"
 
  # 超链接悬浮时字体色
 
  # Color of link when hovering
 
  link_hover_color: "#30a9de"
 
  link_hover_color_dark: "#30a9de"
 
  # 超链接悬浮背景色
 
  # Color of link background when hovering
 
  link_hover_bg_color: "#f8f9fa"
 
  link_hover_bg_color_dark: "#364151"
 
  # 分隔线和表格边线的颜色
 
  # Color of horizontal rule and table border
 
  line_color: "#eaecef"
 
  line_color_dark: "#435266"
 
  # 滚动条颜色
 
  # Color of scrollbar
 
  scrollbar_color: "#c4c6c9"
 
  scrollbar_color_dark: "#687582"
 
  # 滚动条悬浮颜色
 
  # Color of scrollbar when hovering
 
  scrollbar_hover_color: "#a6a6a6"
 
  scrollbar_hover_color_dark: "#9da8b3"
 
  # 按钮背景色
 
  # Color of button
 
  button_bg_color: "transparent"
 
  button_bg_color_dark: "transparent"
 
  # 按钮悬浮背景色
 
  # Color of button when hovering
 
  button_hover_bg_color: "#f2f3f5"
 
  button_hover_bg_color_dark: "#46647e"
 
# 主题字体配置
 
# Font
 
font:
 
  font_size: 16px
 
  font_family:
 
  letter_spacing: 0.02em
 
  code_font_size: 85%
 
# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
 
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
 
custom_js:
 
# 指定自定义 .css 文件路径，用法和 custom_js 相同
 
# The usage is the same as custom_js
 
custom_css:
 
# 网页访问统计
 
# Analysis of website visitors
 
web_analytics:  # 网页访问统计
 
  enable: false
 
  # 遵循访客浏览器"请勿追踪"的设置，如果开启则不统计其访问
 
  # Follow the "Do Not Track" setting of the visitor's browser
 
  # See: Tracking Preference Expression (DNT)
 
  follow_dnt: true
 
  # 百度统计的 Key，值需要获取下方链接中 `hm.js?` 后边的字符串
 
  # Baidu analytics, get the string behind `hm.js?`
 
  # See: 百度统计——一站式智能数据分析与应用平台
 
  baidu:
 
  # Google 统计的 Tracking ID
 
  # Google analytics, set Tracking ID
 
  # See: https://developers.google.com/analytics/devguides/collection/analyticsjs
 
  google:
 
  # Google gtag.js 的媒体资源 ID
 
  # Google gtag.js GA_MEASUREMENT_ID
 
  # See: https://developers.google.com/analytics/devguides/collection/gtagjs/
 
  gtag:
 
  # 腾讯统计的 H5 App ID，开启高级功能才有cid
 
  # Tencent analytics, set APP ID
 
  # See: https://mta.qq.com/h5/manage/ctr_app_manage
 
  tencent:
 
    sid:
 
    cid:
 
  # 51.la 站点统计 ID
 
  # 51.la analytics
 
  # See: 51LA用户中心
 
  woyaola:  # 51.la 站点统计 ID，参见
 
  # 友盟/cnzz 站点统计 web_id
 
  # cnzz analytics
 
  # See: https://web.umeng.com/main.php?c=site&a=show
 
  cnzz:
 
  # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
 
  # LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
 
  leancloud:
 
    app_id:
 
    app_key:
 
    # REST API 服务器地址，国际版不填
 
    # Only the Chinese mainland users need to set
 
    server_url:
 
    # 统计页面时获取路径的属性
 
    # Get the attribute of the page path during statistics
 
    path: window.location.pathname
 
    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
 
    # If true, ignore localhost & 127.0.0.1
 
    ignore_local: false
 
# 对页面中的图片和评论插件进行懒加载处理，可见范围外的元素不会提前加载
 
# Lazy loading of images and comment plugin on the page
 
lazyload:
 
  enable: true
 
  # 加载时的占位图片
 
  # The placeholder image when loading
 
  loading_img: /img/loading.gif
 
  # 开启后懒加载仅在文章页生效，如果自定义页面需要使用，可以在 Front-matter 里指定 `lazyload: true`
 
  # If true, only enable lazyload on the post page. For custom pages, you can set 'lazyload: true' in front-matter
 
  onlypost: false
 
  # 触发加载的偏移倍数，基数是视窗高度，可根据部署环境的请求速度调节
 
  # The factor of viewport height that triggers loading
 
  offset_factor: 2
 
# 图标库，包含了大量社交类图标，主题依赖的不包含在内，因此可自行修改，详见 图标 | Hexo Fluid 用户手册
 
# Icon library, which includes many social icons, does not include those theme dependent, so your can modify link by yourself. See: Icons | Hexo Fluid Docs
 
iconfont: //at.alicdn.com/t/font_1736178_lbnruvf0jn.css
 
#---------------------------
 
# 页头
 
# Header
 
#---------------------------
 
# 导航栏的相关配置
 
# Navigation bar
 
navbar:
 
  # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
 
  # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
 
  blog_title: "Fluid"
 
  # 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效
 
  # Navigation bar frosted glass special animation. It is an experimental feature
 
  ground_glass:
 
    enable: false
 
    # 模糊像素，只能为数字，数字越大模糊度越高
 
    # Number of blurred pixel. the larger the number, the higher the blur
 
    px: 3
 
    # 不透明度，数字越大透明度越低，注意透明过度可能看不清菜单字体
 
    # Ratio of opacity, 1.0 is completely opaque
 
    # available: 0 - 1.0
 
    alpha: 0.7
 
  # 导航栏菜单，可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
 
  # Navigation bar menu. `key` is used to associate languages/*.yml. If there is no association, the value of `key` itself will be displayed; if `icon` is a css class, it can be omitted; adding `name` can force the display of the specified name
 
  menu:
 
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
 
    - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
 
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
 
    - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
 
    - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
 
    #- { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
 
# 搜索功能，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件
 
# Search feature, based on hexo-generator-search. If you have installed other search plugins, please disable this feature to avoid generating redundant index files
 
search:
 
  enable: true
 
  # 搜索索引文件的路径，可以是相对路径或外站的绝对路径
 
  # Path for search index file, it can be a relative path or an absolute path
 
  path: /local-search.xml
 
  # 文件生成在本地的位置，必须是相对路径
 
  # The location where the index file is generated locally, it must be a relative location
 
  generate_path: /local-search.xml
 
  # 搜索的范围
 
  # Search field
 
  # Options: post | page | all
 
  field: post
 
  # 搜索是否扫描正文
 
  # If true, search will scan the post content
 
  content: true
 
# 首屏图片的相关配置
 
# Config of the big image on the first screen
 
banner:
 
  # 视差滚动，图片与板块会随着屏幕滚动产生视差效果
 
  # Scrolling parallax
 
  parallax: true
 
  # 图片最小的宽高比，以免图片两边被过度裁剪，适用于移动端竖屏时，如需关闭设为 0
 
  # Minimum ratio of width to height, applicable to the vertical screen of mobile device, if you need to close it, set it to 0
 
  width_height_ratio: 1.0
 
# 向下滚动的箭头
 
# Scroll down arrow
 
scroll_down_arrow:
 
  enable: true
 
  # 头图高度不小于指定比例，才显示箭头
 
  # Only the height of the banner image is greater than the ratio, the arrow is displayed
 
  # Available: 0 - 100
 
  banner_height_limit: 80
 
  # 翻页后自动滚动
 
  # Auto scroll after page turning
 
  scroll_after_turning_page: true
 
# 向顶部滚动的箭头
 
# Scroll top arrow
 
scroll_top_arrow:
 
  enable: true
 
# Open Graph metadata
 
# See: Helpers | Hexo
 
open_graph:
 
  enable: true
 
  twitter_card: summary_large_image
 
  twitter_id:
 
  twitter_site:
 
  google_plus:
 
  fb_admins:
 
  fb_app_id:
 
#---------------------------
 
# 页脚
 
# Footer
 
#---------------------------
 
footer:
 
  # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
 
  # HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
 
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
  '
 
  # 展示网站的 PV、UV 统计数
 
  # Display website PV and UV statistics
 
  statistics:
 
    enable: false
 
    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
 
    # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
 
    # Options: busuanzi | leancloud
 
    source: "busuanzi"
 
  # 国内大陆服务器的备案信息
 
  # For Chinese mainland website policy, other areas keep disable
 
  beian:
 
    enable: false
 
    # ICP证号
 
    icp_text: 京ICP证123456号
 
    # 公安备案号，不填则只显示ICP
 
    police_text: 京公网安备12345678号
 
    # 公安备案的编号，用于URL跳转查询
 
    police_code: 12345678
 
    # 公安备案的图片. 为空时不显示备案图片
 
    police_icon: /img/police_beian.png
 
#---------------------------
 
# 首页
 
# Home Page
 
#---------------------------
 
index:
 
  # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
 
  # Path of Banner image, can be a relative path or an absolute path, the same on other pages
 
  banner_img: /img/default.png
 
  # 头图高度，屏幕百分比
 
  # Height ratio of banner image
 
  # Available: 0 - 100
 
  banner_img_height: 100
 
  # 头图黑色蒙版的不透明度，available: 0 - 1.0， 1 是完全不透明
 
  # Opacity of the banner mask, 1.0 is completely opaque
 
  # Available: 0 - 1.0
 
  banner_mask_alpha: 0.3
 
  # 首页副标题的独立设置
 
  # Independent config of home page subtitle
 
  slogan:
 
    enable: true
 
    # 为空则按 hexo config.subtitle 显示
 
    # If empty, text based on `subtitle` in hexo config
 
    text: "An elegant Material-Design theme for Hexo"
 
    # 通过 API 接口作为首页副标题的内容，必须返回的是 JSON 格式，如果请求失败则按 text 字段显示，该功能必须先开启 typing 打字机功能
 
    # Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
 
    api:
 
      enable: false
 
      # 请求地址
 
      # Request url
 
      url: ""
 
      # 请求方法
 
      # Request method
 
      # Available: GET | POST | PUT
 
      method: "GET"
 
      # 请求头
 
      # Request headers
 
      headers: {}
 
      # 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
 
      # The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
 
      keys: []
 
  # 自动截取文章摘要
 
  # Auto extract post
 
  auto_excerpt:
 
    enable: true
 
  # 打开文章的标签方式
 
  # The browser tag to open the post
 
  # Available: _blank | _self
 
  post_url_target: _self
 
  # 是否显示文章信息（时间、分类、标签）
 
  # Meta information of post
 
  post_meta:
 
    date: true
 
    category: true
 
    tag: true
 
  # 文章通过 sticky 排序后，在首页文章标题前显示图标
 
  # If the posts are sorted by `sticky`, an icon is displayed in front of the post title
 
  post_sticky:
 
    enable: true
 
    icon: "iconfont icon-top"
 
#---------------------------
 
# 文章页
 
# Post Page
 
#---------------------------
 
post:
 
  banner_img: /img/default.png
 
  banner_img_height: 70
 
  banner_mask_alpha: 0.3
 
  # 文章在首页的默认封面图，当没有指定 index_img 时会使用该图片，若两者都为空则不显示任何图片
 
  # Path of the default post cover when `index_img` is not set. If both are empty, no image will be displayed
 
  default_index_img:
 
  # 文章标题下方的元信息
 
  # Meta information below title
 
  meta:
 
    # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
 
    # Author, based on `author` field in front-matter, if not set, based on `author` value in hexo config
 
    author:
 
      enable: false
 
    # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
 
    # Post date, based on `date` field in front-matter, if not set, based on create date of .md file
 
    date:
 
      enable: true
 
      # 格式参照 ISO-8601 日期格式化
 
      # ISO-8601 date format
 
      # See: 文档 | Moment.js 中文网
 
      format: "LL a"
 
    # 字数统计
 
    # Word count
 
    wordcount:
 
      enable: true
 
    # 估计阅读全文需要的时长
 
    # Estimated reading time
 
    min2read:
 
      enable: true
 
      # 每个字词的长度，建议：中文≈2，英文≈5，中英混合可自行调节
 
      # Average word length (chars count in word), ZH ≈ 2, EN ≈ 5
 
      awl: 2
 
      # 每分钟阅读字数，如果大部分是技术文章可适度调低
 
      # Words per minute
 
      wpm: 60
 
    # 浏览量计数
 
    # Number of visits
 
    views:
 
      enable: false
 
      # 统计数据来源
 
      # Data Source
 
      # Options: busuanzi | leancloud
 
      source: "busuanzi"
 
  # 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
 
  # Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
 
  updated:
 
    enable: false
 
    # 格式参照 ISO-8601 日期格式化
 
    # ISO-8601 date format
 
    # See: 文档 | Moment.js 中文网
 
    date_format: "LL a"
 
    # 是否使用相对时间表示，比如："3 天前"
 
    # If true, it will be a relative time, such as: "3 days ago"
 
    relative: false
 
    # 提示标签类型
 
    # Note class
 
    # Options: default | primary | info | success | warning | danger | light
 
    note_class: info
 
  # 侧边栏展示当前分类下的文章
 
  # Sidebar of category
 
  category_bar:
 
    enable: true
 
    # 开启后，只有在文章 Front-matter 里指定 `category_bar: true` 才会展示分类，也可以通过 `category_bar: ["分类A"]` 来指定分类
 
    # If true, only set `category_bar: true` in Front-matter will enable sidebar of category, also set `category_bar: ["CategoryA"]` to specify categories
 
    specific: true
 
    # 置于板块的左侧或右侧
 
    # place in the board
 
    # Options: left | right
 
    placement: left
 
    # 文章的排序字段，前面带减号是倒序，不带减号是正序
 
    # Sort field for posts, with a minus sign is reverse order
 
    # Options: date | title | or other field of front-matter
 
    post_order_by: "title"
 
    # 单个分类中折叠展示文章数的最大值，超过限制会显示 More，0 则不限制
 
    # The maximum number of posts in a single category. If the limit is exceeded, it will be displayed More. If 0 no limit
 
    post_limit: 0
 
  # 侧边栏展示文章目录
 
  # Table of contents (TOC) in the sidebar
 
  toc:
 
    enable: true
 
    # 置于板块的左侧或右侧
 
    # place in the board
 
    # Options: left | right
 
    placement: right
 
    # 目录会选择这些节点作为标题
 
    # TOC will select these nodes as headings
 
    headingSelector: "h1,h2,h3,h4,h5,h6"
 
    # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在下级标题则默认展开
 
    # Collapse depth. If 0, all headings collapsed. If greater than 0, it will be expanded by default if there are sub headings
 
    collapseDepth: 0
 
  # 版权声明，会显示在每篇文章的结尾
 
  # Copyright, will be displayed at the end of each post
 
  copyright:
 
    enable: true
 
    # CreativeCommons license
 
    # Options: BY | BY-SA | BY-ND | BY-NC | BY-NC-SA | BY-NC-ND
 
    license: 'BY'
 
    # 显示作者
 
    author:
 
      enable: true
 
    # 显示发布日期
 
    # Show post date
 
    post_date:
 
      enable: true
 
      format: "LL"
 
    # 显示更新日期
 
    # Show update date
 
    update_date:
 
      enable: false
 
      format: "LL"
 
  # 文章底部上一篇下一篇功能
 
  # Link to previous/next post
 
  prev_next:
 
    enable: true
 
  # 文章图片标题
 
  # Image caption
 
  image_caption:
 
    enable: true
 
  # 文章图片可点击放大
 
  # Zoom feature of images
 
  image_zoom:
 
    enable: true
 
    # 放大后图片链接替换规则，可用于将压缩图片链接替换为原图片链接，如 ['-slim', ''] 是将链接中 `-slim` 移除；如果想使用正则请使用 `re:` 前缀，如 ['re:\\d{3,4}\\/\\d{3,4}\\/', '']
 
    # The image url replacement when zooming, the feature can be used to replace the compressed image to the original image, eg: ['-slim', ''] removes `-slim` from the image url when zooming; if you want to use regular, use prefix `re:`, eg: ['re:\\d{3,4}\\/\\d{3,4}\\/','']
 
    img_url_replace: ['', '']
 
  # 脚注语法，会在文章底部生成脚注，如果 Markdown 渲染器本身支持，则建议关闭，否则可能会冲突
 
  # Support footnote syntax, footnotes will be generated at the bottom of the post page. If the Markdown renderer itself supports it, please disable it, otherwise it may conflict
 
  footnote:
 
    enable: true
 
    # 脚注的节标题，也可以在 front-matter 中通过 `footnote: <h2>Reference</h2>` 这种形式修改单独页面的 header
 
    # The section title of the footnote, you can also modify the header of a single page in the form of `footnote: <h2>Reference</h2>` in front-matter
 
    header: ''
 
  # 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见：https://hexo.fluid-dev.com/docs/guide/##latex-数学公式
 
  # Mathematical formula. If enable, you need to change the Markdown renderer, see: Guide | Hexo Fluid Docs
 
  math:
 
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
 
    # If you want to use math on the custom page, you need to set `math: true` in Front-matter
 
    enable: false
 
    # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
 
    # If true, only set `math: true` in Front-matter will enable math, to load faster when the page does not contain math
 
    specific: false
 
    # Options: mathjax | katex
 
    engine: mathjax
 
  # 流程图，基于 mermaid-js，具体请见：https://hexo.fluid-dev.com/docs/guide/#mermaid-流程图
 
  # Flow chart, based on mermaid-js, see: Guide | Hexo Fluid Docs
 
  mermaid:
 
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`
 
    # If you want to use mermaid on the custom page, you need to set `mermaid: true` in Front-matter
 
    enable: false
 
    # 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
 
    # If true, only set `mermaid: true` in Front-matter will enable mermaid, to load faster when the page does not contain mermaid
 
    specific: false
 
    # See: mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
 
    options: { theme: 'default' }
 
  # 评论插件
 
  # Comment plugin
 
  comments:
 
    enable: false
 
    # 指定的插件，需要同时设置对应插件的必要参数
 
    # The specified plugin needs to set the necessary parameters at the same time
 
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
 
    type: disqus
 
#---------------------------
 
# 评论插件
 
# Comment plugins
 
#
 
# 开启评论需要先设置上方 `post: comments: enable: true`，然后根据 `type` 设置下方对应的评论插件参数
 
# Enable comments need to be set `post: comments: enable: true`, then set the corresponding comment plugin parameters below according to `type`
 
#---------------------------
 
# Utterances
 
# 基于 GitHub Issues
 
# Based on GitHub Issues
 
# See: https://utteranc.es
 
utterances:
 
  repo:
 
  issue_term: pathname
 
  label: utterances
 
  theme: github-light
 
  theme_dark: github-dark
 
# Disqus
 
# 基于第三方的服务，国内用户直接使用容易被墙，建议配合 Disqusjs
 
# Based on third-party service
 
# See: https://disqus.com
 
disqus:
 
  shortname:
 
  # 以下为 Disqusjs 支持, 国内用户如果想使用 Disqus 建议配合使用
 
  # The following are Disqusjs configurations, please ignore if DisqusJS is not required
 
  # See: GitHub - SukkaW/DisqusJS: Render Disqus comments in Mainland China using Disqus API
 
  disqusjs: false
 
  apikey:
 
# Gitalk
 
# 基于 GitHub Issues
 
# Based on GitHub Issues
 
# See: https://github.com/gitalk/gitalk#options
 
gitalk:
 
  clientID:
 
  clientSecret:
 
  repo:
 
  owner:
 
  admin: ['name']
 
  language: zh-CN
 
  labels: ['Gitalk']
 
  perPage: 10
 
  pagerDirection: last
 
  distractionFreeMode: false
 
  createIssueManually: true
 
  # 默认 proxy 可能会失效，解决方法请见下方链接
 
  # The default proxy may be invalid, refer to the links for solutions
 
  # https://github.com/gitalk/gitalk/issues/429
 
  # https://github.com/Zibri/cloudflare-cors-anywhere
 
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
 
# Valine
 
# 基于 LeanCloud
 
# Based on LeanCloud
 
# See: 介绍 | Valine 一款快速、简洁且高效的无后端评论系统。
 
valine:
 
  appId:
 
  appKey:
 
  path: window.location.pathname
 
  placeholder:
 
  avatar: 'retro'
 
  meta: ['nick', 'mail', 'link']
 
  requiredFields: []
 
  pageSize: 10
 
  lang: 'zh-CN'
 
  highlight: false
 
  recordIP: false
 
  serverURLs: ''
 
  emojiCDN:
 
  emojiMaps:
 
  enableQQ: false
 
# Waline
 
# 从 Valine 衍生而来，额外增加了服务端和多种功能
 
# Derived from Valine, with self-hosted service and new features
 
# See: Waline | Waline
 
waline:
 
  serverURL: ''
 
  path: window.location.pathname
 
  meta: ['nick', 'mail', 'link']
 
  requiredMeta: ['nick']
 
  lang: 'zh-CN'
 
  emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
 
  dark: 'html[data-user-color-scheme="dark"]'
 
  wordLimit: 0
 
  pageSize: 10
 
# 畅言 Changyan
 
# 基于第三方的服务
 
# Based on third-party service, insufficient support for regions outside China
 
# 畅言云评 - 专业的社会化评论系统
 
changyan:
 
  appid: ''
 
  appkey: ''
 
# 来必力 Livere
 
# 基于第三方的服务
 
# Based on third-party service
 
# See: Welcome to LiveRe.com
 
livere:
 
  uid: ''
 
# Remark42
 
# 需要自托管服务端
 
# Based on self-hosted service
 
# See: Remark42 – Privacy-focused lightweight commenting engine | Remark42
 
remark42:
 
  host:
 
  site_id:
 
  max_shown_comments: 10
 
  locale: zh
 
  components: ['embed']
 
# Twikoo
 
# 基于腾讯云开发
 
# Based on Tencent CloudBase
 
# See: Twikoo 文档
 
twikoo:
 
  envId:
 
  region: ap-shanghai
 
  path: window.location.pathname
 
# Cusdis
 
# 基于第三方服务或自托管服务
 
# Based on third-party or self-hosted service
 
# See Cusdis - Lightweight, privacy-first, open-source comment system
 
cusdis:
 
  host:
 
  app_id:
 
  lang: zh-cn
 
# Giscus
 
# 基于 GitHub Discussions，类似于 Utterances
 
# Based on GitHub Discussions, similar to Utterances
 
# See: giscus
 
giscus:
 
  repo:
 
  repo-id:
 
  category:
 
  category-id:
 
  theme-light: light
 
  theme-dark: dark
 
  mapping: pathname
 
  reactions-enabled: 1
 
  emit-metadata: 0
 
  input-position: top
 
  lang: zh-CN
 
#---------------------------
 
# 归档页
 
# Archive Page
 
#---------------------------
 
archive:
 
  banner_img: /img/default.png
 
  banner_img_height: 60
 
  banner_mask_alpha: 0.3
 
#---------------------------
 
# 分类页
 
# Category Page
 
#---------------------------
 
category:
 
  enable: true
 
  banner_img: /img/default.png
 
  banner_img_height: 60
 
  banner_mask_alpha: 0.3
 
  # 分类的排序字段，前面带减号是倒序，不带减号是正序
 
  # Sort field for categories, with a minus sign is reverse order
 
  # Options: length | name
 
  order_by: "-length"
 
  # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在子分类则默认展开
 
  # Collapse depth. If 0, all posts collapsed. If greater than 0, it will be expanded by default if there are subcategories
 
  collapse_depth: 0
 
  # 文章的排序字段，前面带减号是倒序，不带减号是正序
 
  # Sort field for posts, with a minus sign is reverse order
 
  # Options: date | title | or other field of front-matter
 
  post_order_by: "-date"
 
  # 单个分类中折叠展示文章数的最大值，超过限制会显示 More，0 则不限制
 
  # The maximum number of posts in a single category. If the limit is exceeded, it will be displayed More. If 0 no limit
 
  post_limit: 10
 
#---------------------------
 
# 标签页
 
# Tag Page
 
#---------------------------
 
tag:
 
  enable: true
 
  banner_img: /img/default.png
 
  banner_img_height: 80
 
  banner_mask_alpha: 0.3
 
  tagcloud:
 
    min_font: 15
 
    max_font: 30
 
    unit: px
 
    start_color: "#BBBBEE"
 
    end_color: "#337ab7"
 
#---------------------------
 
# 关于页
 
# About Page
 
#---------------------------
 
about:
 
  enable: true
 
  banner_img: /img/default.png
 
  banner_img_height: 60
 
  banner_mask_alpha: 0.3
 
  avatar: /img/avatar.png
 
  name: "Fluid"
 
  intro: "An elegant theme for Hexo"
 
  # 更多图标可从 图标 | Hexo Fluid 用户手册 查找，`class` 代表图标的 css class，添加 `qrcode` 后，图标不再是链接而是悬浮二维码
 
  # More icons can be found from Icons | Hexo Fluid Docs  `class` is the css class of the icon. If adding `qrcode`, The icon is no longer a link, but a hovering QR code
 
  icons:
 
    - { class: "iconfont icon-github-fill", link: "https://github.com", tip: "GitHub" }
 
    - { class: "iconfont icon-douban-fill", link: "豆瓣", tip: "豆瓣" }
 
    - { class: "iconfont icon-wechat-fill", qrcode: "/img/favicon.png" }
 
#---------------------------
 
# 自定义页
 
# Custom Page
 
#
 
# 通过 hexo new page 命令创建的页面
 
# Custom Page through `hexo new page`
 
#---------------------------
 
page:
 
  banner_img: /img/default.png
 
  banner_img_height: 60
 
  banner_mask_alpha: 0.3
 
#---------------------------
 
# 404页
 
# 404 Page
 
#---------------------------
 
page404:
 
  enable: true
 
  banner_img: /img/default.png
 
  banner_img_height: 85
 
  banner_mask_alpha: 0.3
 
  # 重定向到首页的延迟(毫秒)
 
  # Delay in redirecting to home page (milliseconds)
 
  redirect_delay: 5000
 
#---------------------------
 
# 友链页
 
# Links Page
 
#---------------------------
 
links:
 
  enable: true
 
  banner_img: /img/default.png
 
  banner_img_height: 60
 
  banner_mask_alpha: 0.3
 
  # 友链的成员项
 
  # Member item of page
 
  items:
 
    - {
 
      title: "Fluid Blog",
 
      intro: "主题博客",
 
      link: "Hexo Theme Fluid",
 
      avatar: "/img/favicon.png"
 
    }
 
    - {
 
      title: "Fluid Docs",
 
      intro: "主题使用指南",
 
      link: "Hexo Fluid 用户手册",
 
      avatar: "/img/favicon.png"
 
    }
 
    - {
 
      title: "Fluid Repo",
 
      intro: "主题 GitHub 仓库",
 
      link: "https://github.com/fluid-dev/hexo-theme-fluid",
 
      avatar: "/img/favicon.png"
 
    }
 
  # 当成员头像加载失败时，替换为指定图片
 
  # When the member avatar fails to load, replace the specified image
 
  onerror_avatar: /img/avatar.png
 
  # 友链下方自定义区域，支持 HTML，可插入例如申请友链的文字
 
  # Custom content at the bottom of the links
 
  custom:
 
    enable: false
 
    content: '<hr><p>在下方留言申请加入我的友链，按如下格式提供信息：</p><ul><li>博客名：Fluid</li><li>简介：Fluid 主题官方博客</li><li>链接：https://hexo.fluid-dev.com</li><li>图片：https://hexo.fluid-dev.com/img/favicon.png</li></ul>'
 
  # 评论插件
 
  # Comment plugin
 
  comments:
 
    enable: false
 
    # 指定的插件，需要同时设置对应插件的必要参数
 
    # The specified plugin needs to set the necessary parameters at the same time
 
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
 
    type: disqus
 
#---------------------------
 
# 以下是配置 JS CSS 等静态资源的 URL 前缀，可以自定义成 CDN 地址，
 
# 如果需要修改，最好使用与默认配置相同的版本，以避免潜在的问题，
 
# ** 如果你不知道如何设置，请不要做任何改动 **
 
#
 
# Here is the url prefix to configure the static assets. Set CDN addresses you want to customize.
 
# Be aware that you would better use the same version as default ones to avoid potential problems.
 
# DO NOT EDIT THE FOLLOWING SETTINGS UNLESS YOU KNOW WHAT YOU ARE DOING
 
#---------------------------
 
static_prefix:
 
  # 内部静态
 
  # Internal static
 
  internal_js: /js
 
  internal_css: /css
 
  internal_img: /img
 
  anchor: https://lib.baomitu.com/anchor-js/4.3.1/
 
  github_markdown: https://lib.baomitu.com/github-markdown-css/4.0.0/
 
  jquery: https://lib.baomitu.com/jquery/3.6.0/
 
  bootstrap: https://lib.baomitu.com/twitter-bootstrap/4.6.1/
 
  prismjs: https://lib.baomitu.com/prism/1.27.0/
 
  tocbot: https://lib.baomitu.com/tocbot/4.18.2/
 
  typed: https://lib.baomitu.com/typed.js/2.0.12/
 
  fancybox: https://lib.baomitu.com/fancybox/3.5.7/
 
  nprogress: https://lib.baomitu.com/nprogress/0.2.0/
 
  mathjax: https://lib.baomitu.com/mathjax/3.2.1/
 
  katex: https://lib.baomitu.com/KaTeX/0.15.6/
 
  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/
 
  clipboard: https://lib.baomitu.com/clipboard.js/2.0.10/
 
  mermaid: https://lib.baomitu.com/mermaid/8.14.0/
 
  valine: https://lib.baomitu.com/valine/1.4.17/
 
  waline: https://lib.baomitu.com/waline/2.5.1/
 
  gitalk: https://lib.baomitu.com/gitalk/1.7.2/
 
  disqusjs: https://lib.baomitu.com/disqusjs/1.3.0/
 
  twikoo: https://lib.baomitu.com/twikoo/1.5.11/
 
  hint: https://lib.baomitu.com/hint.css/2.7.0/
 
​

在 hexo 目录下找到并修改 _config.yml 文件：

theme: fluid  # 指定主题
 
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

尝试新建博客中的 关于我 页面，在hexo 目录下执行：

hexo new page about

建成功后，编辑博客目录下 /source/about/index.md，这里添加 layout 属性。

---
 
title: about
 
layout: about
 
---
 
 
 
这里写关于页的正文，支持 Markdown, HTML

6、发布：

修改 hexo 目录下的_config.yml 文件：

位置：

修改 _config.yml 文件里面的deploy：

​
deploy:
 
  type: git
 
  repo: https://github.com/Yourname/Yourname.github.io.git
 
  branch: main
 
​

PS:

        repo 这里采用https方式；如果需要采用 git方式则需要在github中上传ssh key。

        branch 需要修改，保持和仓库中的相同。这里是 main

安装发布插件：

npm install hexo-deployer-git –save

在 hexo 目录下 ，CMD中输入

hexo clean //清除缓存文件 db.json 和已生成的静态文件 public
 
hexo generate //生成网站静态文件到默认设置的 public 文件夹
 
hexo deploy //自动生成网站静态文件，并部署到设定的仓库。

过程中会提示你输入账号名和密码，Username是你的Github账号名称，而不是邮箱；Password就是你的Github的密码。

发布成功的状态：

此时 在浏览器中输入 Yourname.github.io 即可访问创建好的站点了。

尝试新建文章，在 hexo 目录下执行：

hexo new "my-article-title"

会在 /source/_posts 中新建一个以 my-article-title.md 为名字的markdown文件，编辑这个文件之后再一次部署，过几分钟就可以看到博客的更新了。

hexo 目录下执行：

 hexo clean
 
 hexo deploy

Tips：

   hexo 命令缩写：

hexo g == hexo generate 
 
hexo d == hexo deploy
 
hexo s == hexo server
 
hexo n == hexo new