首页
学习
活动
专区
工具
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博客自动发布到腾讯云静态网站托管

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

    1.9K90

    使用 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文件。

    27110

    使用 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

    57130

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

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

    78240

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

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

    76820

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

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

    1.2K50

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

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

    1.7K00

    使用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

    21910

    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 :清屏(和cmdcls一样) 详细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.5K00
    领券