【实操】基于 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.hqwc.cn/news/410052.html

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

相关文章

What is `addArgumentResolvers` does in `WebMvcConfigurer` ?

What is `addArgumentResolvers` does in `WebMvcConfigurer` ?

addArgumentResolvers 在SpringMVC框架中&#xff0c;主要用于向Spring容器注册自定义的参数解析器。在处理HTTP请求时&#xff0c;SpringMVC会使用这些参数解析器将请求中的数据&#xff08;如查询参数、路径变量、表单数据等&#xff09;转换并注入到控制器方法的参数中。 使…
阅读更多...
.Net6使用SignalR实现前后端实时通信

.Net6使用SignalR实现前后端实时通信

代码部分 后端代码 &#xff08;Asp.net core web api&#xff0c;用的.net6&#xff09;Program.cs 代码运行逻辑&#xff1a; ​1. 通过 WebApplication.CreateBuilder(args) 创建一个 ASP.NET Core 应用程序建造器。 2. 使用 builder.Services.AddControllers() 添加 MVC 控…
阅读更多...
Jmeter的文件参数化：CSV数据文件设置和_CSVRead函数

Jmeter的文件参数化：CSV数据文件设置和_CSVRead函数

一、CSV数据文件设置 1、简介 CSV数据文件配置&#xff08;CSV Data Set Config&#xff09;可以将CSV文件中数据读入自定义变量中 Jmeter中CSV数据文件配置的界面如下图所示&#xff1a; 其中&#xff1a; &#xff08;1&#xff09;文件编码 文件的编码格式&#xff0c;与所…
阅读更多...
【蓝桥杯选拔赛真题30】C++字母转换 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

【蓝桥杯选拔赛真题30】C++字母转换 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C++字母转换 一、题目要求 1、编程实现 2、输入输出
阅读更多...
【Python数据可视化】matplotlib之增加图形内容：设置图例、设置中文标题、设置网格效果

【Python数据可视化】matplotlib之增加图形内容：设置图例、设置中文标题、设置网格效果

文章传送门 Python 数据可视化matplotlib之绘制常用图形&#xff1a;折线图、柱状图&#xff08;条形图&#xff09;、饼图和直方图matplotlib之设置坐标&#xff1a;添加坐标轴名字、设置坐标范围、设置主次刻度、坐标轴文字旋转并标出坐标值matplotlib之增加图形内容&#x…
阅读更多...
JAVAEE初阶 文件IO(一)

JAVAEE初阶 文件IO(一)

这里写目录标题 一. 计算机中存储数据的设备1.1 CPU1.2 内存1.3 硬盘1.4 三种存储的区别 二.文件系统2.1 相对路径2.2 绝对路径2.3 .和..的含义2.4 例子2.5 everything工具 三.文件3.1 文本文件3.2 二进制文件 四. JAVA对于文件的API4.1 getParent getName getPath getAbsolute…
阅读更多...
十六.触发器

十六.触发器

触发器 1.触发器2.触发器的创建2.1创建触发器语法2.2代码举例 3.查看、删除触发器3.1查看触发器3.2删除触发器 4.触发器的优缺点4.1优点4.2缺点4.3注意点 5.练习 在实际开发中&#xff0c;我们经常会遇到这样的情况&#xff1a;有 2 个或者多个相互关联的表&#xff0c;如 商品…
阅读更多...
瑞_Java开发手册_（四）安全规约

瑞_Java开发手册_（四）安全规约

&#x1f64a;前言&#xff1a;本文章为瑞_系列专栏之《Java开发手册》的安全规约篇。由于博主是从阿里的《Java开发手册》学习到Java的编程规约&#xff0c;所以本系列专栏主要以这本书进行讲解和拓展&#xff0c;有需要的小伙伴可以点击链接下载。本文仅供大家交流、学习及研…
阅读更多...
hardware simulation——框架搭建

hardware simulation——框架搭建

目录 引子 代码风格约束 代码结构和模板 引子 前几天有人拿个word文档&#xff0c;问我怎么实现&#xff0c;概括一下就是用c实现数码管显示。 但是咱们肯定不做这么简单这么点&#xff0c;我打算做个开源的项目&#xff0c;可以一直更新底层软件库&#xff0c;和上层显示库…
阅读更多...
IDEA无法解析jdk自带的类的解决办法

IDEA无法解析jdk自带的类的解决办法

1.问题 IDEA在有些时候&#xff0c;会出现这个错误&#xff0c;就是jdk自带的java类找不到而报错。 例如下面的就是Object找不到&#xff0c;我们知道jdk自带的类是不用import包的&#xff0c;这里报错了&#xff0c;IDEA会提示你去导入类&#xff0c;其实这个提示也不是真正…
阅读更多...
微服务治理：微服务断路器（微服务故障隔离模式）详解

微服务治理：微服务断路器（微服务故障隔离模式）详解

微服务断路器是一种设计模式&#xff0c;可以保护系统免于级联故障&#xff0c;通过限制对故障服务的调用来实现。它的工作原理类似于电气断路器&#xff1a;当服务遇到问题时&#xff0c;它会切断请求流&#xff0c;使其有机会恢复&#xff0c;并防止其他服务被压垮。 工作原…
阅读更多...
vue3__Provide / Inject (依赖注入)和mixins

vue3__Provide / Inject (依赖注入)和mixins

一、 Provide提供和Inject 注入 Provide提供 <script setup> import { provide } from vueprovide(/* 注入名 */ message, /* 值 */ hello!) </script> 例如父组件中提供方法 <template> <div class"home">dfhualsf<div><button…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023