基于GitHub+hexo部署静态Blog

发表于 分类于 本文字数： 5.2k 阅读时长 ≈ 5 分钟
本文详细介绍了如何使用Hexo框架搭建一个个人博客，并将其部署到GitHub Pages上....
head-img

一、前言

本文详细介绍了如何使用Hexo框架搭建一个个人博客，并将其部署到GitHub Pages上。主要内容包括：

  • 环境准备：安装Node.js和Git
  • 配置Git和GitHub：设置SSH密钥，创建GitHub仓库
  • 初始化Hexo项目：安装Hexo，创建新博客
  • 部署到GitHub Pages：配置部署设置，推送静态文件
  • 基本使用方法：创建新文章，本地预览，发布更新

这个教程适合那些想要快速搭建个人博客，但又不想花费太多成本的人。通过使用Hexo和GitHub的免费服务，您可以轻松创建一个高效、简洁的博客网站。

二、事前准备

  1. 在线支持

    • 域名注册 | 雨云：（非必须，你也可以使用免费域名，或者GitHub.io或Pages.dev分配的域名也可以）
    • GitHub：（必须，你需要注册一个 GitHub 帐号）

  2. 软件支持

    • Node：（必须，Nodejs 是一个基于Chrome V8引擎的JS运行环境，可以用JS写服务器和前端代码。）
    • Git：（必须，Git 是当前最先进、最主流的分布式版本控制系统，免费、开源）
    • Hugo：（必须，Hugo 是用Go语言写的静态网站生成器（Static Site Generator），可以把 Markdown 文件转化成 HTML 文件）
    • HBuilderX：（非必须，HBuilderX 是一款为Vue开发精心打造的超强集成开发环境（IDE））

三、软件安装

  1. 安装 Node

    • 打开Node.js官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题

    • 下载后安装，安装的目录可以使用默认目录C:/Program Files/nodejs/

    • 安装完成后，检查是否安装成功。在键盘按下win + R键，输入CMD，然后回车，打开CMD窗口，执行node -v命令，看到版本信息，则说明安装成功

      1
      2
      C:\Users\Administrator>node -v
      v20.18.0

    • 修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成华为云镜像源。打开CMD窗口，运行如下命令:

      1
      npm config set registry https://mirrors.huaweicloud.com/repository/npm/

  2. 安装 Git

    • 进入Git官网下载适合你当前系统的版本

    • 下载后傻瓜式安装Git即可，安装的目录最好使用默认目录C:/Program Files/Git

    • 按win + R键，输入CMD，然后回车，打开CMD窗口，执行git -v命令，看到版本信息，则说明安装成功

      1
      2
      C:\Users\Administrator>git -v
      git version 2.42.0.windows.2

      Git组件：

      Git CMD 是windows 命令行的指令风格

      Git Bash 是linux系统的指令风格（建议使用）

      **Git GUI**是图形化界面（新手学习不建议使用）

四、配置 Git 密钥并连接至 Github

  1. 常用 Git 命令：

    1
    2
    3
    git config -l	//查看所有配置
    git config --system --list	//查看系统配置
    git config --global --list	//查看用户（全局）配置

  2. 配置用户名和邮箱：

    1
    2
    git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"

  3. 配置公钥连接 Github：

    • 生成ssh公钥

      1
      ssh-keygen -t rsa -C "你的邮箱"

      id_rsa私钥

      id_rsa.pub公钥

    用记事本打开上述图片中的公钥id_rsa.pub，复制里面的内容，然后开始在github中配置ssh密钥。

    • 将 SSH KEY 配置到 GitHub

      • 进入github，点击右上角头像 选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

    • 测试连接，输入以下命令

      1
      ssh -T [email protected]

    第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可
    出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

  4. 创建GitHub.io仓库

    • 注册登录GitHub

    • 点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。

    • 仓库名字的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)

    • 可见性必须选择 Public 方便第一次部署检查问题，点击 Creat repository 进行创建即可

五、初始化 Hexo 博客

  1. 创建一个文件夹来保存博客源码（我这里选的路径为D:/Hexo-Blog），在文件夹内右键鼠标，选择Open Git Bash here

  2. 在Git BASH输入如下命令安装 Hexo

    1
    npm install -g hexo-cli && hexo -v

  3. 安装完后输入hexo -v验证是否安装成功。

    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
    C:\Users\Administrator>hexo -v
    hexo-cli: 4.3.2
    os: win32 10.0.22631 undefined
    node: 20.18.0
    acorn: 8.12.1
    ada: 2.9.0
    ares: 1.33.1
    base64: 0.5.2
    brotli: 1.1.0
    cjs_module_lexer: 1.4.1
    cldr: 45.0
    icu: 75.1
    llhttp: 8.1.2
    modules: 115
    napi: 9
    nghttp2: 1.61.0
    nghttp3: 0.7.0
    ngtcp2: 1.1.0
    openssl: 3.0.13+quic
    simdutf: 5.5.0
    tz: 2024a
    undici: 6.19.8
    unicode: 15.1
    uv: 1.46.0
    uvwasi: 0.0.21
    v8: 11.3.244.8-node.23
    zlib: 1.3.0.1-motley-71660e1

  4. 初始化 Hexo 项目安装相关依赖。

    1
    2
    3
    hexo init blog-demo //创建项目
    cd blog-demo //切换路径
    npm i //安装依赖

  5. 初始化项目后，blog-demo有如下结构：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    blog-demo
    ├── node_modules //依赖包
    ├── scaffolds //生成文章的一些模板
    ├── source //用来存放你的文章
    ├── themes //主题
    ├──.npmignore //发布时忽略的文件（可忽略）
    ├── _config.landscape.yml //主题的配置文件
    ├── config.yml //博客的配置文件
    └── package.json //项目名称、描述、版本、运行和开发等信息

  6. 命令行输入hexo cl && hexo s启动项目

  7. 打开浏览器，输入地址：http://localhost:4000/ ，看到欢迎界面，说明你的博客已经构建成功了。

六、将静态博客挂载到 GitHub Pages

  1. 安装 hexo-deployer-git

    1
    npm install hexo-deployer-git --save

  2. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件，详细可参考官方的配置描述
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。

    1
    2
    3
    4
    deploy:  
        type: git
        repository: [email protected]:kingmoon3/kingmoon3.github.io.git
        branch: main

  3. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。

    1
    2
    // Git BASH终端
    hexo clean && hexo g && hexo d

    **hexo clean**：删除之前生成的文件，可以用hexo cl缩写。

    **hexo generate**：生成静态文章，可以用hexo g缩写

    **hexo deploy**：部署文章，可以用hexo d缩写

注意：deploy时可能要你输入 username 和 password。

如果出现 **INFO Deploy done: git**，则说明部署成功了。

稍等两分钟，打开浏览器访问：https://[你的github用户名].github.io ，这时候我们就可以看到博客内容了。

附：GitHub网站部署常用命令：

  1. Git相关：

命令 作用 示例
git init 在当前目录初始化一个Git仓库 git init my_project（在my_project目录下初始化仓库）
git clone [url] 克隆远程仓库到本地 git clone https://github.com/user/repo.git（克隆指定仓库）
git status 查看仓库中文件的状态 在仓库目录下执行git status查看文件修改、暂存等状态
git add [file/dir] 将文件或目录添加到暂存区 git add file.txt（添加单个文件），git add.（添加当前目录下所有文件）
git commit -m "[message]" 提交暂存区的内容，并添加提交消息 git commit -m "Update README"（提交并添加消息）
git branch 查看本地分支列表 执行git branch查看当前仓库的分支情况
git branch [branch - name] 创建一个新的本地分支 git branch new_branch（创建名为new_branch的分支）
git checkout [branch - name] 切换到指定分支 git checkout master（切换到master分支）
git merge [branch - name] 合并指定分支到当前分支 假设在master分支，git merge feature_branch（合并feature_branch）
git log 查看提交历史 执行git log查看之前的提交记录，包括作者、日期、消息等
git remote add [name] [url] 添加远程仓库 git remote add origin https://github.com/user/repo.git（添加名为origin的远程仓库）
git push [remote - name] [branch - name] 将本地分支推送到远程仓库 git push origin master（推送master分支到origin）
git pull [remote - name] [branch - name] 从远程仓库拉取并合并更新 git pull origin master（拉取master分支更新）
git diff [file] 查看文件的修改差异 git diff file.txt（查看file.txt的修改差异）
git stash 暂存当前工作区的修改 在未完成的修改状态下，执行git stash暂存修改
git stash pop 恢复暂存的修改 执行git stash pop恢复之前暂存的修改
git tag [tag - name] 给当前提交打标签 git tag v1.0（给当前提交打v1.0标签）
git show [tag - name] 查看标签相关的提交信息 git show v1.0查看v1.0标签对应的提交内容

  1. Hexo相关：

命令 作用 示例
hexo init [folder] 初始化一个 Hexo 项目，可选参数[folder]指定项目文件夹名称。 hexo init my-blog（在当前目录下创建名为my-blog的 Hexo 项目）
hexo new [layout] <title> 创建一篇新文章，[layout]是布局模板，<title>是文章标题。 hexo new post "My New Post"（创建一篇新的post布局的文章）
hexo generate或hexo g 生成静态文件。 执行该命令会根据主题模板生成 HTML、CSS、JS 等静态文件到public目录。
hexo server或hexo s 启动本地服务器进行预览。 在本地浏览器中输入http://localhost:4000可查看生成的博客效果。
hexo clean 清除之前生成的静态文件和缓存。 当遇到生成问题或切换主题后可先执行此命令。
hexo deploy或hexo d 部署博客到指定平台。 配置好后执行该命令可将静态文件推送到远程仓库等部署目标。
hexo list <type> 列出特定类型的内容，如post（文章）、page（页面）等。 hexo list post列出所有文章信息。