五分钟学会如何在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:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: actions/checkout@v4
          with:
              fetch-depth: 0

        - name: Setup Hugo
          uses: peaceiris/actions-hugo@v3
          with:
              hugo-version: "latest"
              extended: true

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/actions-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.你的token变量名 }} # 刚刚在上面创建的变量名
              EXTERNAL_REPOSITORY: 你的github名/你的仓库名 # 如果按照上面的步骤走,则是username/username.github.io第一个仓库名
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_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,传到第一个仓库中,然后生成静态网站。

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

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

相关文章

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

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

360pika—弹性 KV 数据存储系统入门安装使用

一、简介 github官网说Pika 是一个高性能、大容量、多租户、数据持久化的弹性 KV 数据存储系统,使用 RocksDB 作为存储引擎。它完全兼容 Redis 协议,并支持其常用的数据结构,如字符串/哈希/列表/有序集合/集合/地理位置/HyperLogLog/发布-订阅/位图/数据流等。 二、对标啥能干…

springboot中使用gdal将表中的空间数据转shapefile文件

springboot中使用gdal将表中的空间数据转shapefile文件 代码: // 样本导出-将样本表导出为shapefile,复制样本shp文件到临时目录下 sampleDir是文件夹pathpublic void setYbShapeFile(Yb yb, File sampleDir) {// 创建 前时项 和 后时项 文件夹File y…

【学习笔记】蒙特卡洛与强化学习

视频链接:https://www.bilibili.com/video/BV1SV4y1i7bW 文章目录 [蒙特卡洛方法] 02 重要性采样(importance sampling)及 python 实现Basics实现重要性采样 [蒙特卡洛方法] 03 接受/拒绝采样(accept/reject samping)初…

查看MySQL存储引擎方法,表操作

修改数据库表存储引擎 show create table dept; show table status from itpux where name s2\G; select * from information_schema.TABLES where table_schemaitpux and table_names3; 查询整个mysql里面存储引擎是innodb/myisam的表 建表时候要写好存储引擎 -- 创建表 -- 表…

项目亮点案例

其实对我来说是日常操作,但是如果在面试的时候面试者能把日常的事情总结好发出来,其实足矣。 想让别人认同项目,选取的示例需要包含以下要素: 亮点项目四要素:明确的目标,问题点,解决方法和结果…

MyBatis通过注解配置执行SQL语句原理源码分析

文章目录 前置准备流程简要分析配置文件解析加载 Mapper 接口MapperAnnotationBuilder解析接口方法注解parseStatement 方法详解MapperBuilderAssistant 前置准备 创建一个mybatis-config.xml文件&#xff0c;配置mapper接口 <mappers><!--注解配置--><mapper…

蓝桥杯物联网开发板硬件组成

第一节 开发板简介 物联网设计与开发竞赛实训平台由蓝桥杯大赛技术支持单位北京四梯科技有限公司设计和生产&#xff0c;该产品可用于参加蓝桥杯物联网设计与开发赛道的竞赛实训或院校相关课程的 实践教学环节。 开发板基于STM32WLE5无线微控制器设计&#xff0c;芯片提供了25…

常用矢量图标库

常用矢量图标库 1. iconfont 阿里巴巴旗下的矢量图标素材库&#xff1b;很强大且图标内容很丰富的矢量图标库,提供矢量图标下载&#xff08;AI / SVG / PNG / 代码格式&#xff09;、在线存储等功能&#xff0c;支持按路径改变 icon 颜色。 iconfont 网址 设备图标 2. IconP…

Unity动态读取外部图片转Texture2D,内存过大问题解决方案

问题描述 加载原始图片2.63M的图片,分辨率为3023*4032,占用内存108.5M 加载原始图片12.6 M的图片,分辨率为6000*8000,占用内存427.2M 太恐怖了吧 解决方案 1.加载完图片,等比缩放,宽高改为1024或者512以下 1024占用5.2M,512占用1.3M,相比小了很多 2.原始Texture2…

在Visual Studio 2022中配置C++计算机视觉库Opencv

本文主要介绍下载OpenCV库以及在Visual Studio 2022中配置、编译C计算机视觉库OpenCv的方法 1.Opencv库安装 ​ 首先&#xff0c;我们需要安装OpenCV库&#xff0c;作为一个开源库&#xff0c;我们可以直接在其官网下载Releases - OpenCV&#xff0c;如果官网下载过慢&#x…

【AIGC】ChatGPT 结构化 Prompt 的高级应用

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;标识符的使用&#xff08;Use of Identifiers&#xff09;1. #2. <>3. - 或 4. [] &#x1f4af;属性词的重要性和应用应用场景 &#x1f4af;具体模块…

git使用和gitlab部署

1.ci,cd,DevOps ci&#xff1a;持续集成&#xff1a;开发的代码集成到代码仓库 cd&#xff1a;持续交互&#xff1a;从代码仓库拉取代码到部署到测试环境 cd&#xff1a;持续部署&#xff1a;从代码仓库拉取代码到部署到生产环境 DevOps:开发写完的代码自动集成&#xff0c…

学习因子异步化的粒子群优化算法(AsyLnCPSO)——源码

目录 1. 学习因子异步化的概念 2. 算法步骤 2.1 初始化 2.2 迭代过程 3.优势 4. 与传统粒子群算法的区别 5.代码下载&#xff1a; 学习因子异步化的粒子群优化算法&#xff08;AsyLnCPSO&#xff09;是一种改进的粒子群优化&#xff08;PSO&#xff09;算法&#xff0c;…

BEVFormer论文总结

BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers BEVFormer&#xff1a;利用时空变换从多相机图像中学习鸟瞰表示 研究团队&#xff1a;南京大学、上海AI实验室、香港大学 ​ 代码地址&#xff1a;https://g…

ABAQUS纤维混凝土冲击破坏三维模型

纤维混凝土作为土木工程领域常用的复合材料具备良好的抗裂性及抗冲击性能&#xff0c;纤维混凝土在荷载下的破坏行为及本构关系对其应用范围具有重要影响。本案例通过AutoCAD随机三维纤维插件建立随机投放的圆柱体纤维模型&#xff0c;并将模型导入ABAQUS内&#xff0c;通过混凝…

selenium学习笔记(一)

文章目录 前言一、selenium的简介java使用seleniumPython使用selenium常用的浏览器selenium的功能 二、chromeDriver的安装查看本机的chrome版本&#xff1f;匹配对应的chromedriver并下载在服务器上例如Centos如何安装Chrome 三、selenium内容详解chrome启动chrome启动参数元素…

如何利用Java爬虫按关键字搜索苏宁易购商品

在信息技术飞速发展的今天&#xff0c;数据的获取和分析对于企业决策、市场研究和用户行为分析至关重要。本文将介绍如何使用Java编写爬虫程序&#xff0c;通过关键字搜索苏宁易购的商品&#xff0c;并获取搜索结果。 1. 爬虫简介 爬虫是一种自动化程序&#xff0c;用于从互联…

网页生成鸿蒙App

如何网页生成鸿蒙App 纯鸿蒙发布后&#xff0c;鸿蒙App需求上升。如何快速生成鸿蒙App。变色龙云(http://www.appbsl.cn)推出了鸿蒙App打包服务。可以在线自动打包鸿蒙App。 第一步 创建应用 输入网站网址&#xff0c;上传图标。 第二步 生成鸿蒙证书 打开华为开发者管理中…

【Linux进程】进程间通信(共享内存、消息队列、信号量)

目录 前言 1. System V IPC 2. 共享内存 系统调用接口 shmget ftok shmat shmdt shmctl 共享内存的读写 共享内存的描述对象 3. 消息队列 msgget msgsnd msgctl 消息队列描述对象 4. 信号量 系统调用接口 semget semctl 信号量描述对象 5. 系统层面IPC资源 6.…