【实操】基于 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: 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 快速入门》

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

大模型学习与实践笔记（七）

大模型学习与实践笔记（七）

一、环境配置 1.平台&#xff1a; Ubuntu Anaconda CUDA/CUDNN 8GB nvidia显卡 2.安装 # 构建虚拟环境 conda create --name xtuner0.1.9 python3.10 -y # 拉取 0.1.9 的版本源码 git clone -b v0.1.9 https://github.com/InternLM/xtuner# 从源码安装 XTuner pip insta…
阅读更多...
【Proteus仿真】【Arduino单片机】汽车车窗除霜系统设计

【Proteus仿真】【Arduino单片机】汽车车窗除霜系统设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用LCD1602显示模块、光线传感器、DS18B20温度传感器、PCF8691 ADC模块、继电器加热模块等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD…
阅读更多...
常考SQL

常考SQL

1 思维导图 2 题目 mysql8版本 1. 连续问题♥♥♥ 问题描述&#xff1a;如下数据为蚂蚁森林中用户领取的减少碳排放量&#xff0c;找出连续3天及以上减少碳排量在100以上的用户。 iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021…
阅读更多...
pyqtgraph绘图类

pyqtgraph绘图类

pyqtgraph绘图类 pyqtgraph绘图有四种方法: 方法描述pyqtgraph.plot()创建一个新的QWindow用来绘制数据PlotWidget.plot()在已存在的QWidget上绘制数据PlotItem.plot()在已存在的QWidget上绘制数据GraphicsLayout.addPlot()在网格布局中添加一个绘图 上面四个方法都接收同样…
阅读更多...
Python爬虫实战：IP代理池助你突破限制，高效采集数据

Python爬虫实战：IP代理池助你突破限制，高效采集数据

当今互联网环境中&#xff0c;为了应对反爬虫、匿名访问或绕过某些地域限制等需求&#xff0c;IP代理池成为了一种常用的解决方案。IP代理池是一个包含多个可用代理IP地址的集合&#xff0c;可以通过该代理池随机选择可用IP地址来进行网络请求。 IP代理池是一组可用的代理IP地址…
阅读更多...
【Maven】008-Maven 私服搭建与使用

【Maven】008-Maven 私服搭建与使用

【Maven】008-Maven 私服搭建与使用 文章目录 【Maven】008-Maven 私服搭建与使用一、概述1、简介2、建立私服后依赖查找和下载逻辑第一步&#xff1a;请求本地仓库第二步&#xff1a;请求 Maven 私服第三步&#xff1a;请求外部远程仓库&#xff08;远程中央仓库等&#xff09…
阅读更多...
SpringBoot教程(三) | Spring Boot初体验

SpringBoot教程(三) | Spring Boot初体验

SpringBoot教程(三) | Spring Boot初体验 上篇文章我们创建了SpringBoot 项目&#xff0c;并且进行了简单的启动。整个项目了里其实我们就动了两个文件&#xff0c;一个是pom.xml负责管理springboot的相关依赖&#xff0c;一个是springBoot的启动类。 pom文件中通过starter的…
阅读更多...
Linux环境变量配置全攻略

Linux环境变量配置全攻略

热门IT课程【视频教程】-华为/思科/红帽/oraclehttps://xmws-it.blog.csdn.net/article/details/134398330?spm1001.2014.3001.5502 Linux环境变量配置 在自定义安装软件的时候&#xff0c;经常需要配置环境变量&#xff0c;下面列举出各种对环境变量的配置方法。 下面所有例…
阅读更多...
HTML-鼠标悬浮文案效果

HTML-鼠标悬浮文案效果

文章目录 前言一、 hover属性实现二、title属性 简单实现总结 前言 有时候&#xff0c;我们浏览网站时&#xff0c;鼠标停留在某处后鼠标会提示一些文案。 一、 hover属性实现 HTML 中可以使用 CSS 来实现鼠标悬浮文案效果。 首先&#xff0c;在 HTML 文件中添加需要显示悬浮…
阅读更多...
VS打开报错 未能正确加载 Microsoft Wswalstudio.editorImplementation.editorPackage”

VS打开报错 未能正确加载 Microsoft Wswalstudio.editorImplementation.editorPackage”

VS 打开的时候报错&#xff1a; 未能正确加载 Microsoft Wswalstudio.editorImplementation.editorPackage” 此间题可能是由配查更改或安装另一个扩展导致的&#xff0c;可以通过查看文件 C:\Users\Administrator\AppData\Roaming\Microsoft\VisualStudio\11.0\ActivityLog.x…
阅读更多...
AI客服发展现状与展望：期待技术进步带来更优质的服务体验

AI客服发展现状与展望：期待技术进步带来更优质的服务体验

近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;越来越多的企业开始采用AI客服&#xff0c;以提高效率、降低成本。然而&#xff0c;一些用户反映AI客服存在回答不准确、难以理解个性化问题等问题&#xff0c;引发了对智能客服发展现状的关注。 在北京市民邹女士的…
阅读更多...
js的防抖与节流

js的防抖与节流

目录 认识防抖与节流防抖节流 手写防抖函数绑定this与参数取消功能立即执行获取返回值最终版 手写节流函数 认识防抖与节流 在JavaScript中&#xff0c;大量操作都会触发事件&#xff0c;这些事件又会被添加到事件队列中进行排队处理 某些事件如果频繁触发的话会对浏览器的性能…
阅读更多...
服务器变矿机，该如何应对？

服务器变矿机，该如何应对？

开始 恶意的挖矿程序会导致服务器cpu的异常占用&#xff0c;很让人讨厌。起初&#xff0c;我只是使用top命令显示出占用cpu不正常的进程&#xff0c;发现其中一个进程占用了百分之九十九点几&#xff0c;然后通过kill -9 <PID>命令干掉它。但总是过不了几天&#xff0c;…
阅读更多...
Windows系统字体尺寸学习

Windows系统字体尺寸学习

调用GetTextMetrics来获得字体尺寸信息, 函数返回设备描述表中当前选定的字体信息&#xff1b; 返回值到TEXTMETRIC类型的结构中&#xff1b; 返回字段值的单位取决于当前设备描述表映射方式&#xff1b;默认映射方式是MM_TEXT&#xff0c;值的单位是像素&#xff1b; 前7个字…
阅读更多...
【MATLAB源码-第113期】基于matlab的孔雀优化算法(POA)机器人栅格路径规划，输出做短路径图和适应度曲线。

【MATLAB源码-第113期】基于matlab的孔雀优化算法(POA)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 POA&#xff08;孔雀优化算法&#xff09;是一种基于孔雀羽毛开屏行为启发的优化算法。这种算法模仿孔雀通过展开其色彩斑斓的尾羽来吸引雌性的自然行为。在算法中&#xff0c;每个孔雀代表一个潜在的解决方案&#xff0c;而…
阅读更多...
CSS3弹性盒布局详解

CSS3弹性盒布局详解

CSS3的弹性盒布局 简介 弹性盒&#xff08; Flexible Box 或 Flexbox&#xff09; 布局是CSS3提供的一种新的布局模式&#xff0c;是一种当页面需要适应不同的屏幕大小及设备类型时&#xff0c;确保元素拥有恰当行为的一种布局方式。 弹性盒的结构: 从图中所知&#xff0c…
阅读更多...
K8s（一）Pod资源——Pod介绍、创建Pod、Pod简单资源配额

K8s（一）Pod资源——Pod介绍、创建Pod、Pod简单资源配额

目录 Pod概述 pod网络 pod存储 pod和容器对比 创建pod的方式 pod运行方式分类 Pod的创建 Pod的创建过程 通过kubectl run来创建pod 通过yaml文件创建&#xff0c;yaml文件简单写法 Pod简单操作 Pod的标签labels Pod的资源配额resource 测试 Pod概述 Kubernetes …
阅读更多...
嵌入式学习-网络编程-Day4

嵌入式学习-网络编程-Day4

思维导图 广播通信模型 #include <myhead.h> int main(int argc, char const *argv[]) {int rfd socket(AF_INET,SOCK_DGRAM,0);if(rfd-1){perror("socket error");return -1;}//填充地址信息结构体struct sockaddr_in rin;rin.sin_familyAF_INET;rin.sin_por…
阅读更多...
[ceph] ceph应用

[ceph] ceph应用

一、资源池 Pool 管理 #创建一个 Pool 资源池&#xff0c;其名字为 mypool&#xff0c;PGs 数量设置为 64&#xff0c;设置 PGs 的同时还需要设置 PGP&#xff08;通常PGs和PGP的值是相同的&#xff09;&#xff1a; PG (Placement Group)&#xff0c;pg 是一个虚拟的概念&…
阅读更多...
基于变换域的模版匹配

基于变换域的模版匹配

模板匹配原理 图像的空间域与其他域之间的变换&#xff0c;如傅里叶变换&#xff0c;小波变换&#xff0c;轮廓波变换&#xff0c;剪切波变换等&#xff0c;实际上是图像在其他坐标领域中的表现。在空间域中&#xff0c;图像的信息是像素值和坐标位置&#xff1b;在其他域中&a…
阅读更多...
最新文章

Copyright @ 2022~2023