Ye's Blog

勤解万难

Github+Hexo+Next+Appveyor 建站指南

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 5.9k 阅读时长 ≈ 22 分钟

1、环境准备

OS： Macos 10.15.6
Node.js： 12.18.3 LTS
Git： 自带
tools： Vscode

2、hexo博客框架安装

1
2
3
4
5
npm install -g hexo-cli
mkdir Blog
hexo init Blog
cd Blog
npm install

3、next主题安装

1
2
npm install hexo-theme-next
git clone https://github.com/next-theme/hexo-theme-next themes/next

4、基础配置

4.1、hexo/_config.yml

  • 4.1.1 设置标题等

    1
    2
    3
    4
    5
    6
    7
    title: Ye's Blog
    subtitle: 勤解万难
    description: 升级认知，看透本质
    keywords:
    author: ZorroYe
    language: zh-CN
    timezone: Asia/Shanghai

  • 4.1.2 设置博客主题

    1
    theme: next

  • 4.1.3 设置 hexo d 要上传的地址

    1
    2
    3
    deploy:
        type: git
        repo: https://github.com/zorroye/zorroye.github.io.git

4.2、next/_config.yml

  • 4.2.1 设置缓存

    1
    2
    cache:
        enable: true

  • 4.2.2 设置logo

    1
    2
    3
    4
    5
    favicon:
        small: /images/favicon-16x16-yes.png
        medium: /images/favicon-32x32-yes.png
        apple_touch_icon: /images/apple-touch-icon-yes.png
        safari_pinned_tab: /images/logo.svg

  • 4.2.3 设置皮肤及颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    # Dark Mode
    #darkmode: false
    darkmode: true

  • 4.2.4 设置菜单

    1
    2
    3
    4
    5
    cd Blog
    hexo new page tags
    hexo new page categorise
    hexo new page schedule
    mkdir Blog/source/404 && touch 404/index.md
    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

  • 4.2.5 设置联系方式

    1
    2
    3
    social:
      QQ: qq:439753096?call|chat || fab fa-qq
      E-Mail: mailto:439753096@qq.com || fa fa-envelope

  • 4.2.6 设置友情链接

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Blog rolls
    links_settings:
        icon: fa fa-globe
        title: Links
        # Available values: block | inline
        layout: block

    links:
        黑果小兵: https://blog.daliansky.net/
        Sukka's Blog: https://blog.skk.moe/
        Xjn's Blog: https://blog.xjn819.com/

  • 4.2.7 设置打赏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    reward_settings:
        # If true, a donate button will be displayed in every article by default.
        enable: true
        animation: false
        #comment: Buy me a coffee

    reward:
        wechatpay: /images/wechatpay.jpg
        alipay: /images/alipay.jpg

  • 4.2.8 设置回到顶部

    1
    2
    3
    4
    5
    6
    back2top:
        enable: true
        # Back to top in sidebar.
        sidebar: true
        # Scroll percent label in b2t button.
        scrollpercent: true

  • 4.2.9 设置角标

    1
    2
    3
    4
    github_banner:
        enable: true
        permalink: https://github.com/zorroye
        title: Follow me on GitHub

  • 4.2.10 设置TOC

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    toc:
        enable: true
        # Automatically add list number to toc.
        number: false
        # If true, all words will placed on next lines if header width longer then sidebar width.
        wrap: true
        # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
        expand_all: true
        # Maximum heading depth of generated toc.
        max_depth: 3

5、个性化配置

5.1、hexo/_config.yml

  • 5.1.1 永久链接

    1
    npm install hexo-abbrlink --save
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    url: https://zorroye.github.io/
    root: /
    # permalink: :year/:month/:day/:title/
    # permalink_defaults:
    permalink: posts/:abbrlink/
    abbrlink:
        alg: crc32 #support crc16(default) and crc32
        rep: dec   #support dec(default) and hex
    pretty_urls:
        trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
        trailing_html: true # Set to false to remove trailing '.html' from permalinks

  • 5.1.2 本地搜索

    1
    npm install hexo-generator-searchdb --save
    1
    2
    3
    4
    5
    search:
        path: search.xml
        pield: post
        format: html
        limit: 10000 
    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

  • 5.1.3 字数统计

    1
    npm install hexo-word-counter --save
    1
    2
    3
    4
    5
    6
    7
    symbols_count_time:
        symbols: true
        time: true
        total_symbols: true
        total_time: true
        awl: true
        wpm: 275

    next/_config.yml也要配置

    1
    2
    3
    4
    symbols_count_time:
        separated_meta: true
        item_text_post: true
        item_text_total: false

  • 5.1.4 站点地图

    1
    2
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save

    网站设置：略

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Plugins:
      - hexo-generator-baidu-sitemap
      - hexo-generator-sitemap

    baidusitemap:
        path: baidusitemap.xml

    sitemap:
        path: sitemap.xml

  • 5.1.5 看板娘

    1
    2
    npm install hexo-helper-live2d@3.x --save
    npm install live2d-widget-model-miku --save
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d: 
        enable: true 
        scriptFrom: local 
        pluginRootPath: live2dw/ 
        pluginJsPath: lib/ 
        pluginModelPath: assets/ 
        tagMode: false 
        log: false 
        model: 
            use: live2d-widget-model-miku
        display:
            position: right 
            width: 260 
            height: 400 
        mobile: 
            show: true 
        react: 
            opacity: 0.8

5.2、next/_config.yml

  • 5.2.1 添加评论功能
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    valine:
        enable: true
        appId: hDUtOYptQ2tkDzGUszvs3g4N-gzGzoHsz # Your leancloud application appid
        appKey: 6bM5r8tXF8x5HTop81N5Iz5z # Your leancloud application appkey
        placeholder: Just go go # Comment box placeholder
        avatar: mm # Gravatar style
        meta: [nick, mail, link] # Custom comment header
        pageSize: 10 # Pagination size
        language: zh-cn # Language, available values: en, zh-cn
        visitor: true # Article reading statistic
        comment_count: true # If false, comment count will only be displayed in post page, not in home page
        recordIP: true # Whether to record the commenter IP
        serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
        enableQQ: false # Whether to enable the Nickname box to automatically get QQ Nickname and QQ Avatar
        requiredFields: [] # Set required fields: ['nick'] | ['nick','mail']
        #post_meta_order: 0

6、文章迁移

1
2
npm install hexo-migrator-wordpress --save
hexo migrate wordpress <source>

7、appveyor自动更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
clone_depth: 5
environment:
nodejs_version: "12"
access_token:
    secure: KVCa2He1FC4lxjT8fIM6Kz/eM+k54JLP1jF1lL60YwVk67A7YFOufqpCz2gopRfL
install:
    - ps: Install-Product node $env:nodejs_version
    - npm install
    - node --version
    - npm --version
    - npm install
    - npm install hexo-cli -g
    - npm install hexo-theme-next --save
    - npm install gulp --save
    - npm install hexo-abbrlink --save
    - npm install hexo-generator-searchdb --save
    - npm install hexo-generator-sitemap --save
    - npm install hexo-generator-baidu-sitemap --save
    - npm install hexo-word-counter --save
    - npm install hexo-helper-live2d@3.x --save
    - npm install live2d-widget-model-miku --save

8、参考文档：

https://hexo.io/zh-cn/docs/
https://theme-next.js.org/
https://cloud.tencent.com/developer/article/1662817#