五分钟学会如何在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.mzph.cn/pingmian/64959.shtml

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

相关文章

Linux配置ssh登陆

一、ssh密钥登陆原理 ssh登陆原理 SSH(Secure Shell)使用公钥-私钥(非对称)加密技术来实现安全的远程登录和其他网络服务。使用SSH密钥登录时,主要涉及两个关键部分:公钥(public key&#xff…

各种电机原理介绍

1,直流电机 (1)基本原理 直流电动机由直流电驱动电池或外部电源为其供电。在最简单的直流电动机中,定子为永磁体(即红蓝磁体外壳),转子是一个电磁体(即线圈),电流通过碳刷和一个换向器作用于转动的线圈。…

Etcd注册中心基本实现

Etcd入门 什么是Etcd GitHub:https://github.com/etcd-io/etcd Etcd数据结构与特性 键值对格式,类似文件层次结构。 Etcd如何保证数据一致性? 表面来看,Etcd支持事务操作,能够保证数据一致性。 底层来看&#xff0…

【数据结构练习题】栈与队列

栈与队列 选择题括号匹配逆波兰表达式求值出栈入栈次序匹配最小栈设计循环队列面试题1. 用队列实现栈。[OJ链接](https://leetcode.cn/problems/implement-stack-using-queues/solutions/)2. 用栈实现队列。[OJ链接](https://leetcode.cn/problems/implement-queue-using-stack…

open Feign服务抽取

open Feign虽然简化了远程调用,但是仍然存在着一些不太好的问题,这种问题并不是代码程序的问题,而是代码无法服用,无法构成一种编程的思维模式,如果一个服务需要多次被其他服务所引用并且服务数量很多的时候&#xff0…

『Linux学习笔记』FRPC 详细介绍及配置解析!

『Linux学习笔记』FRPC 详细介绍及配置解析! 文章目录 一. FRPC 详细介绍及配置解析FRPC 的主要功能FRPC 配置文件解析全局配置代理配置第一个代理服务第二个代理服务 配置文件整体工作流程常见配置项说明FRPC 的使用步骤注意事项结论 二. 参考文献 一. FRPC 详细介…

mysql中局部变量_MySQL中变量的总结

本文对MySQL中局部变量、用户变量、系统变量的理解进行总结。 一、局部变量 局部变量由DECLARE语句声明: DECLARE var_name[,...] type [DEFAULT value] 默认值由DEFAULT子句来声明,默认值也可以是一个表达式。 局部变量的作用范围仅限在它被声明的BEGIN…

Netty内存泄漏:LEAK: ByteBuf.release() was not called before it‘s garbage-collected.

文章目录 前言ByteBuf问题分析解决方法单个方法中ChannelHandler链中 前言 项目中使用Netty接收设备传递的数据时,查看日志发现有时会报错:LEAK: ByteBuf.release() was not called before its garbage-collected. 根据提示也可以看出是使用ByteBuf时&a…

JAVA将集合切分成指定份数(简易)

JAVA将集合切分成指定份数 主要方法 /** * 主要方法* param list 切分的集合* param count 切成的份数* return*/ public static List<List> splitList(List list,int count){if(count <0 ){return Lists.newArrayList();}List<List> result Lists.newArrayL…

ECharts关系图-关系图11,附视频讲解与代码下载

引言&#xff1a; 关系图&#xff08;或称网络图、关系网络图&#xff09;在数据可视化中扮演着至关重要的角色。它们通过节点&#xff08;代表实体&#xff0c;如人、物体、概念等&#xff09;和边&#xff08;代表实体之间的关系或连接&#xff09;的形式&#xff0c;直观地…

java 对mongodb操作封装工具类

在 Java 中&#xff0c;封装 MongoDB 操作的工具类是非常常见的做法。使用 MongoDB 官方的 Java 驱动程序&#xff0c;结合常用的工具类封装&#xff0c;可以使得与 MongoDB 的交互更加方便和清晰。下面是一个简单的 MongoDB 操作封装工具类的示例代码。 前提 首先&#xff0…

事件响应基本流程

虽然安全专业人员努力保护系统免受恶意攻击或人为疏忽&#xff0c;但尽管做出了这些努力&#xff0c;但不可避免地会出现问题。出于这个原因&#xff0c;安全专业人员也扮演着第一响应者的角色。要了解事件响应&#xff0c;首先要了解用于描述各种网络攻击的术语。 违规 失控…

OpenHarmony的分布式服务框架介绍与实现解析

OpenHarmony的分布式服务框架是一个用于实现设备间高效协作与资源共享的重要架构&#xff0c;以下是其详细介绍&#xff1a; 框架概述 OpenHarmony的分布式服务框架基于分布式软总线、分布式数据管理、分布式Profile等技术特性&#xff0c;构建了统一的分布式服务管理机制&am…

Java爬虫获取1688关键字接口详细解析

概述 在电商领域&#xff0c;获取商品信息和价格对于市场分析、价格监控和供应链管理至关重要。1688作为中国领先的B2B电商平台&#xff0c;提供了海量的商品数据。本文将详细介绍如何利用Java爬虫技术合法合规地获取1688商品关键字接口数据。 前期准备 Java开发环境&#x…

【漏洞复现】BIG-IP Next Central Manager OData 注入漏洞(CVE-2024-21793)

🏘️个人主页: 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 一、漏洞概述 1.1漏洞简介 漏洞名称:BIG-IP Next Central Manager OData 注入漏洞漏洞编号:CVE-2024-21793漏洞威胁等级:超危影响范围:BIG-IP Next Central Manage…

vscode 识别git目录

vscode 偶尔无法识别使用git 新托管的项目。 以下是我提供的解决方案——重启 git.enabled VS Code配置问题&#xff1a; 有时候&#xff0c;VS Code的配置可能会导致无法识别.git文件夹。确保你的VS Code配置中启用了Git的相关功能。你可以通过”Settings”&#xff08;设置…

网安瞭望台第17期:Rockstar 2FA 故障催生 FlowerStorm 钓鱼即服务扩张现象剖析

国内外要闻 Rockstar 2FA 故障催生 FlowerStorm 钓鱼即服务扩张现象剖析 在网络安全的复杂战场中&#xff0c;近期出现了一个值得关注的动态&#xff1a;名为 Rockstar 2FA 的钓鱼即服务&#xff08;PhaaS&#xff09;工具包遭遇变故&#xff0c;意外推动了另一个新生服务 Flo…

抚琴成一快-如何即兴谱例

如何即兴配套谱例 1.即兴01谱例2.即兴02谱例 1.即兴01谱例 2.即兴02谱例 慢推弦&#xff0c;1.5比较合适

希腊字母表

希腊字母 以下是数学和科学中常用的 希腊字母 及其用途的对照表&#xff0c;包括大写和小写形式&#xff1a; 序号字母名称发音&#xff08;英文&#xff09;数学与科学用途1ΑαAlphaˈlfə表示角度、系数、角速度等2ΒβBetaˈbeɪtə 或 ˈbiːtə表示系数、β辐射、概率密…

3090. 每个字符最多出现两次的最长子字符串

题目内容&#xff1a; 给你一个字符串 s &#xff0c;请找出满足每个字符最多出现两次的最长子字符串&#xff0c;并返回该 子字符串 的 最大 长度。 示例 1&#xff1a; 输入&#xff1a; s "bcbbbcba" 输出&#xff1a; 4 解释&#xff1a; 以下子字符串长…