一、准备工作

  • git客户端
  • Node.js环境(下文会讲安装)
  • GitHub账号

二、打开Pages服务

建立一个新仓库,仓库名为你的gitHub用户名.github.io。
注意new的时候需要将仓库设置为public,如果是第一次用git要在本地配置ssh，这部分网上教程很多，这里就不细讲了。
进入仓库，具体配置如下：
QQ截图20240102204753.png
这里提一下，设置分支的时候最好有两个分支，一个分支用于存放编写的hexo框架项目，另一个分支就专门存放hexo generate生成的public目录下的所有静态文件，也就是用于我们博客部署的静态文件。
不过不弄两个分支也没关系，只要有一个分支用来存放静态文件部署博客即可。

三、Node.js安装

Node.js下载链接
只需要进行更改安装路径以及选择add to path安装模式两个操作即可。
打开cmd输入node --version以及npm -v查看是否安装成功。
结果如下：
QQ截图20240102211254.png

四、安装Hexo以及相关的配置

打开cmd，执行npm install -g hexo命令安装hexo。

以下步骤都建议使用git bash执行

  1. 新建一个空文件夹，用于初始化hexo，因为hexo的初始化必须在一个空文件夹里进行。
    进入文件夹打开git bash或者直接利用cd命令进入该文件夹后，
    执行命令hexo init进行hexo项目的初始化。
    结果如下图所示：
    QQ截图20240102211952.png

  2. 本地预览功能。
    在hexo文件夹下执行hexo server命令，可以进行hexo页面的预览。
    运行结果如下：
    QQ截图20240102212157.png
    预览页面如下：
    QQ截图20240102212218.png

  3. 修改hexo配置
    具体hexo配置建议参考这里
    打开根目录下的_config.yml文件进行配置的修改，如图：
    QQ截图20240102214322.png
    下面给出一些基础的基本配置，有进一步需求的点击文档自行查看。

  • 个人信息配置：
    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: #博客的主标题
    subtitle: #博客的副标题
    description: #个人签名
    keywords: #关键字
    author: #作者名字
    language: #语言
    timezone: #时区
  • 博客的地址
    1
    2
    3
    4
    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: #你的博客地址，即https://你的gitHub用户名.github.io/
    # ...其他不用改
  • Hexo主题更改
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: #选择你喜欢的主题(后面会讲)
  • 上传文章
    1
    2
    3
    4
    deploy:
    type: git
    repo: #博客仓库的SSH KEY
    branch: #目标分支

  1. 下载上传文章的插件
    执行npm install hexo-deployer-git --save命令安装插件。
    安装成功后，使用hexo d命令就可以把项目改动上传至你的Page仓库

  2. 挑选你喜欢的主题
    挑选主题点击这里
    喜欢哪种主题自己挑选，具体的配置过程作者的GitHub项目或者个人博客会有详细介绍，自行查看即可。
    这边我们使用butterfly这个主题。
    主题的GitHub仓库地址
    作者的个人博客
    这边提一嘴，作者的个人博客写了非常详细的配置流程，非常建议去看一下，这边只能给一些基本的配置过程，有更多需求的一定要去看一下。

  3. 配置主题
    进入主题的GitHub仓库，将项目clone到themes文件夹下。
    QQ截图20240104172945.png
    QQ截图20240104173547.png
    然后在根目录下的配置文件中更改主题进行应用(上面有提到了)
    在正式配置主题前先做两件事：

  • 安装pug与stylus的渲染器：
    执行npm install hexo-renderer-pug hexo-renderer-stylus --save命令进行安装
  • 在 根目录 下创建_config.butterfly.yml文件,然后将 主题目录下(不是根目录的) 的_config.yml文件内容复制到_config.butterfly.yml中。
    (PS：主题目录的_config.yml文件不要删了！！！)

接下来到_config.butterfly.yml文件下进行具体的配置：

  • 导航栏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Menu 目錄
    menu:
    Home: / || fas fa-home
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open
    # List||fas fa-list:
    #   Music: /music/ || fas fa-music
    #   Movie: /movies/ || fas fa-video
    # Link: /link/ || fas fa-link
    # About: /about/ || fas fa-heart

    这边根据个人需要选择，不需要的#即可。如果全部不需要，保留menu:就行了。
    效果如下：
    QQ截图20240104180927.png

  • 社交图标 

    1
    2
    3
    4
    5
    6
    # Social Settings (社交圖標設置)
    # formal:
    #   icon: link || the description || color
    social:
    fab fa-github: #你的GitHub主页 || Github
    fas fa-envelope: mailto:#你的邮箱 || Email

    格式为图标名：url || 描述性文字。
    如果需要其他图标配置的，点击这里。
    两个小图标效果如下：
    QQ截图20240104182224.png

  • 图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # Favicon（網站圖標）
    favicon: 

    # Avatar (頭像)
    avatar:
      img: 
      effect: false

    # Disable all banner image
    disable_top_img: false

    # The banner image of home page（主页背景图）
    index_img: 

    # If the banner of page not setting, it will show the top_img（其他标签页没有设置背景图的时候使用的默认背景图）
    default_top_img:

    这些没什么好说的吧，自己上传照片到图床用就好了。

  • 文章

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    cover:
    # display the cover or not (是否顯示文章封面)
    index_enable: true
    aside_enable: true
    archives_enable: true
    # the position of cover in home page (封面顯示的位置)
    # left/right/both
    position: both
    # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
    default_cover:
      - 
      - 
      - # 这边可以用列表的形式来设置多张默认封面，会随机分配封面的

  • 错误设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Replace Broken Images (替換無法顯示的圖片)
    error_img:
      flink: 
      post_page: 

    # A simple 404 page
    error_404:
      enable: true
      subtitle: 'Page Not Found' #可以自定义这个
      background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

  • 公告栏

    1
    2
    3
    4
    5
    6
    7
    8
    # aside (側邊欄)
    # --------------------------------------

    aside:
    # ......
      card_announcement:
        enable: true
        content: #在这里输入公告

小结：
到这边的话以及完成网站的基本配置了，如果有什么问题或者需要更进一步的配置的话（比如tags页面与categories页面的配置），访问作者的博客就好了，真的很详细！！！

五、上传文章

在./source/_post/文件夹下创建md文件:
(PS:这边建议md文件不要用中文命名，用中文命名md文件可能会导致后面生成静态文件失败。)
QQ截图20240104184917.png
在md文件顶部配置文章设置，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
---
title:  [必须]文章标题
date:   [必须]文章创建日期
categories: [可选]文章标签
tags: [可选]文章标签
description: [可选]文章分类
keywords: [可选]文章关键字
top_img:[可选]文章页顶部图
cover:[可选]文章封面(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)   
---
# 正文内容
# ..............

文章完成之后,先后执行hexo generate与hexo d命令上传文章就好了，其他事hexo会帮你完成的。
(PS:文章上传到博客需要点时间，GitHub这边完成同步操作后才看得到，所以别急。)

六、总结

这篇文章写了如何使用GitHub-Page与Hexo去搭建个人博客 (每个程序员都要有自己的博客对吧，对吧0v0！！！) 。
有疑问或者进一步的配置需求都可以去作者的GitHub仓库和博客去看看，遇到无法解决的问题或者bug的话可以在作者GitHub仓库提ISSUE或者作者博客下评论。
这是本人 (小菜鸡) 的第一篇文章，有不足之处也欢迎指出QAQ！！！