MY BLOG
0%

Hexo搭建站点

发表于 更新于 分类于
本文字数： 5.1k 阅读时长 ≈ 9 分钟

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