发表更新个人博客8 分钟读完 (大约1262个字)0次访问

Hexo + Icarus + GitHub Pages 搭建个人博客

先决条件

需要先安装以下程序：

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

Node.js 版本限制

强烈建议永远安装最新版本的 Hexo，以及推荐的 Node.js 版本。

Hexo 版本 最低兼容的 Node.js 版本
6.0+ 12.13.0
5.0+ 10.13.0
4.1 - 4.2 8.10
4.0 8.6
3.3 - 3.9 6.9
3.2 - 3.3 0.12
3.0 - 3.1 0.10 or iojs
0.0.1 - 2.8 0.10

安装 Hexo

使用 npm 全局安装 Hexo。

1
npm install -g hexo-cli

安装 icarus

  1. 指定路径初始化博客目录，并切换至该路径下，以blog路径为例
    1
    2
    hexo init blog
    cd blog
  2. 使用 npm 安装 Hexo
    1
    npm install hexo-theme-icarus
  3. 配置 Hexo 主题
    1
    hexo config theme icarus

创建 GitHub 仓库

  1. 创建 GitHub 仓库，并开启 Environments，配置 url
  2. 配置 ssh，确保可以 ssh 远程访问 GitHub，可以使用以下命令测试连接是否成功：
    1
    ssh -T git@github.com
    如果出行以下信息，则说明连接成功：
    1
    Hi imaginefish! You've successfully authenticated, but GitHub does not provide bash access.

修改配置

Hexo 配置

Hexo 的配置文件在 blog 目录下，名为 _config.yml

  • 修改语言为中文简体
    1
    language: zh-CN
  • 修改时区
    1
    timezone: 'Asia/Shanghai'
  • 修改博客网址，如果不配置会出现文件路径引用错误问题，导致 js、css、图片无法加载
    1
    url: https://imaginefish.github.io/blog
  • 修改 hexo 部署方式，推送至 Github 仓库的 gh-pages 分支，实现博客部署
    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:imaginefish/blog.git
      branch: gh-pages

Icarus 配置

Icarus 的配置文件在 blog 目录下，名为 _config.icarus.yml

  • 该主题导航栏无法跟随 Hexo 语言本地化，需要手动修改配置文件
    1
    2
    3
    4
    5
    6
    menu:
        主页: /
        归档: /archives
        分类: /categories
        标签: /tags
        关于: /about
  • 设置博主邮箱链接
    1
    2
    3
    Email:
        icon: fas fa-envelope
        url: mailto:imaginefishes@outlook.com
  • 修改 sidebar 配置，使 toc 随文章下拉滚动
    1
    2
    3
    sidebar:
        left:
            sticky: true
  • 用户访问量统计
    1
    busuanzi: true
  • 布局配置文件
    布局配置文件遵循着与主题配置文件相同的格式和定义。 _config.post.yml 中的配置对所有文章生效，而 _config.page.yml 中的配置对所有自定义页面生效。 这两个文件将覆盖主题配置文件中的配置。
    例如，可以在 _config.post.yml 中把所有文章变为两栏布局：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    widgets:
        -
            type: toc
            position: left
            index: true
            collapsed: true
            depth: 3
        -
            type: recent_posts
            position: left
        -
            type: categories
            position: left
        -
            type: tags
            position: left
            order_by: name
            amount: 
            show_count: true
    在 _config.icarus.yml 中把其他页面仍保持三栏布局：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    -
        position: right
        type: recent_posts
    -
        position: right
        type: categories
    -
        position: left
        type: archives
    -
        position: right
        type: tags
        order_by: name
        amount: 
        show_count: true
    以下给出个人的完整 _config.icarus.yml 配置：
    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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    version: 5.1.0
    variant: default
    logo: /img/logo.svg
    head:
        favicon: /img/favicon.svg
        manifest:
            name:
            short_name: 
            start_url: 
            theme_color: 
            background_color: 
            display: standalone
            icons:
                -
                    src: ''
                    sizes: ''
                    type: 
        structured_data:
            title: 梦鱼乡
            description: 个人博客
            url: https://github.com/imaginefish/blog
            author: 梦鱼
            publisher: 
            publisher_logo: 
            image: 
        meta:
            - ''
        rss: /atom.xml
    navbar:
        menu:
            主页: /
            归档: /archives
            分类: /categories
            标签: /tags
            关于: /about
        links:
            GitHub:
                icon: fab fa-github
                url: https://github.com/imaginefish/blog
    footer:
        links:
            Creative Commons:
                icon: fab fa-creative-commons
                url: https://creativecommons.org/
            Attribution 4.0 International:
                icon: fab fa-creative-commons-by
                url: https://creativecommons.org/licenses/by/4.0/
            Download on GitHub:
                icon: fab fa-github
                url: https://github.com/ppoffice/hexo-theme-icarus
    article:
        highlight:
            theme: atom-one-light
            clipboard: true
            fold: unfolded
        readtime: true
        update_time: true
        licenses:
            Creative Commons:
                icon: fab fa-creative-commons
                url: https://creativecommons.org/
            Attribution:
                icon: fab fa-creative-commons-by
                url: https://creativecommons.org/licenses/by/4.0/
            Noncommercial:
                icon: fab fa-creative-commons-nc
                url: https://creativecommons.org/licenses/by-nc/4.0/
    search:
        type: insight
        index_pages: true

    sidebar:
        left:
            sticky: true
        right:
            sticky: false
    widgets:
        -
            position: left
            type: profile
            author: 梦鱼
            author_title: 大数据开发工程师
            location: 中国.上海
            avatar: /img/avatar.jpg
            avatar_rounded: true
            gravatar: 
            follow_link: https://github.com/imaginefishes
            social_links:
                Github:
                    icon: fab fa-github
                    url: https://github.com/imaginefishes
                Email:
                    icon: fas fa-envelope
                    url: mailto:imaginefishes@outlook.com
                RSS:
                    icon: fas fa-rss
                    url: /atom.xml
        -
            position: left
            type: toc
            index: true
            collapsed: true
            depth: 3
        -
            position: left
            type: links
            links:
                Hexo: https://hexo.io
                Icarus: https://ppoffice.github.io/hexo-theme-icarus
        -
            position: right
            type: recent_posts
        -
            position: right
            type: categories
        -
            position: left
            type: archives
        -
            position: right
            type: tags
            order_by: name
            amount: 
            show_count: true
    plugins:
        animejs: true
        back_to_top: true
        busuanzi: true
        cookie_consent:
            type: info
            theme: edgeless
            static: false
            position: bottom-left
            policyLink: https://www.cookiesandyou.com/
        gallery: true
        katex: true
        mathjax: true
        outdated_browser: false
        progressbar: true
    providers:
        cdn: jsdelivr
        fontcdn: google
        iconcdn: fontawesome

其他问题

  • 文章图片的引用路径
    若要插入本地图片，在博客根目录下找到 source 文件夹，在其下创建 img 子目录，将图片放置于此，通过 /img/xxx.jpg 路径引入。
  • 文章图片如何居中显示
    该解决方案来源于 GitHub Issues。
    找到主题的安装路径，找到 article.styl 文件，我的路径为 node_modules\hexo-theme-icarus\include\style\article.styl，找到如下位置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    &.article
           .article-meta, .article-tags
               color: $text-light

           .article-meta
               overflow-x: auto
               margin-bottom: .5rem

           .article-more
               @extend .button.is-light

           .content
               word-wrap: break-word
               font-size: $article-font-size
    将 article 部分样式添加如下四行代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    &.article
           .article-meta, .article-tags
               color: $text-light

           .article-meta
               overflow-x: auto
               margin-bottom: .5rem

           .article-more
               @extend .button.is-light

           .content
               word-wrap: break-word
               font-size: $article-font-size
           
               a
                   img
                       margin: auto
                       display: block

Hexo + Icarus + GitHub Pages 搭建个人博客

https://imaginefish.github.io/blog/2022/09/02/hexo-icarus-github-pages-搭建个人博客/

作者

梦鱼

发布于

2022-09-02

更新于

2022-09-13

许可协议

#

目录

最新文章

分类

标签

Git2
GitHub1
HDFS1
Hadoop2
Hexo2
Icarus2
Java3
Maven2
Pandas1
Python1
Spark5
Unicode1
Visum1
交通仿真1
序列化1
×