将 Hugo 静态网站使用 GitHub Actions 部署到 GitHub Pages

在本博客文章中,我们将讨论如何使用 GitHub Actions 将 Hugo 静态网站部署到 GitHub Pages。GitHub Actions 是 GitHub 提供的自动化功能,可以让您直接在 GitHub 存储库中创建自定义软件开发工作流程。通过使用 GitHub Actions,您可以轻松自动化构建和部署 Hugo 静态网站的过程。 配置 GitHub Pages 设置 在使用 GitHub Actions 成功部署 Hugo 静态网站到 GitHub Pages 之前,您需要为您的项目配置 GitHub Pages 设置。 转到您的 GitHub 项目页面,点击右上角的 “Settings” 选项卡。 滚动到 “Pages” 部分。 在 “Build and deployment” 设置中,找到 “Source” 下拉菜单。 从可用选项中选择 “GitHub Actions”。这告诉 GitHub Pages 使用由 GitHub Actions 生成的工件进行部署。 现在您已经配置了 GitHub Pages 设置,您的站点将使用 hugo.yaml 文件中定义的工作流进行部署。 设置 GitHub Pages 工作流程 要使用 Hugo 和 GitHub Actions 设置 GitHub Pages 工作流程,请按照以下步骤进行操作:...

三月 25, 2023 · 2 分钟 · Juhyun Lee

为您的 Hugo 博客使用 PaperMod 主题添加广告拦截检测

在本博客文章中,我们将学习如何使用 PaperMod 主题为您的 Hugo 博客添加广告拦截检测。我们还将包括一个简单的警告消息,提示已启用广告拦截器的用户禁用它或将您的网站添加到白名单。 概述 以下是我们将采取的步骤的快速概述: 创建自定义 CSS 文件来样式化警告消息。 创建 JavaScript 文件以检测广告拦截器。 添加部分 HTML 文件以显示警告消息。 扩展 head 和 footer 部分以包含我们的新文件。 逐步指南 1. 创建自定义 CSS 文件 在 assets/css/extended/ 目录下创建一个名为 custom_css.css 的新文件,并粘贴以下 CSS 代码: #adblock-warning { background-color: #f2dede; color: #a94442; border-color: #ebccd1; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } 2. 创建 JavaScript 文件以检测广告拦截器 在 static/js/ 目录下创建一个名为 adblock-detection.js 的新文件,并粘贴以下 JavaScript 代码: function detectAdBlocker() { const adBlockTest = document.createElement('div'); adBlockTest....

三月 24, 2023 · 1 分钟 · Juhyun Lee