五分钟学会如何在GitHub上自动化部署个人博客(hugo框架 + stack主题)

上一篇文章:
10分钟学会免费搭建个人博客(Hugo框架 + stack主题)

前言

首先,想要实现这个功能的小伙伴需要完成几个前置条件:

  • 有一个GitHub账号
  • 安装了git,并可以通过git推送commit到GitHub上
  • 完成第一篇文章的博客搭建

创建仓库

在GitHub上创建一个仓库,用来存放代码

如果你不是GitHub重度使用者或高手,建议你的仓库名称就是你自己的用户名 + .github + .io。如图所示:

请添加图片描述

这是因为,如果使用这个名字的话,那么在后续使用GitHub pages生成静态网站的域名就直接是你的仓库名,而不需要加其它后缀,可能会导致未知的bug

仓库必须公有,只有公有仓库才能部署静态页面

请添加图片描述

修改配置

还记得上一篇文章提到的,配置文件中有一个参数是讲url重定向到自己的GitHub仓库的吗,现在我们在创建自己的仓库之后,可以开始填写,修改hugo.yaml的`baseurl

baseurl: https://Lyrical-wander.github.io # 这里是我的仓库名称,如果你按照上面的步骤走,输入:https://用户名.github.io 即可

上传代码

上传代码前,首先查看你的站点目录下有没有public目录

请添加图片描述

这个public目录是生成的静态网站的代码,还记得我们上一个文章中使用的一条命令吗

hugo server -D

这条命令会启动hugo程序,将源码进行“编译”(当然并不是真正意义上的编译),生成htmlscss等前端代码,这些代码构成静态网站。

如果没有生成public目录,那么就使用hugo server -D命令生成一下。

值得注意的是,如果你习惯用VScode中的git插件,也许会方便很多。但第一次上传代码也需要手敲命令

但幸运的是,当你第一次创建仓库,仓库中一无所有时,会提示你如何上传代码

请添加图片描述

在站点目录下启用cmd命令,逐条输入命令:

git init # 初始化git
git add . # 通过git上传当前目录下所有的文件
git commit -m "这是我的博客第一次提交" # 这里是给这一次提交写一个记录,说明这个提交是做什么的
git branch -M main # 创建主分支
git remote add origin xxxxxxxxx # 你是什么就填什么,不做修改
git push -u origin main

如果这里出问题,push不到仓库中,不是hugo或者stack的问题,请检查gitGitHub是否正常运行,以下有几个排查的方向:

  • 网络问题,因为GitHub是全球服务器,因此国内访问可能会有些慢,有条件的同学开个代理
  • git并没有权限访问GitHub,看你是如何配置GitHub的,建议采用SSH,网上有许多git生成ssh密钥,GitHub绑定密钥的教程,建议跟着走一遍,如果采用HTTPS的话,应该是要登陆的,具体流程笔者很久没用了,也是建议上网搜索,网上教程很多

启用pages功能

如果你成功上传代码,现在可以打开GitHub上自动生成静态网页的pages功能,来帮你生成静态网页,等静态网页生成后,以后通过访问你的仓库域名,即可直接打开你的博客

请添加图片描述

  • 进入你的仓库
  • 在仓库菜单栏中找到Settings功能
  • 在侧边菜单栏中找到Pages
  • 在分支Branch中选择主分支main
  • 保存Save

做完以上操作,等待一段时间静态网站部署,可能几分钟,刷新一下出现⑥处,则说明生成成功,访问这个域名即可访问你的博客!

值得注意的是,这里我是购买了自己的域名,然后解析到我的仓库,所以我的域名是www.lyrical-wander.cn,而不是www.lyrical-wander.github.io,而如果按照上面的步骤走的话,域名应该是:www.usename.github.io

至此,你的博客已经部署好了!可以开始访问你自己的博客啦

小结

还有需要注意的是:

  • 每一次写完博客,都需要重新使用hugo server -D命令,生成新的public目录,pushGitHub
  • 每次生成新的public,都会有大量的文件被改动,push起来非常不方便

因此我们要通过GitHubAction功能来实现自动化部署

自动化部署

创建仓库

同样地,按照上面的步骤,我们重新创建一个仓库,这个仓库不会生成pages,且可以设置为私有仓库,因此随意命名,比如:hugo-main

修改代码

创建.gitignore文件

我们添加一个小文件,来保持我们代码的干净整洁。

因为每一次hugo server -D都会生成新的publicresources,而这个并不是我们编写的代码,因此这个可以忽略掉。

在站点目录下增加一个新文件.gitignore

填写以下内容:

请添加图片描述

这个文件顾名思义,可以让git忽略掉它里面填写的这些文件,这些文件git不会再检查它们的修改,也不会让你提交它们。

生成token并创建yaml配置文件

首先我们先生成一个token,获取该token,以免你以后每次上传代码都需要重新登录一遍

进入Settings

请添加图片描述

移动到最下方找到Developer settings

请添加图片描述

然后选择Personal access tokensTokens(classic)Generate new tokenGenerate new token(classic)

请添加图片描述

生成token时可以将Expiration选择No expiration,即这个token永不过期。

下面Select scopes(作用范围)选择repoworkflow

后面就生成了token~

注意!这个token只会出现一次,之后再也不会出现,在你关闭网页前先复制保存!

回到你刚刚创建的 第二个仓库 上(我们称之为hugo主仓库吧),不是username.github.io那个仓库

在仓库中打开SettingsSecrets and VariablesNew repository secret 来创建一个存储token的变量

请添加图片描述

请添加图片描述

为什么要这么做呢,因为token这个东西比较重要,如果后续我们直接将它写到文件中,如果文件被窃取,那么token就会暴露,这样你的仓库就不安全了,尤其我们的token还选择了不过期。

因此,我们将token保存在GitHub中,以变量的形式传给我们的文件,这样token的密封性就很好了

回到我们的站点目录下,创建一个.github目录,在.github目录下创建一个workflows目录,在该目录下生成一个xxxxx.yaml文件,名字随便取

请添加图片描述

xxxx.yaml文件下写入以下代码

name: deploy# 代码提交到main分支时触发github action
on:push:branches:- mainjobs:deploy:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v4with:fetch-depth: 0- name: Setup Hugouses: peaceiris/actions-hugo@v3with:hugo-version: "latest"extended: true- name: Build Webrun: hugo -D- name: Deploy Webuses: peaceiris/actions-gh-pages@v4with:PERSONAL_TOKEN: ${{ secrets.你的token变量名 }} # 刚刚在上面创建的变量名EXTERNAL_REPOSITORY: 你的github名/你的仓库名 # 如果按照上面的步骤走,则是username/username.github.io第一个仓库名PUBLISH_BRANCH: mainPUBLISH_DIR: ./publiccommit_message: auto deploy

上传代码

同样地,我们将站点代码再一次上传到这个仓库上,git操作一模一样,按照上面的上传代码部分来重新操作一遍即可。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin xxxxxxxxxxx
git push -u origin main

至此,你就实现了自动部署,现在,你撰写博文,然后直接push到第二个仓库,不需要本地生成public,就可以啦,第二个仓库会做一系列操作,并生成静态网站所需的资源和public,传到第一个仓库中,然后生成静态网站。

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

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

相关文章

开发过程中的AI插件推荐

在ChatGPT日渐火爆的当下,开发工具中的各种AI插件也日渐成熟,在开发过程中能给予我们很大的助力,并大幅节省研发时间和成本,所以学会学会使用AI目前已算是必不可少的技能了。 一. CodeGeex(智谱清言) CodeGeeX是智谱AI旗下一款基…

鸿蒙之路的坑

1、系统 Windows 10 家庭版不可用模拟器 对应的解决方案【坑】 升级系统版本 直接更改密钥可自动升级系统 密钥找对应系统的(例:windows 10专业版) 升级完之后要激活 坑1、升级完后事先创建好的模拟器还是无法启动 解决:删除模拟…

企业销售人员培训系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库可…

C 实现植物大战僵尸(一)

C 实现植物大战僵尸(一) 对应资源链接,C语言项目:完整版植物大战僵尸 以下内容为个人实现版,与原 UP 主项目代码内容有出入,提高了些可读和简洁性 一 创建主场景 安装 easyx 库,easyx 官网 …

SQL创建和操纵表

本文介绍创建、更改和删除表的基本知识。 1. 创建表 SQL 不仅用于表数据操纵,而且还用来执行数据库和表的所有操作,包括表本身的创建和处理。一般有两种创建表的方法: 多数DBMS 都具有交互式创建和管理数据库表的工具;表也可以…

Java开发经验——数据库开发经验

摘要 本文主要介绍了Java开发中的数据库操作规范,包括数据库建表规范、索引规约、SQL规范和ORM规约。强调了在数据库设计和操作中应遵循的最佳实践,如字段命名、数据类型选择、索引创建、SQL语句编写和ORM映射,旨在提高数据库操作的性能和安…

NTLM 中继到 LDAP 结合 CVE-2019-1040 接管全域

目录 LDAP中继 LDAP签名 CVE-2019-1040 NTLM MIC 绕过漏洞 漏洞背景 漏洞利用链 利用方式 1:配置基于资源的约束委派-攻击域控 利用方式 2:攻击 Exchange Exchange windows permissions 组介绍 复现 LDAP中继 LDAP(轻量级目录访问协…

如何通过采购管理系统实现智能化采购?

随着人工智能、大数据等技术的快速发展,采购管理逐步迈入智能化时代。智能化采购不仅提升了效率,还为企业提供了更精准的采购决策支持。本文将从智能化采购的优势出发,探讨采购管理系统如何助力企业实现这一目标。 文中用到的采购管理系统&a…

STM32学习(一)

STM32是什么 STM32是意法半导体(ST)公司基于ARM Cortex-M内核开发的32位微控制器‌。他的名字是由;意大利SGS&法国Thomson共同研制的,中国人民取两家公司名称的首字母于是ST就是这样来的,M是单片机M-Micro Contro…

C# 读取多种CAN报文文件转换成统一格式数据,工具类:CanMsgRead

因为经常有读取CAN报文trace文件的需求,而且因为CAN卡不同、记录软件不同会导致CAN报文trace文件的格式都有差异。为了方便自己后续开发,我写了一个CanMsgRead工具类,只要提供CAN报文路径和CAN报文格式的选项即可将文件迅速读取转换为统一的C…

hiprint结合vue2项目实现静默打印详细使用步骤

代码地址是:vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑 本地安装包地址:electron-hiprint 发行版 - Gitee.com 1、先安装hipint安装包在本地 2、项目运行npm(socket.…

WPF+MVVM案例实战与特效(四十七)-实现一个路径绘图的自定义按钮控件

文章目录 1、案例效果2、创建自定义 PathButton 控件1、定义 PathButton 类2、设计样式与控件模板3、代码解释3、控件使用4、直接在 XAML 中绑定命令3、源代码获取4、总结1、案例效果 2、创建自定义 PathButton 控件 1、定义 PathButton 类 首先,我们需要创建一个新的类 Pat…

《传染病与人类历史》传染病如何推动人类历史进程

《传染病与人类历史》传染病如何推动人类历史进程 Epidemics: The Impact of Germs and Their Power Over Humanity Joshua S. Loomis(约书亚S卢米斯)美国,教授,微生物学家。主要教授微生物学、遗传学、免疫学、细胞生物学与传染病…

如何检查交叉编译器gcc工具链里是否有某个库(以zlib库和libpng库为例)

freetype 依赖于 libpng,libpng 又依赖于 zlib,所以我们应该:先编译 安装 zlib,再编译安装 libpng,最后编译安装 freetype。 但是,有些交叉编译器工具链里已经有 zlib库和freetype,所以我们需要…

MySql详细教程-从入门到进阶(超实用)

基础篇 通用语法及分类 DDL: 数据定义语言,用来定义数据库对象(数据库、表、字段)DML: 数据操作语言,用来对数据库表中的数据进行增删改DQL: 数据查询语言,用来查询数据库中表的记录DCL: 数据控制语言,用…

Burp炮台实现(动态ip发包)

基本步骤 1.使用 zmap 爬取大量代理ip 2.使用py1脚本初步筛选可用ip 3.利用py2脚本再次筛选对目标网站可用ip(不带payload安全检测) 4.配置 burp 插件并加载收集到的代理池 5.加载payload,开始爆破 Zmap kali安装 sudo apt update apt …

海外招聘丨 苏黎世联邦理工学院—机器学习在社会和政治科学中的应用博士后

雇主简介 苏黎世联邦理工学院是世界领先的科技大学之一。我们以优质的教育、尖端的基础研究和将新知识直接转化为社会而闻名。来自 120 多个国家的 30,000 多名学生认为我们的大学是一个鼓励独立思考和激励卓越的环境的地方。 我们位于欧洲中心,但与世界各地建立联…

【微信小程序】3|首页搜索框 | 我的咖啡店-综合实训

首页-搜索框-跳转 引言 在微信小程序中,首页的搜索框是用户交互的重要入口。本文将通过“我的咖啡店”小程序的首页搜索框实现,详细介绍如何在微信小程序中创建和处理搜索框的交互。 1. 搜索函数实现 onClickInput函数在用户点击搜索框时触发&#x…

VS Code AI开发之Copilot配置和使用详解

随着AI开发工具的迅速发展,GitHub Copilot在Cursor、Winsuf、V0等一众工具的冲击下,推出了免费版本。接下来,我将为大家介绍GitHub Copilot的配置和使用方法。GitHub Copilot基于OpenAI Codex模型,旨在为软件开发者提供智能化的代…

表达式语句、复合语句和空语句

欢迎拜访:雾里看山-CSDN博客 本篇主题:表达式语句、复合语句和空语句 发布时间:2024.12.26 隶属专栏:C语言 目录 1. 表达式语句定义作用常见类型赋值语句函数调用语句 2. 复合语句定义作用变量作用域 3. 空语句定义作用 1. 表达式…