Hexo搭建站点

hexo官方网站

准备

0. Github新建仓库，命名为 {username}.github.io

1. 安装Node.js，安装Stable版本。

2. 安装Hexo-cli，即Hexo的命令行工具。

   npm install -g hexo-cli
   

初始化

0. 创建项目，进入创建的文件夹

   hexo init {name}
   cd {name}
   

1. 启动项目

   hexo server
   

   浏览器打开 http://localhost:4000/查看博客站点

2. 编译部署项目

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

   deploy:
     type: "git"
     repo: "git@github.com:xxx/xxx.github.io.git"
     branch: master
   

   安装git部署插件 hexo-deployer-git

   npm install hexo-deployer-git --save
   

   根目录创建文件 deploy.sh，内容如下：

   hexo clean
   ​
   hexo generate
   ​
   hexo deploy
   

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

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

   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
   

主站配置

0. 修改 _config.yml文件

   # Site
   title: MY BLOG
   subtitle: ""
   description: ""
   keywords: Javascript
   author: HJL
   language: zh-CN
   timezone: ""
   

1. 延迟发布，手动指定日期晚于当前时间不会生成

   future: false
   

2. 归档页面删除分页效果

   archive_generator:
     per_page: 0
   

3. 指定文件夹跳过渲染，在根目录source中创建html文件夹即可放置html文件

   skip_render:
     - "html/**"
   

主题配置-Next

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

   git clone https://github.com/theme-next/hexo-theme-next themes/next
   

1. 根目录下 _config.yml 文件，修改 theme字段

   theme: next
   

2. themes/next目录下 _config.yml 文件

   • 布局样式：scheme，选择一种取消注释：

     # scheme: Muse
     #scheme: Mist
     scheme: Pisces
     #scheme: Gemini
     

   • Favicon: 图片转为图标网站，图标下载后放置在 themes/next/source/images文件夹，并配置favicon：

     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旋转：

     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配置阅读百分比：

     back2top:
       enable: true
       # Back to top in sidebar.
       sidebar: false
       # Scroll percent label in b2t button.
       scrollpercent: true
     

   • Reading_progress：显示阅读进度，上方显示进度条：

     reading_progress:
       enable: true
       # Available values: top | bottom
       position: top
       color: "#37c6c0"
       height: 3px
     

   • Github_banner：页面右上角跳转到Github仓库

     github_banner:
       enable: true
       permalink: https://github.com/xxx
       title: Follow me on GitHub
     

   • Local_search：搜索功能

     安装插件 hexo-generator-searchdb：

     npm install hexo-generator-searchdb --save
     

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

     search:
       path: search.xml
       field: post
       content: true
       format: html
       limit: 10000
     

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

     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：

     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强力驱动文字

       # Powered by Hexo & NexT
       powered: false
     

   • busuanzi_count：不蒜子访客统计

     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中即可

     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：点击图片时放大该图片，并且可以快速浏览当前文章的所有图片

     # 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
     

   新建内容

   0. 新建文章：创建的文章在目录 source/_posts文件夹下，MarkDown格式

         hexo new xxx
      

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

         title: Hexo构建
         date: 2023-11-04 20:01:20
         tags: 
         -Hexo
         categories:
         -Hexo
      

      检查Next主题的_config.yml中简介设置打开：(默认安装时打开)

      # Automatically excerpt description in homepage as preamble text.
      excerpt_description: true
      

      在文章中添加截断，只有截断之前的内容才会在列表页展示

      <!--more-->
      

      点击“阅读全文”按钮跳转后，会自动定位到more标签的位置，如果想要取消定位，

      在themes/next/layout/_macro/post.swig中去除#more即可

      隐藏文章：在Font-Matter中添加published: false即可

   1. 新建分类：

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

      hexo new page categories
      

      Front Matter中添加 type: categories

      title: categories
      date: 2023-11-06 17:21:15
      type: "categories"
      comments: false
      

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

      • 一级分类

        categories: 
        - FE
        

      • 二级分类

        categories: 
        - FE
        - CSS
        

   2. 新建标签

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

      hexo new page tags
      

      Front Matter中添加 type: tags:

      title: tags
      date: 2023-11-04 15:45:29
      type: "tags"
      comments: false
      

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

      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
      

      清除无用的标签：

      hexo clean