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

《开发工具系列》

请添加图片描述

【实操】基于 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: Pageson:push:branches:- main # default branchjobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3with:token: ${{ secrets.GITHUB_TOKEN }}# If your repository depends on submodule, please see: https://github.com/actions/checkoutsubmodules: recursive- name: Use Node.js 20.xuses: actions/setup-node@v2with:node-version: '20'- name: Cache NPM dependenciesuses: actions/cache@v2with:path: node_moduleskey: ${{ runner.OS }}-npm-cacherestore-keys: |${{ runner.OS }}-npm-cache- name: Install Dependenciesrun: npm install- name: Buildrun: npm run build- name: Upload Pages artifactuses: actions/upload-pages-artifact@v2with:path: ./publicdeploy:needs: buildpermissions:pages: writeid-token: writeenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-lateststeps:- name: Deploy to GitHub Pagesid: deploymentuses: 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.mzph.cn/news/637429.shtml

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

相关文章

Java--类继承

Java--类继承

文章目录 主要内容一.学生类1.源代码代码如下&#xff08;示例&#xff09;: 2.结果 二.交通工具类1.源代码代码如下&#xff08;示例&#xff09;: 2.结果 三.圆类1.源代码代码如下&#xff08;示例&#xff09;: 2.结果 总结 主要内容 学生类交通工具类圆类 一.学生类 具有…
阅读更多...
ChatGLM vs ChatGPT

ChatGLM vs ChatGPT

所有的NLP大模型 都是transformer结构 1.Mask attention 的策略不同 2.训练任务目标不同 国内大模型nb公司&#xff1a;百度、清华智谱 一、主流大模型 粉色&#xff1a;Encoder-only。 绿色&#xff1a;Encoder-Decoder&#xff0c;尽头智谱ChatGLM。 蓝色&#xff1a;…
阅读更多...
【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版本的其实…
阅读更多...
三、arcgispro二次开发创建第一个工程

三、arcgispro二次开发创建第一个工程

忙了几天&#xff0c;总算可以创建第一工程了。 步骤一&#xff1a; 步骤二&#xff1a; 工具介绍&#xff1a; 项目创建成功&#xff1a;项目目录在解决方案资源管理器中&#xff0c;整个工具都是动态可调整的&#xff0c;如下图&#xff1a; 想把窗口放哪里就把鼠标移到红…
阅读更多...
Linux重定向：深入理解与实践

Linux重定向：深入理解与实践

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;晴る—ヨルシカ 0:20━━━━━━️&#x1f49f;──────── 4:30 &#x1f504; ◀️ ⏸ ▶️ ☰ &…
阅读更多...
RHEL - 更新升级软件或系统

RHEL - 更新升级软件或系统

《OpenShift / RHEL / DevSecOps 汇总目录》 文章目录 小版本软件更新yum update 和 yum upgrade 的区别升级软件和升级系统检查软件包是否可升级指定升级软件使用的发行版本方法1方法2方法3方法4 查看软件升级类型更新升级指定的 RHSA/RHBA/RHEA更新升级指定的 CVE更新升级指定…
阅读更多...
L1-069 胎压监测(Java)

L1-069 胎压监测(Java)

小轿车中有一个系统随时监测四个车轮的胎压&#xff0c;如果四轮胎压不是很平衡&#xff0c;则可能对行车造成严重的影响。 让我们把四个车轮 —— 左前轮、右前轮、右后轮、左后轮 —— 顺次编号为 1、2、3、4。本题就请你编写一个监测程序&#xff0c;随时监测四轮的胎压&…
阅读更多...
Java中的包、类、接口说明

Java中的包、类、接口说明

写在开头 包、类、接口、方法、变量、参数、代码块，这些都是构成Java程序的核心部分，即便最简单的一段代码里都至少要包含里面的三四个内容，这两天花点时间梳理了一下，理解又深刻了几分。 Java中的包 Java 定义了一种名字空间，称之为包：package。一个类总是属于某个包…
阅读更多...
Servlet系列：两种创建方式(xml,注解)

Servlet系列：两种创建方式(xml,注解)

一、使用web.xml的方式配置&#xff08;Servlet2.5之前使用&#xff09; 在早期版本的Java EE中&#xff0c;可以使用XML配置文件来定义Servlet。在web.xml文件中&#xff0c;可以定义Servlet的名称、类名、初始化参数等。然后&#xff0c;在Java代码中实现Servlet接口&#x…
阅读更多...
wayland(xdg_wm_base) + egl + opengles 最简实例

wayland(xdg_wm_base) + egl + opengles 最简实例

文章目录 前言一、ubuntu 下相关环境准备1. 获取 xdg_wm_base 依赖的相关文件2. 查看 ubuntu 上安装的opengles 版本3. 查看 weston 所支持的 窗口shell 接口种类二、xdg_wm_base 介绍三、egl_wayland_demo1.egl_wayland_demo2_0.c2.egl_wayland_demo3_0.c3. xdg-shell-protoco…
阅读更多...
Chatopera 云服务支持大语言模型对话（LLM），定制您的聊天机器人

Chatopera 云服务支持大语言模型对话（LLM），定制您的聊天机器人

2024 年&#xff0c;Chatopera 云服务继续不断完善&#xff0c;为开发者提供最好的定制聊天机器人的工具。在过去的一年&#xff0c;用户们反映最多的建议是 Chatopera 云服务内置大语言模型的对话&#xff0c;今天 Chatopera 云服务完成了产品升级&#xff0c;满足了这个诉求。…
阅读更多...
HCIP-BGP选路实验

HCIP-BGP选路实验

一.实验拓扑图 二.详细配置 R1 interface GigabitEthernet0/0/0 ip address 12.1.1.1 255.255.255.0interface LoopBack0 ip address 1.1.1.1 255.255.255.0interface LoopBack1 ip address 10.1.1.1 255.255.255.0bgp 1 router-id 1.1.1.1 peer 12.1.1.2 as-number 2ipv4-fa…
阅读更多...
0基础开发EtherNet/IP：协议格式，JAVA、C#、C++处理

0基础开发EtherNet/IP：协议格式，JAVA、C#、C++处理

经过一阵倒腾&#xff0c;把CIP、Ethernet/ip协议搞到手 协议的概念和理论就不提及了&#xff0c;上网随便一搜索EtherNet/IP遍地都是。 直接将协议关键点列举出来吧。 更多协议资料 www.jngbus.com 通讯软件群 30806722 这里讲解的是TCP和UDP协议的格式&#xff0c;EtherN…
阅读更多...
如何本地部署虚拟数字克隆人 SadTalker

如何本地部署虚拟数字克隆人 SadTalker

环境&#xff1a; Win10 SadTalker 问题描述&#xff1a; 如何本地部署虚拟数字克隆人 SadTalker 解决方案&#xff1a; SadTalker&#xff1a;学习逼真的3D运动系数&#xff0c;用于风格化的音频驱动的单图像说话人脸动画 单张人像图像&#x1f64e; ♂️音频&#x1f3…
阅读更多...
伊恩·斯图尔特《改变世界的17个方程》傅里叶变换笔记

伊恩·斯图尔特《改变世界的17个方程》傅里叶变换笔记

主要是课堂的补充&#xff08;yysy&#xff0c;我觉得课堂的教育模式真有够无聊的&#xff0c;PPT、写作业、考试&#xff0c;感受不到知识的魅力。 它告诉我们什么&#xff1f; 空间和时间中的任何模式都可以被看作不同频率的正弦模式的叠加。 为什么重要&#xff1f; 频率分量…
阅读更多...
【图解数据结构】顺序表实战指南：手把手教你详细实现（超详细解析）

【图解数据结构】顺序表实战指南：手把手教你详细实现（超详细解析）

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;图解数据结构、算法模板 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️线性表1.1 &#x1f514;线性表的定义1.2 &#x1f514;线性表的存储结构 二. ⛳️顺序表…
阅读更多...
论文阅读_CogTree_推理的认知树

论文阅读_CogTree_推理的认知树

英文名称: From Complex to Simple: Unraveling the Cognitive Tree for Reasoning with Small Language Models中文名称: 从复杂到简单&#xff1a;揭示小型语言模型推理的认知树链接: http://arxiv.org/abs/2311.06754v1代码: https://github.com/alibaba/EasyNLP作者: Junbi…
阅读更多...
OpenCompass大模型测评

OpenCompass大模型测评

一、笔记 为什么大模型需要开展测评? 大模型测评有以下原因&#xff1a; 1、让普通用户了解大模型的能力和特点&#xff0c;选择合适的大模型 2、让开发者了解大模型的能力边界&#xff0c;找到提升的地方 3、让管理机构更了解大模型&#xff0c;减少大模型带来的社会风险 …
阅读更多...
为vs code配置unity开发环境

为vs code配置unity开发环境

1.安装.NET.Core SDK 我们可以访问官网下载安装SDK及tool&#xff08;https://www.microsoft.com/net/download/core&#xff09;下载。有的系统只提供了执行文件&#xff0c;没有提供安装包&#xff0c;需要自己做一些配置。 下载好对应的版本就可以安装了&#xff0c;安装好以…
阅读更多...
Video 不支持微信小程序的show-bottom-progress属性

Video 不支持微信小程序的show-bottom-progress属性

原文地址&#xff1a;Video 不支持微信小程序的show-bottom-progress属性-鹭娃网络 相关平台 微信小程序 小程序基础库: 2.20.1使用框架: React 复现步骤 import { Video} from tarojs/components; 渲染一个Video播放视频&#xff0c;无法隐藏手机屏幕最底部的进度条&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023