0%

Hexo搭建站点

Hexo搭建站点

hexo官方网站

准备

  1. Github新建仓库,命名为 {username}.github.io
  2. 安装Node.js,安装Stable版本。
  3. 安装Hexo-cli,即Hexo的命令行工具。

    1
    npm install -g hexo-cli

初始化

  1. 创建项目,进入创建的文件夹

    1
    2
    hexo init {name}
    cd {name}
  2. 启动项目

    1
    hexo server

    显示如下界面,浏览器打开 http://localhost:4000/查看博客站点

    image-20231105181105552

  3. 编译部署项目

    修改根目录的 _config.yml文件,修改Deployment部分为新建仓库的地址,修改分支为master

    1
    2
    3
    4
    deploy:
    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
    5
    hexo clean

    hexo generate

    hexo deploy

    控制台输入 sh deploy.sh,编译部署项目,Hexo会把编译后的静态内容上传到 master分支

  4. Github新建 source分支放置源码

    1
    2
    3
    4
    5
    6
    git 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

主站配置

  1. 修改 _config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: MY BLOG
    subtitle: ""
    description: ""
    keywords: Javascript
    author: HJL
    language: zh-CN
    timezone: ""
  2. 延迟发布,手动指定日期晚于当前时间不会生成

    1
    future: false
  3. 归档页面删除分页效果

    1
    2
    archive_generator:
    per_page: 0
  4. 指定文件夹跳过渲染,在根目录source中创建html文件夹即可放置html文件

    1
    2
    skip_render:
    - "html/**"

主题配置-Next

  1. 下载Next源码到Themes文件夹中

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  2. 根目录_config.yml 文件,修改 theme字段

    1
    theme: next
  3. themes/next目录下 _config.yml 文件

    • 布局样式:scheme,选择一种取消注释:

      1
      2
      3
      4
      # scheme: Muse
      #scheme: Mist
      scheme: Pisces
      #scheme: Gemini
    • Favicon: 图片转为图标网站,图标下载后放置在 themes/next/source/images文件夹,并配置favicon:

      1
      2
      3
      4
      5
      6
      7
      favicon:
      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
      8
      avatar:
      # 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: true
    • Back2top:快速返回文章顶部,enable开启,sidebar配置侧边栏,scrollpercent配置阅读百分比:

      1
      2
      3
      4
      5
      6
      back2top:
      enable: true
      # Back to top in sidebar.
      sidebar: false
      # Scroll percent label in b2t button.
      scrollpercent: true
    • Reading_progress:显示阅读进度,上方显示进度条:

      1
      2
      3
      4
      5
      6
      reading_progress:
      enable: true
      # Available values: top | bottom
      position: top
      color: "#37c6c0"
      height: 3px
    • Github_banner:页面右上角跳转到Github仓库

      1
      2
      3
      4
      github_banner:
      enable: true
      permalink: https://github.com/xxx
      title: Follow me on GitHub
    • Local_search:搜索功能

      安装插件 hexo-generator-searchdb

      1
      npm install hexo-generator-searchdb --save

      根目录_config.yml文件配置搜索:

      1
      2
      3
      4
      5
      6
      search:
      path: search.xml
      field: post
      content: true
      format: html
      limit: 10000

      themes/next目录下_config.yml文件配置搜索:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      local_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: false
    • Custom_file_path:自定义文件路径,例如,在根目录 source/_data创建 styles.styl文件,在该文件自定义修改网站的css:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      custom_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.styl
    • powered:去掉footer中Hexo与Next强力驱动文字

      1
      2
      # Powered by Hexo & NexT
      powered: false
    • busuanzi_count:不蒜子访客统计

      1
      2
      3
      4
      5
      6
      7
      8
      busuanzi_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-eye
    • Reward:打赏功能,将图片放到source/images中即可

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      reward_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.png
    • fancybox:点击图片时放大该图片,并且可以快速浏览当前文章的所有图片

      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

新建内容

  1. 新建文章:创建的文章在目录 source/_posts文件夹下,MarkDown格式

    1
    hexo new xxx

    文章开头采用如下格式添加信息:

    1
    2
    3
    4
    5
    6
    title: 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即可

  2. 新建分类:

    新建分类页面,生成 /source/categories/index.md文件

    1
    hexo new page categories

    Front Matter中添加 type: categories

    1
    2
    3
    4
    title: categories
    date: 2023-11-06 17:21:15
    type: "categories"
    comments: false

    创建文章的Front Matter中设置分类

    • 一级分类

      1
      2
      categories: 
      - FE
    • 二级分类

      1
      2
      3
      categories: 
      - FE
      - CSS
  3. 新建标签

    新建标签页,生成 /source/tags/index.md文件

    1
    hexo new page tags

    Front Matter中添加 type: tags:

    1
    2
    3
    4
    title: tags
    date: 2023-11-04 15:45:29
    type: "tags"
    comments: false

    修改主题_config.yml文件,配置Tags和categories

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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
    #schedule: /schedule/ || fa fa-calendar
    #sitemap: /sitemap.xml || fa fa-sitemap
    #commonweal: /404/ || fa fa-heartbeat

    清除无用的标签:

    1
    hexo clean