• Hexo 静态博客 我的新博客


    欢迎访问我的新博客:
    内容持续更新 https://www.oikiou.top/

    静态网页

    静态网页生成器

    Jekyll(由 Github 构建的用于为其 Github 页面提供支持的 Ruby 生成器)、

    Hugo(构建在 Go 编程之上的极快静态生成器)语言)和

    Hexo(基于 Node.js 的快速网站生成器)。

    参考

    How to Choose the Right Static Generator: Jekyll vs. Hugo vs. Hexo

    StackShare

    Hexo

    TBD

    Jekyll

    TBD

    Hugo

    TBD

    Hexo

    Hexo 部署

    HEXO文档_参考链接

    要求:

    Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
    Git
    
    • 1
    • 2

    部署:

    npm install hexo-cli -g
    hexo init blog
    cd blog
    npm install
    hexo server
    
    • 1
    • 2
    • 3
    • 4
    • 5

    Hexo CMD

    Init 初始化

    hexo init [folder]
    
    • 1

    新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

    new 新建

    hexo new [layout] <title>
    hexo new "post title with whitespace"
    hexo new page --path about/me "About me"
    hexo new page -p     about/me "About me"
    
    • 1
    • 2
    • 3
    • 4
    参数描述
    -p, --path自定义新文章的路径
    -r, --replace如果存在同名文章,将其替换
    -s, --slug文章的 Slug,作为新文章的文件名和发布后的 URL

    generate 生成

    # 生成静态文件。
    hexo generate
    # 该命令可以简写为
    hexo g
    
    • 1
    • 2
    • 3
    • 4
    选项描述
    -d–deploy文件生成后立即部署网站
    -w–watch监视文件变动
    -b–bail生成过程中如果发生任何未处理的异常则抛出异常
    -f–force强制重新生成文件 Hexo 引入了差分机制,
    如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。
    使用该参数的效果接近 hexo clean && hexo generate
    -c–concurrency最大同时生成文件的数量,默认无限制

    publish 草稿

    hexo publish [layout] 
    
    • 1

    发表草稿。

    server 服务器

    在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器

    hexo server
    hexo s
    
    • 1
    • 2

    启动服务器。默认情况下,访问网址为: http://localhost:4000/

    选项描述
    -p, --port重设端口
    -s, --static只使用静态文件(不会更新)
    -l, --log启动日记记录,使用覆盖记录格式
    -ihexo server -i 192.168.1.1 指定监听的IP

    deploy 部署

    # 部署网站。
    hexo deploy
    # 该命令可以简写为:
    hexo d
    
    • 1
    • 2
    • 3
    • 4
    参数描述
    -g, --generate部署之前预先生成静态文件

    render

    hexo render  [file2] ...
    
    • 1

    渲染文件。

    参数描述
    -o, --output设置输出路径

    migrate

    hexo migrate 
    
    • 1

    从其他博客系统 迁移内容

    clean 清理

    $ hexo clean
    
    • 1

    清除缓存文件 (db.json) 和已生成的静态文件 (public)。

    在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

    list

    $ hexo list 
    
    • 1

    列出网站资料。

    Hexo _Config.yml

    Home page setting

    index_generator.order_by 文章的顺序

    • -date 默认情况下按日期降序排序(从新到旧)。
    • -update 按更新时间排序(- = 从新到旧)。

    Hexo Theme

    我是直接在github搜索 hexo theme看到了几个 star 比较多而且比较活跃的 repository

    • icarus 5.5K star

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VcIybtO9-1663510547982)(静态网页/68747470733a2f2f70706f66666963652e6769746875622e696f2f6865786f2d7468656d652d6963617275732f67616c6c6572792f707265766965772e706e673f31.png)]

    • fluid 4.8K star

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M9Nd5mGR-1663510547984)(静态网页/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f666c7569642d6465762f737461746963406d61737465722f6865786f2d7468656d652d666c7569642f73637265656e73686f74732f696e6465782e706e67.png)]

    • matery(blinkfox) 4.5K star

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l6ODH5Ms-1663510547985)(静态网页/687474703a2f2f7374617469632e626c696e6b666f782e636f6d2f6d61746572792d32303138313230322d312e706e67.png)]

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AH1zYdqi-1663510547985)(静态网页/687474703a2f2f7374617469632e626c696e6b666f782e636f6d2f6d61746572792d32303138313230322d332e706e67.png)]

    • butterfly 4.3K star

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0fBiBMUI-1663510547989)(静态网页/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6a65727279633132372f43444e406d322f696d672f7468656d652d627574746572666c792d726561646d652e706e67.png)]

    • volantis 1.5k star

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EToG6lmq-1663510547991)(静态网页/68747470733a2f2f692e6c6f6c692e6e65742f323032302f30332f31382f663550516c576973766d397a62674b2e6a7067.jpeg)]

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SsOHdgvM-1663510547992)(静态网页/68747470733a2f2f692e6c6f6c692e6e65742f323032302f30332f31382f585742476639354532743162646e6c2e6a7067.jpeg)]

    其中 fluidvolantis 最对我胃口, 最后选择的 fluid, 后期可能会改成volantis或者icarus试试看, 主要是喜欢简洁些, 又能有一定的观赏性的.

    Fluid

    参考文档

    https://hexo.fluid-dev.com/docs/guide/

    theme 的 Github

    https://github.com/fluid-dev/hexo-theme-fluid

    自带的内置图标库

    内置社交图标

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cCne4sK-1663510547994)(静态网页/iconfont.f8319467.png)]

    Hexo Note

    Hexo Permalink简化

    参考:

    Hexo Permalink简化

    Note:

    使用hexo-abbrlink插件实现

    # install
    npm install hexo-abbrlink --save
    # setting edit _config.yml
    permalink: posts/:abbrlink.html
    abbrlink:
      alg: crc32  # 算法:crc16(default) and crc32
      rep: hex    # 进制:dec(default) and hex
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    hexo 图片链接问题

    hexo本地图片显示问题

    使用hexo生成静态资源后,由于url的问题会出现图片加载的问题,现在网上的文章及官方的解决方案大概分为三种:

    1. 将图片放入source/images目录下,每次generate都会生成图片,在使用相对或绝对路径进行引用
    2. 配置hexo_config.yml文件, 将 post_asset_folder 设置为true, 这样每次new 生成一个文章时都会同步生成一个同名的文件夹,然后设置相对或绝对路径.
    3. 使用hexo官方的解决方案,使用模版变量, {% asset_img slug [title] %}
    4. !new!. hexo init的时候会自动copy一个插件 hexo-renderer-marked 这个插件可以开启相对路径的支持,但是需要改一些代码

    但是在配置过程中发现这三种方式都多多少少存在一些问题,前两中首页跟内容页会有一个加载失败的问题,而第三种则失去了markdown的意义.

    方法四:

    官方手册上提到过, hexo-renderer-marked 3.1.0已经开始支持相对路径了.但是可以看到它支持的路径似乎并不合理, 其他的md阅读器是不能识别这样的路径的.

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opOnnLl3-1663510547995)(静态网页/image-20220815153651988.png)]

    参考: https://github.com/hexojs/hexo-renderer-marked/issues/216

    1. 修改_config.yml

      post_asset_folder: true
      marked:
        prependRoot: true
        postAsset: true
      
      • 1
      • 2
      • 3
      • 4
    2. 修改文件node_modules\hexo-renderer-marked\lib\renderer.js

        if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
          if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
            const PostAsset = hexo.model('PostAsset');
            // findById requires forward slash
            // ***************** Add the following code *******************
            const fixPostPath = join(postPath, '../');
            const asset = PostAsset.findById(join(fixPostPath, href.replace(/\\/g, '/')));
            // const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
            // ************************** End *****************************
            // asset.path is backward slash in Windows
            if (asset) href = asset.path.replace(/\\/g, '/');
          }
          href = url_for.call(hexo, href);
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    1. enjoy it

    方法二:

    # 设置
    post_asset_folder:true
    # 安装插件 asset-image
    npm install https://github.com/CodeFalling/hexo-asset-image  --save
    # typora中设置图片为相对路径 看下图
    ./${filename}
    # 运行查看
    hexo clean && hexo generate && hexo s 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eoiBtGKh-1663510547996)(静态网页/image-20220815133503275.png)]

    注意

    Env:使用方法四

    • 文件名不能带有空格, title 可以带空格 (hexo new的时候需要注意这一点)
      • 修改 node_modules\hexo-renderer-marked\lib\renderer.js文件可能可以改善这点. -> TBD
    • md文件名要和图片等等资源文件夹同名 -> 注定了不能使用 ./${filename}.assets这种方案, 一定要改成./${filename}才行

    Hexo 跳过一些文件,不渲染某些文件

    搜索引擎确认网站所有权时往往会提供一个html文件来进行验证,要是这个文件被渲染了,验证自然就会失败了。或者,有时候会写一些简单的html示例页面或README.md,这也是不希望Hexo渲染的。因此有必要针对某个文件或者目录进行排除。

    Hexo博客的基本内容是一些Markdown文件,放在source/_post文件夹下,每个文件对应一篇文章。除此之外,放在source文件夹下的所有开头不是下划线的文件,在hexo generate的时候,都会被拷贝到public文件夹下。但是,Hexo默认会渲染所有的HTML和Markdown文件,导致我的README.md直接转成html格式了。。。

    怎么样避开这个坑呢?如果只有一个HTML文件的话,可以简单地在文件开头加上layout: false一行即可:

    layout: false
    ---
    
    
    ...
    
    • 1
    • 2
    • 3
    • 4
    • 5

    如果有多个要避开渲染的md文件,显然是不可能使用这种方法的。这时候需要使用skip_render配置。根据Hexo文档中的说明,通过在_config.yml配置文件中使用skip_render参数,可以跳过指定文件的渲染。使用方式如下:

    skip_render: [games/**, depview/**, knowledge/**]
    
    • 1

    这里的路径匹配可以使用正则表达式。

    **注意:skip_render参数设置的路径是相对于source目录的路径。**例如,需要跳过渲染source/README.md,只需要设置 skip_render:README.md

    在设置了跳过渲染之后,最好使用hexo clean清除以前的编译结果,保证配置生效。

    hexo 开启RSS订阅 feed atom

    基于hexo-generator-feed

    先安装这个包:

    npm install hexo-generator-feed
    
    • 1

    然后在在_config.yml文件中配置该插件

    feed:
        type: atom
        path: atom.xml
        limit: 20
        hub:
        content:
        content_limit:
        content_limit_delim: ' '
        order_by: -date
        icon: /images/favicon.png
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    参数的含义:

    • type: RSS的类型(atom/rss2)
    • path: 文件路径,默认是atom.xml/rss2.xml
    • limit: 展示文章的数量,使用0或则false代表展示全部
    • hub:
    • content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
    • content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false没有自定义的描述出现
    • content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,,防止从中间截断.
    • order_by: 顺序排列方式
    • icon: 图标路径

    配置好之后运行hexo clean & hexo g就可以找到你博客的pubilc 文件夹下发现atom.xml文件了

    我们可以在关于(about)页面添加RSS源, 有些主题可以在头像下面自动开启, 这些都是后话了.

    配置RSS的时候发现还有一些其他的推送方式, 比如邮件推送, 浏览器通知推送等等.

    RSS阅读器

    Feedly.com 这个比较满意, 文章显示和界面都不错

    inoreader: 订阅的文章展示效果也还不错(卡片形式).

    the old reader: 这个是比较老牌的RSS阅读器了

    参考链接:

    为hexo博客添加RSS订阅功能

    hexo开启atom订阅

    hexo 静态网页压缩

    了解到有三个插件可以做到这个功能(hexo-neat, gulp, Hexo-all-minifier)

    gulp存在各种乱七八糟的依赖关系, 推荐直接用Hexo-all-minifier一套走.

    1. hexo-neat

    集成插件 hexo-neat

    首先时所说集成压缩 HTML JS CSS 为一体的 hexo-neat 插件,该插件有以下几个问题:

    1. 各种打印信息输出一大串,并且还不能去掉打印信息,而且还向编译后的文件加入私有注释 rebuild by neat,不太爽!
    2. npm包github 包 不统一,github 的 README 有 logger 配置选项,npm 包却没有这配置。
    3. 每次执行 npm run build html 都被重新构建,不能启用 hexo 缓存优化,看不到最新的 html 构建信息。
    4. 包长久不维护。

    基于以上放弃了这个插件

    2. gulp

    # 安装gulp
    npm install gulp --save
    # 安装gulp依赖
    npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin --save
    
    • 1
    • 2
    • 3
    • 4

    创建 gulpfile.js 文件

    Hexo站点根目录下创建gulpfile.js文件

    var gulp = require('gulp');
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');
    var imagemin = require('gulp-imagemin');
    // 压缩css文件
    gulp.task('minify-css', function() {
      return gulp.src('./public/**/*.css')
      .pipe(minifycss())
      .pipe(gulp.dest('./public'));
    });
    // 压缩html文件
    gulp.task('minify-html', function() {
      return gulp.src('./public/**/*.html')
      .pipe(htmlclean())
      .pipe(htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      }))
      .pipe(gulp.dest('./public'))
    });
    // 压缩js文件
    gulp.task('minify-js', function() {
        return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });
    // 压缩 public/demo 目录内图片
    gulp.task('minify-images', function() {
        gulp.src('./public/demo/**/*.*')
            .pipe(imagemin({
               optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
               progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
               interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染
               multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化
            }))
            .pipe(gulp.dest('./public/uploads'));
    });
    // 默认任务 gulp 4.0 适用的方式
    gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'
     //build the website
    ));
    
    • 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

    只要每次在执行hexo g命令后执行gulp就可以进行静态资源压缩,压缩后再同步到github上

    hexo cl & hexo g & gulp
    hexo d
    
    • 1
    • 2
    注意: 这里部署的时候出了一个问题
    Error [ERR_REQUIRE_ESM]: require() of ES Module xxx\hexo\node_modules\gulp-imagemin\index.js from xxx\hexo\gulpfile.js not supported.
    Instead change the require of index.js in xxx\hexo\gulpfile.js to a dynamic import() which is available in all CommonJS modules.
        at Object.<anonymous> (xxx\hexo\gulpfile.js:6:16)
        at async Promise.all (index 0) {
      code: 'ERR_REQUIRE_ESM'
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    gulp-imagemin 8.0.0 and above are now ESM only. You can downgrade gulp-imagemin to 7.1.0 which is commonjs and it should work fine.

    This package is now pure ESM. Please read this.

    https://github.com/sindresorhus/gulp-imagemin/releases/tag/v8.0.0

    最终找到说是包的版本太高导致的

    重新安装特定版本的包

    # 先卸载掉这些包
    npm uninstall gulp
    npm uninstall gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin
    npm uninstall gulp-minify-css 
    
    # 重新安装
    npm install gulp@4.0.2 --save
    npm install gulp-htmlclean@4.0.2 gulp-htmlmin@5.0.1 gulp-clean-css@4.2.0 gulp-uglify@3.0.2 gulp-imagemin@7.1.0 --save
    npm install gulp-babel@8.0.0 babel-preset-env@1.7.0 babel-preset-mobx@2.0.0 --save
    npm install gulp-miniify-css@1.2.4 -save
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    包的版本可以参考这个

    "babel-preset-env": "^1.7.0",
    "babel-preset-mobx": "^2.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-htmlclean": "^2.7.22",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-minify-css": "^1.2.4",
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    gulpfile.js也改动了一下,

    minify-images项里面我的图片是随文章存放的, 并不是全部存放在img等文件夹下面, 所以只能用全文件匹配去做图片压缩, 代价就是速度很忙, 希望有大佬来指点一下如何更好的修改

    let gulp      = require('gulp')
    let htmlmin   = require('gulp-htmlmin')
    let htmlclean = require('gulp-htmlclean')
    let uglify    = require('gulp-uglify')
    let imagemin  = require('gulp-imagemin')
    var minifycss = require('gulp-minify-css');
    
    // 压缩html
    gulp.task('minify-html', function () {
        // 匹配所有 .html结尾的文件
        return gulp.src('./public/**/*.html')
            .pipe(htmlclean())
            .pipe(htmlmin({
                removeComments: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            }))
            .pipe(gulp.dest('./public'))
    });
    
    // 压缩css
    gulp.task('minify-css', function () {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./public'));
    });
    
    // 压缩js
    gulp.task('minify-js', function () {
        return gulp.src(['./public/**/.js', '!./public/js/**/*min.js'])
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    })
    
    // 压缩图片
    gulp.task('minify-images', function () {
        return gulp.src('./public/**/*.*')
            .pipe(imagemin({
                optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
                progressive: true,    //类型:Boolean 默认:false 无损压缩jpg图片
                interlaced: false,    //类型:Boolean 默认:false 隔行扫描gif进行渲染
                multipass: false,     //类型:Boolean 默认:false 多次优化svg直到完全优化
            }))
            .pipe(gulp.dest('./public'));
    })
    
    gulp.task('default', gulp.series('minify-html', 'minify-css', 'minify-js', 'minify-images'))
    
    • 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

    3. Hexo-all-minifier

    https://github.com/chenzhutian/hexo-all-minifier

    Hexo 资源压缩 | hexo-all-minifier

    # 安装
    npm install hexo-all-minifier --save
    
    # 在_config.yml文件添加配置
    all_minifier: true
    
    # 
    hexo cl & hexo g 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Hexo Sitemap

    据网友所言: 谷歌就xx乱爬, 百度就xx乱删, 必应就xx不收录

    为了让博文能够被google或百度检索,需要先将网站收录到他们的库里面,我们可以在谷歌的站长平台里面提交我们的sitemap文件,告诉浏览器应该我们的站点有哪些页面,这样他就会去爬取收录了。

    站点地图是一种文件,您可以在其中提供与您网站中的网页、视频或其他文件有关的信息,还可以说明这些内容之间的关系。Google 等搜索引擎会读取此文件,以便更高效地抓取您的网站。站点地图会告诉 Google 您认为网站中的哪些网页和文件比较重要,还会提供与这些文件有关的重要信息。例如,网页上次更新的时间和网页是否有任何备用的语言版本。

    您可以使用站点地图提供与特定类型的网页内容(包括视频图片新闻内容)有关的信息。例如:

    • 站点地图视频条目可以指定视频的时长、评分以及适合哪些年龄段的受众。
    • 站点地图图片条目中可包含网页中所含图片的位置。
    • 站点地图新闻条目中可包含报道标题和发布日期。

    我需要站点地图吗?

    如果您网站上的网页链接得当,那么 Google 通常能够发现其中的大多数网页。链接得当是指您认为重要的所有网页都可以通过某些形式的导航(例如您网站的菜单,或您放入网页中的链接)抵达。即便如此,站点地图仍有助于我们更加高效地抓取规模更大、更复杂的网站或更特殊的文件。

    生成sitemap.xml

    首先我们安装生成sitemao的插件

    # 谷歌的
    npm install hexo-generator-sitemap --save
    # 百度的
    npm install hexo-generator-baidu-sitemap --save
    
    • 1
    • 2
    • 3
    • 4

    修改配置文件_config.yml增加下面这些内容

    Plugins:
    - hexo-generator-sitemap
    - hexo-generator-baidu-sitemap
    
    baidusitemap:
      path: baidusitemap.xml
    sitemap:
      path: sitemap.xml
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    生成sitemap.xml文件, 重新生成网站, 在网站根目录就可以看到sitemap.xml文件

    hexo cl & hexo g 
    
    • 1

    提交sitemap.xml

    GoogleSearchConsole

    BingWebMaster

    百度资源平台

    下面讲一下谷歌的

    登录GoogleSearchConsole, 按照提示验证站点的所有权

    打开谷歌控制台选择->索引->站点地图,在添加新的站点地图中填入你的sitemap.xml的路径, 这里直接写sitemap.xml即可。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtf1Gqj7-1663510547997)(静态网页/image-20220918004138059.png)]

    这个谷歌真是让我大无语, 一直显示无法获取, 一直没法解决这个问题, 网址检查显示没什么问题, 但是一直显示无法获取真是麻了.

    求助群友后他们推荐使用 Hexo-SEO-AutoPush

    收录查询

    1. 通过网站管理平台的控制台去看数据

    2. 搜索引擎直接搜索

    site:oikiou.top
    
    • 1

    手动生成Sitemap文件

    https://www.xml-sitemaps.com/

    Hexo-SEO-AutoPush的使用

    https://github.com/Lete114/Hexo-SEO-AutoPush

    注意以下几点:

    1. 由于生成的 actions 是在.github/workflows/HexoSeoAutoPush.yml,点开头的文件或文件夹都会被视为隐藏文件,所以 hexo 不会将隐藏文件部署到 pages,需要新增配置ignore_hidden

      deploy:
       ignore_hidden: false # 忽略隐藏文件及文件夹(目录)
      
      • 1
      • 2
    2. Bing的API在登录控制台后的右上角齿轮上可以找到, 如果找不到可能是界面更新导致的, 请参考官方文档

    3. 注意google的信息填写方式

      google_private_key是填写Json内的 private_key 不是private_key_id 注意区分.

      而且google_private_key 是带双引号的需要注意, 而google_client_email填写的时候是不带双引号的.

      名称形似说明
      google_client_emailxxx@xxx.xxx.gserviceaccount.com【必填】Value 输入谷歌的 client_email
      google_private_key“-----BEGIN PRIVATE KEY-----\nxxxxxx\n-----END PRIVATE KEY-----\n”【必填】Value 输入谷歌的 private_key (注意:填写的时候需要使用双引号包起来,如: "private_key"

    在Github内点击Action->Hexo SEO Auto Push -> 查看执行情况 没有报错就是执行的没问题, 稍等片刻刷新控制台就可以看到提交的信息.

    打开Home - Bing Webmaster Tools, URL提交标签

    Google Cloud Platform 中查看.

    注意:

    部署的时候报了下面这个错误, 当时弄这个东西的时候是半夜, 脑子不清醒(各位同学注意早睡早起, 熬夜效率是极其低下的), private_key填写错了发生了这个错误, 有相似错误的同学可以看看是不是private_key有问题.

    Run npx hexoautopush *** ***
    Error: error:0909006C:PEM routines:get_name:no start line
        at Sign.sign (internal/crypto/sig.js:110:29)
        at Object.sign (/xxx/node_modules/jwa/index.js:152:45)
        at Object.jwsSign [as sign] (/xxx/node_modules/jws/lib/sign-stream.js:32:24)
        at GoogleToken.requestToken (/xxx/node_modules/gtoken/build/src/index.js:225:31)
        at GoogleToken.getTokenAsyncInner (/xxx/node_modules/gtoken/build/src/index.js:163:21)
        at GoogleToken.getTokenAsync (/xxx/node_modules/gtoken/build/src/index.js:142:55)
        at GoogleToken.getToken (/xxx/node_modules/gtoken/build/src/index.js:94:21)
        at JWT.refreshTokenNoCache (/xxx/node_modules/google-auth-library/build/src/auth/jwtclient.js:171:36)
        at JWT.refreshToken (/xxx/node_modules/google-auth-library/build/src/auth/oauth2client.js:145:25)
        at JWT.authorizeAsync (/xxx/node_modules/google-auth-library/build/src/auth/jwtclient.js:152:35) {
      library: 'PEM routines',
      function: 'get_name',
      reason: 'no start line',
      code: 'ERR_OSSL_PEM_NO_START_LINE'
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    Comment 评论系统

    cusdis 系统

    功能较少,看起来非常轻量, 也可以私有部署,正打算私有部署的时候看到了twikoo所以就转入twikoo了,因为cusdis现阶段功能确实有些少.

    twikoo 系统

    https://twikoo.js.org/

    私有docker部署部署半天还是不成功, 看起来像是需要HTTPS才行.

    功能挺丰富的,就是半天没部署成功

    部署后没有启用HTTPS
    fluid 配置里面又启动了强行使用hTTPS, 
    F12,看consel发现,ERR_SSL_PROTOCOL_ERROR,被重定向到了HTTPS去了
    
    • 1
    • 2
    • 3
    头像风格类型
    404:如果没有任何图像与电子邮件哈希无关,则不加载任何图像,而是返回HTTP 404(找不到文件)响应
    mp:(神秘人物)一个人的简单卡通风格的轮廓(不随电子邮件哈希值而变化)
    identicon:基于电子邮件哈希的几何图案
    monsterid:生成的具有不同颜色,面孔等的“怪物”
    wavatar:生成的具有不同特征和背景的面孔
    retro:生成的令人敬畏的8位街机风格像素化面孔
    robohash:具有不同颜色,面部等的生成的机器人
    blank:透明的PNG图像(以下为演示目的添加到HTML的边框)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • Twikoo我是用的docker,nginx和ssl配置可以参考DockerHub, https的端口是可以更改的, 默认的443占用了换成别的就好.

    • twikoo的即时推送尝试了几个譬如 Qmsq, server酱等等发现又一系列的问题 都不尽如人意 最后选择的是最简单的邮件通知.

    remark42

    部署平台(托管平台)

    常见静态网站托管平台使用及多节点部署方案

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i3a97WJR-1663510547998)(静态网页/2fc062cb2.svg)]

    现阶段比较好的方案是codinggithub+netlify.

    一些资源

    字体族(font-family

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family

    调色板灵感

    https://www.webdesignrankings.com/resources/lolcolors/

    ISO-8601 日期

    http://momentjs.cn/docs/#/parsing/string-format/

    代码高亮风格

    highlightjs: https://highlightjs.org/static/demo/

    prismjs: https://prismjs.com/

    Logo生成器

    adobe: https://www.adobe.com/express/create/logo

    图床

    https://postimg.cc/

    壁纸

    https://wallpapercrafter.com/

    一些知识

    Creative Commons licenses

    What are Creative Commons licenses?

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sWqsinqU-1663510547999)(静态网页/licences_3bf0e9af_670x502.jpg)]

    Gravatar & Cravatar

    Gravatar & Cravatar的差异

    Gravatar

    Gravatar是一项用于提供在全球范围内使用的头像服务。只要你在Gravatar的服务器上上传了你自己的头像,你便可以在其他任何支持Gravatar的博客、论坛等地方使用它。

    Cravatar (cn)

    Cravatar 是 Gravatar 在中国的完美替代方案,从此你可以自由的上传和分享头像。

    与 Gravatar API 兼容

    为了降低你的使用成本,我们的 API 规范始终保持与 Gravatar 100% 兼容

    独有的三级头像匹配机制

    当访客请求自己的头像时,我们会按此顺序分三级匹配头像:Cravatar->Gravatar->QQ 头像,对于博客站,这平均可以为 70% 的访客提供准确的头像

    原文链接
    https://www.oikiou.top/2022/f96c3c41/

  • 相关阅读:
    px to rem & rpx & vw中文文档 |px自动转换rem插件
    设计模式23——状态模式
    封装Vue中的axios请求库
    elasticsearch实现聚合后两个字段相除相加相减相乘运算
    linux基础指令(一)
    java项目线上cpu过高如何排查
    自定义注解和@Target、@Retention注解的使用
    idea启动Tomcat时控制台出现乱码的解决(亲测有效)
    avue常用场景记录
    spring boot 配置文件
  • 原文地址:https://blog.csdn.net/weixin_42078116/article/details/126924204