【实操】基于 GitHub Pages + Hexo 搭建个人博客

news2024/11/25 15:41:17

《开发工具系列》

请添加图片描述

【实操】基于 GitHub Pages + Hexo 搭建个人博客

  • 一、引言
  • 二、接入 Node.js
    • 2.1 下载并安装 Node.js
    • 2.2 环境变量配置
  • 三、接入 Git
    • 3.1 下载并安装 Git
    • 3.2 环境变量配置
  • 四、接入 Hexo
    • 4.1 安装 Hexo
    • 4.2 建站
    • 4.3 本地启动服务器
  • 五、接入 GitHub Pages
    • 5.1 初识 GitHub Pages
    • 5.2 在 GitHub Pages 上部署 Hexo
  • 六、总结
  • 七、参考

一、引言

相信很多学习技术的读者朋友们，都梦想能创建一个属于自己的个人博客。现在，这将不是梦想，下面跟着 Huazie 一起利用 GitHub Pages + Hexo 搭建一个属于自己的个人博客吧。

二、接入 Node.js

2.1 下载并安装 Node.js

Node.js 官方下载地址

注意：Hexo 官方建议使用 Node.js 12.0 及以上版本

笔者本地下载的是 20.11.0 LTS，这对大多数用户来说已经足够了

在这里插入图片描述

笔者的 Windows 系统，下载完了是如下的 msi 安装包【其他系统自行去官网下载即可】：
在这里插入图片描述
这里直接双击安装即可，安装完了就可以去配置相关的环境变量了。

2.2 环境变量配置

现在，Huazie 以 windows 11 系统为例，介绍下配置环境变量，如下：

右击 Window 图标，打开下图并选择 系统：

在这里插入图片描述

点击 高级系统设置，打开系统属性页面，点击 环境变量 ：

在这里插入图片描述

找到 Path 系统环境变量，配置上面你的 Node.js 的安装目录进去：

在这里插入图片描述

环境变量配置好之后，我们就可以通过 CMD 命令行，检查：

  • npm -v ：查看当前安装的 npm 的版本号
    在这里插入图片描述
  • node -v : 查看当前安装的 Node.js 的版本号
    在这里插入图片描述

三、接入 Git

3.1 下载并安装 Git

Windows 下载地址，其他可参考 【Hexo 官方文档里的安装 Git】

笔者本地下载的版本如下【大家从上述地址下载的版本比我本地的高些】：
在这里插入图片描述

这里也是一样直接双击安装即可，安装完了就可以去配置相关的环境变量了。

3.2 环境变量配置

我们先来看看 Git 的安装目录：

在这里插入图片描述
在上述的 bin 和 cmd 目录，我们都可以看到 git.exe，按需配置，我本地环境配置的是 cmd 目录。

参考上面 Node.js 环境变量配置，配置好之后，我们就可以在命令行输入如下命令查看：

在这里插入图片描述

四、接入 Hexo

4.1 安装 Hexo

接入 Node.js 和 Git 之后，我们就可以使用 npm 安装 Hexo。

npm install -g hexo-cli

在这里插入图片描述

上述安装成功后，提示我 npm 有新的小版本更新，于是我进行了更新：

在这里插入图片描述

  • npm install -g npm ：更新到最新版本
  • npm install -g npm@<version> ：更新到特定的版本

这时我再查看当前安装的 npm 的版本号：

在这里插入图片描述

注意：上述更新不强制，大家按需更新即可

当然，对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

npm install hexo

安装 Hexo 以后，可以使用以下两种方式执行 Hexo：

  • npx hexo <command>

  • Linux 用户可以将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>：

    echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

4.2 建站

# 没有设置 folder 参数，Hexo 默认在当前文件夹下创建网站
hexo init <folder>

我们需要选个本地文件夹，然后输入上述命令，用于在指定文件夹下初始化一个本地网站。

下图即为 Huazie 本地在 E:\fleaworkspace\blog 目录开始初始化一个博客网站：
在这里插入图片描述

因为要从 GitHub 克隆项目，这一步可能需要花点事件，请慢慢等待，不要关闭窗口

等待一会，如果如下图显示，就表示 hexo 初始化网站成功了。

在这里插入图片描述

接着我们切换到上述初始化的网站目录，当然如果按笔者上述操作，当前目录就是我们的网站根目录。

接着我们输入 npm install 命令，用来下载我们网站必要的依赖包。

在这里插入图片描述

npm install 命令的作用包括：

  1. 从 npm 注册表下载包：npm install 会从 npm 注册表（一个在线仓库）中查找并下载指定的包。你可以指定包的名称和版本号，以获取正确的包版本。
  2. 解析依赖：npm install 会解析项目中的 package.json 文件，读取其中的 dependencies 和 devDependencies 字段，确定需要安装的依赖项及其版本。它会下载并安装所有必要的依赖项，以确保项目的正常运行。
  3. 安装本地缓存：npm install 会将下载的包和依赖项安装到项目的本地缓存中，这样其他开发者也可以共享相同的依赖项版本，确保项目的可移植性和一致性。
  4. 生成 node_modules 目录：在安装完成后，npm install 会生成一个 node_modules 目录，其中包含所有安装的包和依赖项

上述操作完成之后，可以查看我们初始化的网站目录，如下所示：

在这里插入图片描述
有关上述文件，我们这里简单介绍下：

  • _config.yml ：网站的配置信息。
  • package.json ：应用程序的信息。
  • scaffolds ：模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来创建文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改 scaffold/post.md 中的 Front-matter 内容，那么每次新建一篇文章时都会包含这个修改。
  • source ：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
  • themes ：主题文件夹。Hexo 会根据主题来生成静态页面。

4.3 本地启动服务器

我们可以在本地启动服务器。如下所示：
在这里插入图片描述

执行完之后，不要关闭命令窗口，直接在浏览器打开 http://localhost:4000/，如下图所示：

在这里插入图片描述

当然还有很多其他的命令，感兴趣的小伙伴，请查看 官方指令文档。

五、接入 GitHub Pages

5.1 初识 GitHub Pages

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，（可选）通过构建过程运行文件，然后发布网站。 可以在 GitHub Pages 示例集合 中看到 GitHub Pages 站点的示例。

你可以在 GitHub 的 github.io 域或自己的自定义域上托管站点。 有关详细信息，请参阅“配置 GitHub Pages 站点的自定义域”。

GitHub Pages 站点的类型，有三种：

  • 项目 ：项目站点连接到 GitHub 上托管的特定项目，例如 JavaScript 库或配方集合
  • 用户 ：用户站点连接到 github.com 上的特定帐户。若要发布用户站点，必须创建名为 <username>.github.io 的个人帐户拥有的存储库。
  • 组织 ：组织站点连接到 github.com 上的特定帐户。若要发布组织站点，必须创建名为 <organization>.github.io 的组织帐户拥有的存储库。

除非使用的是自定义域，否则用户和组织站点在 http(s)://<username>.github.io 或 http(s)://<organization>.github.io 中可用。

GitHub Pages 使用限制：
2016 年 6 月 15 日后创建并使用 github.io 域的 GitHub Pages 站点通过 HTTPS 提供服务。 如果您在 2016 年 6 月 15 日之前创建站点，您可以为站点的流量启用 HTTPS 支持。 有关详细信息，请参阅“使用 HTTPS 保护 GitHub Pages 站点”。

可以在将更改推送到特定分支时发布站点，也可以编写 GitHub Actions 工作流来发布站点。对于在 GitHub Pages 上部署 Hexo，请查看 《官方文档》，它就是使用 GitHub Actions 部署至 GitHub Pages。

5.2 在 GitHub Pages 上部署 Hexo

下面 Huazie 来简单总结下：

  1. 在你的 GitHub 上建立名为 <你的 GitHub 用户名>.github.io 的仓库。这里参考 《GitHub Pages 快速入门》 即可。

  2. 使用 GitHub 客户端 克隆上述新建的仓库，并将 4.2 中初始化的目录内容 全部复制到新克隆的仓库中，或者 像官方那样自己推送到远端【参考《在 GitHub Pages 上部署 Hexo》】。

  3. 在上面新克隆的仓库目录下，新建立 .github/workflows/pages.yml 【目录如果没有自己新建即可】
    在这里插入图片描述
    pages.yml 中填入以下内容 (注意下面的 Node.js 的版本，我这里是 20，大家以自己本地安装的版本为准)：

    name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20.x
        uses: actions/setup-node@v2
        with:
          node-version: '20'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

  4. 使用 GitHub 客户端将上述仓库新增的文件推送到远端。
    在这里插入图片描述

  5. 前往 GitHub 仓库，按下图顺序 Settings > Pages > Source ，并将 Source 改为 GitHub Actions。
    在这里插入图片描述

  6. 接着等待 GitHub 自动部署，然后就可以通过 https://你的GitHub用户名.github.io/ 访问了
    在这里插入图片描述

六、总结

本篇 Huazie 带大家利用 GitHub Pages + Hexo 搭建了能访问的个人博客。一步步实操下来，相信大家都能见到实际的效果。当然要想做好个人博客，可不止这么一点点，Huazie 这里也只是抛砖引玉，后续的深入使用，需要发挥各位的主观能动性了。

七、参考

  1. 《Hexo 官方文档》
  2. 《GitHub Actions 文档》
  3. 《GitHub Pages 快速入门》

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1400248.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C#调用C动态链接库

C#调用C动态链接库

前言 已经没写过博客好久了&#xff0c;上一篇还是1年半前写的LTE Gold序列学习笔记&#xff0c;因为工作是做通信协议的&#xff0c;然后因为大学时没好好学习专业课&#xff0c;现在理论还不扎实&#xff0c;不敢瞎写&#xff1b; 因为工作原因&#xff0c;经常需要分析一些字…
阅读更多...
在k8s上部署ClickHouse

在k8s上部署ClickHouse

概述 clickhouse的容器化部署&#xff0c;已经有非常成熟的生态了。在一些互联网大厂也已经得到了大规模的应用。 clickhouse作为一款数据库&#xff0c;其容器化的主要难点在于它是有状态的服务&#xff0c;因此&#xff0c;我们需要配置PVC。 目前业界比较流行的部署方式有…
阅读更多...
实时云渲染服务：流式传输 VR 和 AR 内容

实时云渲染服务：流式传输 VR 和 AR 内容

想象一下无需专用的物理计算机&#xff0c;甚至无需实物连接&#xff0c;就能获得高质量的 AR/VR 体验是种什么样的体验&#xff1f; 过去&#xff0c;与 VR 交互需要专用的高端工作站&#xff0c;并且根据头显、壁挂式传感器和专用的物理空间。VR 中的复杂任务会突破传感器范…
阅读更多...
AI相关资料

AI相关资料

文心一格收费,有免费额度 通义万相_AI创意作画_AI绘画_人工智能-阿里云 AI AIchatOS 即时 AI - 生成式图像创作及 UI 设计工具 Framer — The internet is your canvas
阅读更多...
分布式锁的产生以及使用

分布式锁的产生以及使用

日常开发中&#xff0c;针对一些需要锁定资源的操作&#xff0c;例如商城的订单超卖问题、订单重复提交问题等。 都是为了解决在资源有限的情况限制客户端的访问&#xff0c;对应的是限流。 单节点锁问题 目前针对这种锁资源的情况采取的往往是互斥锁&#xff0c;例如 java 里…
阅读更多...
Java SE入门及基础（25）

Java SE入门及基础（25）

目录 方法带参&#xff08;续第24篇&#xff09; 6.方法参数传递规则 方法传参来自官方的说明 基本数据类型传值案例 基本数据类型传值时传递的是值的拷贝 引用数据类型传值案例 引用数据类型传值时传递的是对象在堆内存上的空间地址 Java SE文章参考:Java SE入门及基础知…
阅读更多...
[AutoSar]BSW_OS 08 Autosar OS_内存保护

[AutoSar]BSW_OS 08 Autosar OS_内存保护

一、 目录 一、关键词平台说明一、内存保护的概念 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC) >>>>>回到总目录<<<<&l…
阅读更多...
Python seaborn库的安装与图像的背景风格（Seaborn篇-01）

Python seaborn库的安装与图像的背景风格（Seaborn篇-01）

Python seaborn库的安装与图像的背景风格（Seaborn篇-01）         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…
阅读更多...
深度学习记录--指数加权平均

深度学习记录--指数加权平均

指数加权移动平均(exponentially weighted moving averages) 如何对杂乱的数据进行拟合&#xff1f; 通过指数加权平均可以把数据图近似拟合成一条曲线 公式&#xff1a; 其中表示第t个平均数&#xff0c;表示第t-1个平均数&#xff0c;表示第t个数据&#xff0c;表示变化参数…
阅读更多...
从0到1实战微服务架构之Nacos服务注册、发现与管理

从0到1实战微服务架构之Nacos服务注册、发现与管理

目录 一、前言 二、服务注册 三、服务管理 一、前言 Nacos是一个开源的、易于构建云原生应用的动态服务发现、配置管理和服务管理平台。从0到1实战微服务架构之Nacos下载安装 介绍了Nacos的架构、下载安装&#xff0c;本文将介绍服务发现、配置和管理。 二、服务注册 第一…
阅读更多...
山西电力市场日前价格预测【2024-01-22】

山西电力市场日前价格预测【2024-01-22】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-22&#xff09;山西电力市场全天平均日前电价为370.74元/MWh。其中&#xff0c;最高日前电价为601.28元/MWh&#xff0c;预计出现在18:15。最低日前电价为242.97元/MWh&#xff0c;预计…
阅读更多...
UE 可靠UDP实现原理

UE 可靠UDP实现原理

发送 我们的消息发送都是通过 UChannel 来处理的&#xff0c;通过调用 UChannel::SendBunch 统一处理。 发送的 Bunch 是以 FOutBunch 的形式存在的。当 bReliable 为 True 的时候&#xff0c;表示 Bunch 是可靠的。 发送逻辑直接从UChannel::SendBunch处开始分析 1、大小限…
阅读更多...
消息中间件之RocketMQ(一)

消息中间件之RocketMQ(一)

1.简介 RocketMQ是阿里巴巴于2012年开源的分布式消息中间件&#xff0c;后来捐赠给Apache软件基金会&#xff0c;并于2017年9月25日称为Apache的顶级项目.作为经历多过多次阿里巴巴双11这种超级工程的洗礼并有稳定出色表现得国产中间件&#xff0c;以其高性能、低延迟和高可靠…
阅读更多...
NTFS 磁盘管理器---NTFS Disk by Omi NTFS中文

NTFS 磁盘管理器---NTFS Disk by Omi NTFS中文

NTFS Disk by Omi NTFS是一款专为Mac用户设计的NTFS磁盘管理工具。它可以帮助用户方便地访问和管理NTFS格式的硬盘、U盘、移动硬盘以及其他存储设备&#xff0c;并提供高效稳定的NTFS卷管理功能。该软件具有简单的用户界面&#xff0c;使用户能够快速访问和管理NTFS磁盘上的文件…
阅读更多...
C++入门学习（七）整型

C++入门学习（七）整型

整型就是整数类型的数据&#xff08;-1&#xff0c;0&#xff0c;1等等&#xff09; 数据类型占用空间取值范围short(短整型)2字节 (-2^15 ~ 2^15-1) 32768~32767 int(整型)4字节(-2^31 ~ 2^31-1)long(长整形) Windows为4字节, Linux为4字节(32位), 8字节(64位) (-2^31 ~ 2^31…
阅读更多...
pyspark笔记：over

pyspark笔记：over

1 方法介绍 在 PySpark 中&#xff0c;over 函数是一个非常重要的概念&#xff0c;尤其是在使用窗口函数&#xff08;例如 row_number, rank, dense_rank, lead, lag 等&#xff09;时。over 函数允许你对一个数据集进行分组&#xff0c;然后在每个分组内应用窗口函数。 1.1 …
阅读更多...
【MongoDB】下载安装、指令操作

【MongoDB】下载安装、指令操作

目录 1.下载安装 2.指令 2.1.基础操作指令 2.2.增加 2.3.查询 2.4.修改 2.5.删除 前言&#xff1a; 关于MongoDB的核心概念请移步&#xff1a; 【文档数据库】ES和MongoDB的对比-CSDN博客 1.下载安装 本文以安装Windows版本的mongodb为例&#xff0c;Linux版本的其实…
阅读更多...
漫漫数学之旅009

漫漫数学之旅009

文章目录 经典格言数学习题古今评注拓展学习&#xff08;一&#xff09;大数定理&#xff08;二&#xff09;伯努利级数 经典格言 真正的问题&#xff0c;不在于机器是否思考&#xff0c;而在于人们是否思考。——BF斯金纳&#xff08;B. F. Skinner&#xff09; BF斯金纳&…
阅读更多...
通过完善价值观评价，建立企业多维度评价体系

通过完善价值观评价，建立企业多维度评价体系

一、背景A公司是一家互联网公司&#xff0c;主要负责技术开发、软件应用方面的工作&#xff0c;致力于长期的软件研发、服务器开发、游戏端开发等&#xff0c;依托于专业技术实力和长期的实践积累&#xff0c;公司不断整合各类资源、深入开发技术&#xff0c;规模不断扩大&…
阅读更多...
C++---判断闰年

C++---判断闰年

一.闰年的定义 闰年是指在公历中&#xff0c;年份可以被4整除但不能被100整除的年份&#xff0c;或者可以被400整除的年份。简单来说&#xff0c;闰年是一个比平年多出一天的年份&#xff0c;即2月有29天。闰年的目的是校准公历与地球公转周期的差异&#xff0c;确保时间计算的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023