首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用github托管我的静态网站

GitHub是一个基于Git版本控制系统的代码托管平台,同时也可以用来托管静态网站。下面是使用GitHub托管静态网站的步骤:

  1. 创建一个GitHub账号:访问GitHub官网(https://github.com/),点击"Sign up"按钮创建一个新的账号。
  2. 创建一个新的仓库:登录GitHub账号后,点击页面右上角的"+"按钮,选择"New repository"创建一个新的仓库。
  3. 命名仓库:在"Repository name"字段中输入一个仓库名称,例如"my-static-website"。
  4. 设置仓库为公开:如果你希望将静态网站公开访问,可以将仓库设置为公开。如果需要私有访问,可以选择私有仓库,但这需要付费。
  5. 初始化仓库:勾选"Initialize this repository with a README"选项,这将在仓库中创建一个README文件。
  6. 创建一个分支:点击"Branch: main"按钮旁边的"Add branch"按钮,输入"gh-pages"作为分支名称,然后点击"Create branch"按钮。
  7. 上传静态网站文件:将你的静态网站文件(HTML、CSS、JavaScript等)上传到仓库中。可以通过拖拽文件到仓库页面或者使用Git命令行进行上传。
  8. 切换到gh-pages分支:在仓库页面上方的"Branch: main"按钮旁边,选择"gh-pages"分支。
  9. 设置仓库为静态网站:点击仓库页面上方的"Settings"选项卡,向下滚动到"GitHub Pages"部分。在"Source"下拉菜单中选择"gh-pages"分支,并点击"Save"按钮。
  10. 访问静态网站:在"GitHub Pages"部分会显示你的静态网站的链接,例如"https://your-username.github.io/my-static-website"。点击链接即可访问你的静态网站。

推荐的腾讯云相关产品:腾讯云静态网站托管(https://cloud.tencent.com/product/sps)

腾讯云静态网站托管是一项提供高可用、高性能、高安全性的静态网站托管服务。它可以帮助用户快速部署和管理静态网站,提供全球加速、CDN缓存、HTTPS支持等功能,同时还提供了简单易用的控制台和API接口,方便用户进行配置和管理。

注意:以上答案仅供参考,具体操作可能会因GitHub平台的更新而有所变化。建议在实际操作时参考GitHub官方文档或最新的操作指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用GitHub page搭建自己的静态网页

环境 mac os ,终端, 文件路径:桌面 Hexo文件夹. 1 安装 Node.js 2 安装git 使用git init 全局初始化 3 安装Hexo sudo npm install -g hexo...Latex处理数学公式的时候 会出现兼容问题例如 :h_\theta (x) 单个 Github Pages 配置 在github上创建repository 创建成功后 可以使用 http://...-m "Initial commit" git push -u origin master 同步本地的 hexo 博客 到 github 上 1 安装一个扩展(hexo/blog)下 sudo npm...g hexo d 关于配置Hexo可能出现的一些错误 1 权限问题 sudo chown -R 路径/Hexo/blog 2 无法更新到GitHub pages 很多情况是配置自己的git...如果遇到类似情况, 可以尝试使用 “提交内容到Github Pages” 步骤先提交一个 hello word 试试。

1.2K30
  • 使用Github Actions实现Hugo博客自动发布到腾讯云静态网站托管

    之前博客因为是使用Caddy的GitHub webhook实现网站自动部署,但是因为Caddy现在已经升级到了v2版本,能使用的插件少了一点。...看到腾讯云增加了静态网站托管,博客本身访问量也不是很大,所以相对来说静态网站托管还是便宜一些,所以就把博客迁移到了这里,就记录一下新的自动部署的方式方法。...同时还可以结合云开发的云函数、数据库等能力,把静态网站扩展为带有后台服务端的全栈网站。 其实本质上这块应该就是把静态资源存在COS上,然后再加上CDN全国加速,以实现网站的快速访问。...添加腾讯云API密钥对 这里不建议在API密钥管理那里添加,因为那里的密钥对权限太高,我们只是部署一个静态网站,没必要使用那么高的权限。所以这里说一下我这边的添加流程。...设置Github Actions实现自动发布 如果没有添加过github Actions,那么点击Actions会看到Github推荐使用的Actions,那么可以点击set up a workflow

    2K90

    使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源

    挺久以前就有网友给我的 GitHub Pages 博客模板提 Issue,说希望能增加 CDN 用于加速静态资源的加载,由于懒,一直没有动。...这里我没有纠结,看完文首提到的那篇文章,去看了下 jsDelivr 的介绍后觉得靠谱:它原生支持使用 GitHub 项目里的资源,什么都不用配置,更重要的是免费,在国内有节点,而且速度还不错(官网上也把...现存问题 如果项目曾经打过 tag,那么新增/修改静态资源后,需要刷新 CDN 缓存的话,需要打个新 tag; 一般发生在修改了博客模板的 js/css 以后。我也还在摸索如何省去这一步的方法。...参考链接 GitHub 图床的正确用法,通过 jsDelivr CDN 全球加速 jsDelivr 为开发者提供免费公共 CDN 加速服务 Features - jsDelivr 相关文章 使用 jsDelivr...免费加速 GitHub Pages 博客的静态资源(二)

    1.7K20

    使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源

    挺久以前就有网友给我的 GitHub Pages 博客模板提 Issue,说希望能增加 CDN 用于加速静态资源的加载,由于懒,一直没有动。...改造前加载 image.png 注:由于改造前没有保留加载图,所以这是截的一个使用相同模板的朋友的首页加载情况。...这里我没有纠结,看完文首提到的那篇文章,去看了下 jsDelivr 的介绍后觉得靠谱:它原生支持使用 GitHub 项目里的资源,什么都不用配置,更重要的是免费,在国内有节点,而且速度还不错(官网上也把...也可以不指定版本或者指定版本为 latest,这样总是使用最新版本的资源。...我也还在摸索如何省去这一步的方法。

    2.4K20

    教你如何建立国际化的静态网站

    介绍常见的产品介绍性的网站一般为静态网站,如果要实现产品的国际化,需要对网站进行多语言设置,可以自动识别当前浏览器的语言并更换适配的语言,并且用户可以手动选择语言类型实现语言切换。...以下以一个静态的Bootstrap网站为例介绍多语言切换的实现。静态网站模板网站:https://bootstrapmade.com/实现效果如下,可以在浏览器的设置中设置首选语言来查看效果。...英文效果:中文效果:实现流程下载一个静态网站,目录结构如下,其中红色方框的内容是本次改造新增的文件。本文以改造导航栏的多语言为例。... (2)实现多语言切换主要使用的是...是一个空的json文件,前端浏览器默认会请求该文件,否则会报错找不到该文件,但不影响使用,为了消除该错误,可以建一个空的json文件。

    31110

    使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

    之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享。...Jekyll 的 layout 可以理解为页面模板,它是可以继承的,比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html,模板里可以使用 Liquid 语法对内容进行处理...0x02 站内搜索引用的 JSON 资源加速 我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索的,它的搜索数据是来自一个动态生成的 JSON 文件。...对 GitHub Actions 感兴趣的同学可以自行参考官方说明学习。...相关文章: 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源

    1.1K00

    使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

    之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享。...Jekyll 的 layout 可以理解为页面模板,它是可以继承的,比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html,模板里可以使用 Liquid 语法对内容进行处理...0x02 站内搜索引用的 JSON 资源加速 我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索的,它的搜索数据是来自一个动态生成的 JSON 文件。...对 GitHub Actions 感兴趣的同学可以自行参考官方说明学习。...0x03 结语 经过以上改造,博客页面的加载速度又得到了小小的提升,所有相关源码可以在 https://github.com/mzlogin/mzlogin.github.io 找到,有相关心得或建议的朋友欢迎交流指正

    1.2K31

    如何使用github hexo git vercel搭建网站完整版

    如何使用github+hexo+git+vercel弄一个hexo博客<重制版 为什么又出来了一个 因为上一个太烂 估计看那个教程的都不行 准备 git 电脑 vercel账号 github账号 vercel...其实不用搞 他只是加速的 开始 在随便一个盘符 新建一个文件夹 进入文件夹 右键 选择 github bash here 之后最小化 不用管他 前往这里下载node 安装后 在github bash里输入...因为他简洁 你想用其他的也是可以的 在博客主目录输入 git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 弄好之后...之后输入 git config --global user.name "你github名字" git config --global user.email 你注册github的邮箱 输入 hexo d...-g 这个是上传并且生成 hexo g -d 也是一样的 上传好了的话就可以访问了 域名大概都是https://你的github名字.github.io 如果你要绑定域名 在source文件夹新建CNAME

    57730

    GitHub在其网站实现中移除对jQuery的使用

    乍一看这消息我挺震惊的,还以为Github把jQuery的代码仓库从它的网站上给删掉了呢,多大仇多大怨啊要干这事儿!再仔细一读,好吧,发现果然还是自己英文不好啊.........用一些填充库去抹平和标注DOM API的差异 大量使用自定义元素(即自定义标签,Web Component) 也就是说,他们其实是重构了Github.com这个网站,把原先由jQuery编写的代码,替换成了其他一些技术...q=topic%3Aweb-components+org%3Agithub … 从这些信息我们可以看出,Github.com对最新的Web标准是非常支持和积极推进的,在使用这些最新标准技术的同时,势必要放弃对一些老旧浏览器的支持...,比如用户使用IE(不包括Edge)去打开Github.com,会得到提示去使用其他现代浏览器进行浏览。这种对标准的拥抱和对老旧技术的反抗,是值得肯定的。...推广和使用总是需要代价的,也需要有先行者和试错者。

    78640

    基于jsDelivr+Github给网站如何换个漂亮的字体。

    前言 大多数站长在使用博客初期,喜欢魔改美化自己的网站 博客的建设主要方便访客高质量的阅读 所以对字体的选择非常重要 本期博主给大家出一期如果给自己的博客资源网自定义自己喜欢的字体 教程开始 下载自己喜欢的字体...如果不进行转换字体格式,有些浏览器会无法显示自己设置的喜欢的字体 如果你毫无技术不会转换字体格式不要怕,这里我给你们提供一个免费快捷的字体转换网站 字体格式在线转换器 你只需要转换.ttf文件为eot...不利于网站速度优化,cos,oss非常耗费流量,早上一起来可能不注意一套房子就没了 在这里我推荐大家使用GitHub仓库,利用jsDelivr+Github的方法实现即可 如图所示我将字体文件转换之后依次上传至自己的...GitHub的仓库 jsDelivr+Github的cdn使用方法是:https://cdn.jsdelivr.net/gh/{user}/{repo}/文件路径 这里简单解释一下各个参数值是什么意思...user是填写你的GitHub的id,repo是填写你的仓库id,文件路径直接填写你的字体文件名称就好了 在这里提示一下字体文件不要太大,也不要字体文件名称使用中文名称 编写css字体样式代码 如果你是小白不懂

    81320

    如何使用docsify搭建自己的github文档?

    - [第一章节](第一章节.md) - [第二章节](第二章节.md) - [第三章节](第三章节.md) 然后就变成这样了: [20210107001644.png] 其中中间那部分使用的是...-- docsify-edit-on-github --> github/index.js">...github 下面讲讲如何部署,首先我们需要有一个远程的仓库,我默认你有了,使用命令初始化文件夹,关联远程仓库 git init git remote add origin "自己在三方代码托管平台上所创建仓库对应的地址...提交上去之后,我们需要做一个操作,在settings下有一个GitHub Pages,选择构建分支和文件目录即可。我使用的是master,根目录的docs文件夹。...是因为电信会屏蔽一些网站,也就是被qiang了,懂的都懂,如果要访问的话,可以修改DNS,或者搞一把梯_子。

    1.7K00

    如何使用GitHub搭建自己的个人博客

    大家都知道,阿粉有自己的博客,而且博客的地址,也是托管在Github上面的,而且很多的小伙伴们也想问怎么搭建这个,毕竟如果要是自己做个网站,弄个域名,再弄个服务器,这也是一笔不小的花费,但是使用GitHub...如何搭建一套自己的博客 今天阿粉就教大家如何建立一个自己的博客页面,并且把它托管到 GitHub 上,这样就不用自己去再弄服务器了,直接把Github 当作一个中转了。...,使用的是GitHub Page 加 jekyll 的方式进行的博客搭建。...Jekyll语法 _config.yml jekyll的全局配置在_config.yml文件中配置。比如网站的名字,网站的域名,网站的链接格式等等。..._includes 对于网站的头部,底部,侧栏等公共部分,为了维护方便,我们可能想提取出,来单独编写,然后使用的时候包含进去即可。这时我们可以把那些公共部分放在这个目录下,使用时只需要引入即可。

    1.2K50

    使用PowerMockito如何阻止静态代码块的运行

    使用PowerMockito如何阻止静态代码块的运行一、前言在我进行单元测试mock静态类的时候,突然出现了这个异常我就很懵逼啊,无奈只能一步一步的进去查找问题结果发现问题出现在静态类当中,那是肯定的,...我是mock了这个使用到静态方法的地方才报错的二、简易代码复现首先,是我们的静态类package com.banmoon.utils;​import cn.hutool.core.util.RandomUtil...,这个方法正好使用了这个静态方法package com.banmoon.service.impl;​import com.banmoon.service.PowerMockitoService;import..., 不可能为了单测去修改除测试方法以外的代码逻辑的比如这次的PowerMockitoUtil.java,当中的静态代码块虽然只是我的模拟。...但它在正常的容器下运行就是正常且必须的那么我们就得想办法绕过去了,正好PowerMockito提供了一个注解,可以帮助我们取消静态代码块的执行@SuppressStaticInitializationFor

    28010

    Github 注册教程,托管自己的代码,静态页,GIt工具安装使用

    github 教程 Github 是什么? gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。...github 还可以通过page功能来访问静态页 GitHub 地址:https://github.com 开始注册 输入你的信息,开始注册(如果看不懂英文可以使用翻译) ?...下载安装 下载地址:https://git-scm.com/downloads 请通过你的电脑下载适当的版本 下载之后直接安装就好了 使用 以windows 为例,安装好了之后,默认会给鼠标右键添加git...mkdir 目录名 :新建目录 rm -rf 文件或目录名 :删除文件或目录 ctrl+l :清屏(和cmd的cls一样) 详细的Git使用教程:https://github.com/twtrubiks...Github Pages 只能解析html或者md文件哦 打开页面之后,你就可以通过“https://xxx.github.io/xxx/” 访问你的静态项目了 前面的xxx是你github的用户名,后面的

    1.9K10

    如何使用 CAPTCHA 保护您的 WordPress 网站

    如果检测到可疑活动,则不会出现那个简单的复选框——相反,更难的验证码(例如识别图像中的特定对象)会出现在其位置。 CAPTCHA 如何保护我的网站?...如何在 WordPress 中安装验证码 在 WordPress 网站上安装 CAPTCHA 的最快捷、最简单的方法是使用插件。...除了登录页面之外,还可以将 CAPTCHA 添加到您网站上的多个位置。 您甚至可能希望将多个 CAPTCHA 添加到同一页面。 与您使用的其他工具集成,例如博客评论部分或联系表格。...使用高级 noCAPTCHA 和 Invisible CAPTCHA 插件 以下是如何使用高级 noCAPTCHA 和 Invisible CAPTCHA 插件在您的网站上获取 CAPTCHA。...使用 WordPress CAPTCHA 来保护用户输入信息的网站的任何部分是一个好主意。 这些区域特别容易受到攻击。

    3.6K00
    领券