GitHub 如何部署寫好的H5靜態頁面

感謝@粉皮zu的私信,又有素材寫筆記了。(●’?’●)

剛好記錄一下我示例代碼的GitHub部署配置,以便于后期追加倉庫。

效果

img

環境

  • git
  • win

步驟

第一步 新建倉庫

img

第二步 拉取代碼

img

將倉庫clone到本地

git clone 地址

img

第三步 部署文件

新建.github\workflows\static.yml文件

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pageson:# Runs on pushes targeting the default branchpush:branches: ["main"]# Allows you to run this workflow manually from the Actions tabworkflow_dispatch:# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:contents: readpages: writeid-token: write# Allow one concurrent deployment
concurrency:group: "pages"cancel-in-progress: truejobs:# Single deploy job since we're just deployingdeploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3- name: Setup Pagesuses: actions/configure-pages@v2- name: Upload artifactuses: actions/upload-pages-artifact@v1with:# Upload entire repositorypath: '.'- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v1
第四步 將寫好的代碼復制到根目錄下

目錄結構例如

img

運行測試這里推薦使用Visual Studio Code + Live Server測試代碼很方便。

第五步 提交代碼
git add .
git commit -m '第一次提交'
git push

然后就會發現部署失敗了😅

第六步 設置倉庫

img

然后將Action中錯誤的流水線重新運行

然后就就就…可以了…哈哈哈哈

img

成功之后這里會出現在線地址

地址

倉庫 https://github.com/ToMeShare/H5.Examples

在線 https://tomeshare.github.io/H5.Examples/

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/35544.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/35544.shtml
英文地址,請注明出處:http://en.pswp.cn/news/35544.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vue-pc端elementui-統一修改問題-Dialog 對話框點擊空白關閉問題-element-所有組件層級問題

前言 實際開發我們經常發現dialog彈出框默認點擊遮罩層空白地方就會關閉-有屬性可以關閉 但是經常會圖方便-或者已經寫完了,不想一個個寫,可以在main.js進行統一關閉 當我們在頁面進行復雜設計和層級關閉改變,會發現右上角的退出登錄彈出款…

現代無人機技術

目錄 1.發展 2.應用領域 3.對戰爭的影響 4.給人類帶來的福利 5.給人類帶來的壞處 1.發展 無人機的發展可以分為以下幾個關鍵步驟: 1. 早期試驗和研究:20世紀初,飛行器的概念開始出現,并進行了一些早期的試飛和實驗。這些嘗試包…

LeetCode150道面試經典題-- 有效的字母異位詞(簡單)

1.題目 給定兩個字符串 s 和 t ,編寫一個函數來判斷 t 是否是 s 的字母異位詞。 注意:若 s 和 t 中每個字符出現的次數都相同,則稱 s 和 t 互為字母異位詞。 2.示例 s"adasd" t"daads" 返回true s"addad" t &q…

常見設計模式

概念 設計模式是怎么解決問題的一種方案 常見的設計模式 單例模式 概念:保證一個類僅有一個實例,并提供一個訪問它的全局訪問點。 應用:項目封裝個websocket用于大屏,redux,vuex都應用了單例模式的思想&#xff1b…

文獻閱讀:AnnoLLM: Making Large Language Models to Be Better Crowdsourced Annotators

文獻閱讀:AnnoLLM: Making Large Language Models to Be Better Crowdsourced Annotators 1. 文章簡介2. 方法介紹3. 實驗考察 1. 實驗結果2. 消解實驗3. Consistency & Stability 4. 結論 & 思考 文獻鏈接:https://arxiv.org/abs/2303.16854 …

Golang設計模式

Golang設計模式 Golang設計模式簡介Golang工廠設計模式Golang單例設計模式Golang抽象工廠設計模式Golang建造者模式 (Builder Pattern)Golang 原型模式(Prototype Pattern)Golang適配器模式Golang 橋接模式(Bridge Pattern)Golang裝飾器模式(Decorator …

j東h5st參數多局部ob加密(js_security_v3_0.1.4.js)加密分析

j東h5st參數多局部多次ob加密(js_security_v3_0.1.4.js) 大家好呀,我是你們的好兄弟,【星云horseAK】,今天的主題真的是千呼萬喚始出來,某東東的h5st參數,這個加密的js文件使用了obfuscator進行…

《Java-SE-第三十六章》之枚舉

前言 在你立足處深挖下去,就會有泉水涌出!別管蒙昧者們叫嚷:“下邊永遠是地獄!” 博客主頁:KC老衲愛尼姑的博客主頁 博主的github,平常所寫代碼皆在于此 共勉:talk is cheap, show me the code 作者是爪哇島的新手,水平很有限&…

Linux 日志管理

Linux 日志管理 一.Linux 下的日志服務簡介 1.1 CentOS5 之前的版本 centos5 之前的版本使用系統和內核日志分離的格式記錄日志 syslogd:該服務專門用于記錄系統日志(system application logs) klogd: 該服務專門用于記錄內核日志(linux kernel logs) centos5 之前事件的記錄格…

Redis_Geospatial(基于位置信息的應用)

12.Geospatial 12.1 簡介 基于位置信息服務(Location-Based Service,LBS)的應用。Redis3.2版本后增加了對GEO類型的支持。主要來維護元素的經緯度。redis基于這種類型,提供了經緯度設置、查詢、范圍查詢、距離查詢、經緯度hash等一些相關操作 12.2 GEO底層結構 …

war和war exploded

war和war exploded的區別 war模式&#xff1a;將WEB工程以包的形式上傳到服務器 &#xff1b; war exploded模式&#xff1a;將WEB工程以當前文件夾的位置關系上傳到服務器&#xff1b;>> war包是自己打包生成的&#xff0c;如pom文件中<packaging>war</packag…

使用 Visual Studio Code 調試 CMake 腳本

之前被引入到 Visual Studio 中的 CMake 調試器&#xff0c;現已在 Visual Studio Code 中可用。 也就是說&#xff0c;現在你可以通過在 VS Code 中安裝 CMake 工具擴展&#xff0c;來調試你的 CMakeLists.txt 腳本了。是不是很棒? 背景知識 Visual C 開發團隊和 CMake 的維…

Flutter源碼分析筆記:Widget類源碼分析

Flutter源碼分析筆記 Widget類源碼分析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/132259681 【介紹】&#x…

TestNG和Junit5測試框架梳理

一、testNG 1. testNG優勢 注解驅動&#xff1a; TestNG 使用注解來標識測試方法、測試類和配置方法&#xff0c;使得測試更具可讀性。 并行執行&#xff1a; TestNG 支持多線程并行執行測試&#xff0c;可以加速測試套件的執行。 豐富的配置&#xff1a; 可以通過 XML 配置文…

Qt下載安裝及配置教程

進入qt中文網站&#xff1a;https://www.qt.io/zh-cn/ 下載開源版 往下滑&#xff0c;下載Qt在線安裝程序 它已經檢測出我的是windows系統&#xff0c;直接點擊download就好。如果是其它的系統&#xff0c;需要找到對應自己系統的安裝包。 然后跟網速有關&#xff0c;等…

Gitlab CI/CD筆記-第三天-使用主機docker in docker 進行構建并push鏡像。

一、啥叫docker in docker 就是允許的鏡像里頭有一個docker,但這個docekr鏡像只有docker的cli和/var/lib/docker.sock的套接字&#xff0c;沒有允許build.然后里頭又運行了一個docker&#xff0c;這個docker有build的能力&#xff0c;此時構建時就是里頭的docker使用外部的dock…

登錄驗證碼實現

Hutool代碼改造 Hutool 有參考文檔&#xff1b;很多工具類&#xff1b;把一些功能都封裝好&#xff1b;都不用你自己去寫&#xff1b;直接調用它的工具類 它這里會詳細告訴你引入方式Hutool <dependency><groupId>cn.hutool</groupId><artifactId>hu…

STM32F429IGT6使用CubeMX配置SPI通信(W25Q256芯片)

1、硬件電路 需要系統性的看一下W25Q256芯片手冊 2、設置RCC&#xff0c;選擇高速外部時鐘HSE,時鐘設置為180MHz 3、配置SPI 4、生成工程配置 5、相關代碼 #define sFLASH_ID 0XEF4019 // W25Q256#define SPI_FLASH_PageSize 256 #define SPI_FLASH_PerWritePageSize 256#def…

《雷達像智能識別對抗研究進展》閱讀記錄

&#xff08;1&#xff09;引言 ? 神經網絡通常存在魯棒性缺陷&#xff0c;易受到對抗攻擊的威脅。攻擊者可以隱蔽的誘導雷達智能目標識別做出錯誤預測&#xff0c;如&#xff1a; ? a圖是自行車&#xff0c;加上對抗擾動后神經網絡就會將其識別為挖掘機。 &#xff08;2&a…