普通视图

发现新文章,点击刷新页面。
昨天以前首页

如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用)

2025年1月24日 05:10

创建一个 GitHub Pages 站点是一个简单的过程,可以免费为你的个人、项目或组织创建网站/博客。按照此指南开始。

步骤 1:创建 GitHub 仓库

  • 登录你的 GitHub 账户。
  • 点击“新建”来创建仓库。
  • 对于个人站点,命名为 .github.io。
  • 对于项目站点,使用任何有效的名称。

步骤 2:添加你的站点文件

使用以下命令克隆仓库到本地机器:

git clone https://github.com/<username>/<repository-name>.git

创建一个 index.html 文件,包含你想要的内容。这里是一个例子:

<!DOCTYPE html>  
<title>我的 GitHub 页面</title>
<h1>欢迎访问我的站点</h1>
<p>这是我的第一个 GitHub Pages 站点。</p>

或者,你可以使用 README.md(Markdown)作为首页。

## 我的 Github 页面
### 欢迎访问我的站点
THis is my first Github Pages site.

将你的更改提交并推送到 GitHub:

git add .
git commit -m "Initial commit"
git push origin main
how-to-setup-github-pages-static-apps 如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用) Github 学习笔记 小技巧 程序设计 网站信息与统计 计算机 计算机

Github 上启用 Github Pages 的步骤

步骤 3:启用 GitHub Pages

  • 转到你的仓库设置。
  • 在侧边栏点击“Pages”。
  • 在“源”下选择分支(例如,main)和文件夹(如果适用)。
  • 点击“保存”。

步骤 4:查看你的站点

  • 对于个人站点:访问 https://<username>.github.io/。
  • 对于项目站点:访问 https://<username>.github.io/<repository-name>/。

步骤 5:自定义你的站点

要添加主题,请转到 Pages 设置并选择“选择一个主题”。

你还可以上传额外的 HTML、CSS 和 JavaScript 文件以进行进一步的自定义。

为什么 GitHub Pages 是“无服务器静态应用” / Serverless Apps

GitHub Pages 作为无服务器静态应用运行,因为它们直接向用户提供预构建的静态 HTML、CSS 和 JavaScript 文件,而不依赖后端服务器或运行时动态内容生成。相反,这些文件托管在 GitHub 的全球内容分发网络(CDN)上,确保快速有效的交付。

优点:

  • GitHub 提供的免费托管。
  • 不需要服务器维护。
  • 由于 CDN 分布,加载速度快。
  • 简化了静态站点的部署和扩展。

缺点:

  • 仅限于静态内容;不支持像数据库这样的服务器端功能。
  • 高级工作流的自定义需要技术知识。
  • 依赖于 GitHub 的基础设施。

GitHub Pages 的总结

GitHub Pages 是一个令人赞叹的免费托管网站的工具。只需几步,你就可以为你的项目、作品集或个人使用创建一个站点。通过利用无服务器模型,你可以构建轻量、高效且维护最小的站点。

英文:How to Setup and Create GitHub Pages (Serverless Static Apps)

本文一共 587 个汉字, 你数一下对不对.
如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用). (AMP 移动加速版本)

扫描二维码,分享本文到微信朋友圈
75a5a60b9cac61e5c8c71a96e17f2d9c 如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用) Github 学习笔记 小技巧 程序设计 网站信息与统计 计算机 计算机
The post 如何轻松创建并托管你的 GitHub Pages 站点 (无服务器静态应用) first appeared on 小赖子的英国生活和资讯.

相关文章:

  1. 英国房子的EPC节能报告(Energe/Efficiency Performance Certificate) EPC (Energe/Efficiency Performance Certificate) 是英国房子的节能报告, 法律上规定, 每个房子都必须要有一个EPC报告, 报告的有效期为十年. 房东在把房子出租或者想卖房的时候, 这个EPC就必须有效, 在一些情况下 比如出租房子的时候, 这个EPC报告还必须符合一些最低标准, 比如房子必须满足 F档(类似及格线)...
  2. 按揭贷款(房贷,车贷) 每月还贷计算器 去年给银行借了17万英镑 买了20万7500英镑的房子, 25年还清. 前2年是定率 Fix Rate 的合同 (年利率2.49%). 每个月大概是还 700多英镑. 有很多种还贷的计算方式, 定率/每月固定 是比较常用的. 简单来说就是 每个月交的钱是...
  3. 最好的发财策略就是忘记它 在群里我和 @nationalpark 说到我用STEEM换了3000多个 YOYOW的时候我还有点沾沾自喜, 谁知道他一针见血: 听说你是steem换的我顿时心理平衡了 才突然想起来, 我半个月前是拿 500 个 STEEM 换了 将近3300个YOYOW. 今天 STEEM的价格8美元,...
  4. 智能手机 HTC One M9 使用测评 虽然我对手机要求不高, 远远没有像追求VPS服务器一样, 但是怎么算来两年内换了四个手机, 先是三星 S4 用了一年多, 然后 Nokia Lumia 635 Windows Phone, 后来又是 BLU, 半年多前换了...
  5. 英国TESCO超市有偿回收瓶子 前不久, 英国剑桥 Bar Hill 的的 TESCO乐购超市推出了一个回收瓶子的机器, 这机器就在超市入入口出. 只需要把瓶子放进去, 机器自动识别, 然后每个瓶子10P也就是相当于1块人民币. 完成后会给个小票, 买东西可以拿来当折扣用. 如果嫌麻烦, 在回收完成还可以选择捐给慈善机构. 机器非常人性化,...
  6. 面试刷题更像是一种服从性测试 在许多求职者看来,面试中的刷题环节似乎是对技术能力的直接考察。然而,从另一个角度来看,这一过程或许更像是一场服从性测试。 想象一下,当一个公司要求候选人解决复杂的算法问题或设计一个系统架构时,真正的目的并不仅仅是判断候选人是否能完成这项任务。许多时候,公司更关心的是你是否愿意花时间和精力去迎合他们的流程和标准。 为什么这样说呢?从实际工作中来看,绝大多数岗位并不需要员工每天都在解决高难度的算法问题或从零设计分布式系统。相反,工作中的任务更偏向于理解业务逻辑、维护现有系统以及团队协作。那么,为什么刷题依然是很多公司青睐的筛选方式? 答案或许在于,刷题能有效筛选出那些愿意投入大量时间准备,并在面试中展现高度配合精神的候选人。这种配合精神,是公司希望在未来的工作中看到的品质。一旦你通过了这些测试,公司就会认为你是一个值得信赖的员工,一个能遵从流程、适应规则并在需要时投入额外努力的人。 还有就是以前说的:面试刷力扣是大公司过滤的成本较低的方法之一:为啥有名的IT公司的程序员面试都这么难?,可以过滤掉大部分 False Positive,当然也有可能过滤掉人才(胜任工作的求职者)。不过对于大厂来说,招进来一个False Positive的损害要远远比错过一个False Negative大。 此外,随着AI技术的飞速发展,刷题的技术价值正在逐渐降低。像ChatGPT这样的AI工具,已经可以轻松解决LeetCode或Codeforces上的许多高难度问题,并给出清晰的解题过程。这表明,算法题不再是人类独有的技术优势,而是可以被高效地自动化处理的任务。这种变化进一步凸显了刷题在实际工作中的局限性,因为日常工作更多依赖于沟通、业务理解和对系统的长期维护,而不是短时间内解决某个抽象问题。 OpenAI推出o3大语言AI模型。 Codeforces 评分:2727——相当于全球人类程序员编码竞赛中,排名第 175 位。...
  7. 英国 NatWest 银行推出 Reward Current Account 用来交水电费等帐单可以省钱 英国 NatWest 银行推出 Reward Current Account 银行帐号, 每个月需要交会费 3 英镑, 一年则需要36英镑 并不便宜, 但是好处是 只要通过该帐号以 Direct...
  8. 离开 NPower – 在英国选择便宜的电气公司 extraenergy 在彻底离开 谢菲尔得的那一天 和房东一起读了 电表, 公寓里只用电 没有媒气 所以做饭也用电 特别贵. 虽然在 13年底装了 两个电表. 白天一个 晚上 12点到早上7点另一个表, 所以两个计费....

热力图

2024年11月6日 14:43

文章更新热力图

类似的热力图,我最早是在 GitHub 看到的,用来展示开发者的更新频率。现在看到不少博客也做了这种小组件:就是从当前日期向前追溯一年,每一天显示成一个灰色的小方块,如果当天有文章发布,就显示成浅绿色,如果当天发布的文章不止一篇,就显示成深绿色。我想了一下,用 Hugo 的模版系统,加上一点 CSS 做布局和显示优化,应该就能实现,动手试了一下,果然效果还算可以。目前可以在首页看到实际演示。

fin.

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程(20240915更新)

2024年9月15日 20:50

由于微软雅黑的设计太过老旧,所以很多网站在设置font-family字体家族时,都会首先引入苹果的苹方字体(PingFang SC)。一来为了照顾 MAC,二来可以改善 Windows 上显示效果(已安装苹方字体的前提)。现在,一些厂商会在官网上引入自己研发的字体。感谢各大厂商没有禁止 woff 字体文件跨域使用,可以让我们白嫖,因为你们的字体是真的漂亮,并且以下字体可以个人免费使用。

更新说明

20240915 更新说明
1. 去除失效链接
2. 增加 MiSans 可变字体链接
3. 增加快看世界体

20230606 更新说明
1. 增加了阿里妈妈系列三款字体:方圆体/灵动体/刀隶体 web 引用链接

20230405 更新说明
1. 增加了钉钉进步体、阿里妈妈东方大楷 web 引用链接

20230312 更新说明
1. 增加了钉钉进步体和斗鱼追光体文件下载链接,但暂未有 web 引用链接
2. 标注华康金刚黑授权性质,请谨慎使用
3. 优化排版

20230306 更新说明
1. 增加了阿里妈妈数黑体 cdn 链接
2. 标注 CDN 公开性质
3. 优化部分说明文案
4. 优化排版

20221123 更新说明
1. 2022 年 11 月 17 日发现 OPPO 字体 – MasterGo 网站已关闭跨域请求,链接仅供下载使用了。
2. 增加了 unicode-range 优化说明

字体列表及引用链接

专题站点

服务商链接
Googlehttps://fonts.google.com(需 VPN)
Adobehttps://fonts.adobe.com(需授权)
阿里巴巴https://fonts.alibabagroup.com
钉钉进步体https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3_ZJwzulU0nceIl
斗鱼追光体https://www.douyu.com/topic/douyuZGT
快看世界体https://www.kuaikanmanhua.com/webs/fontPromotion
Mi Sanshttps://hyperos.mi.com/font/zh/
HarmonyOS Sanshttps://developer.huawei.com/consumer/cn/design/resource-V1
OPPO Sanshttps://open.oppomobile.com/new/developmentDoc/info?id=13223

网页引入

字体名称服务商字重链接
Noto SansGoogle可变https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap
Mi Sans小米多种https://font.sec.miui.com/font/css?family=MiSans:0:Chinese_Simplify,Latin&display=swap
可变https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap
HarmonyOS SansB 站400https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css
500https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css
OPPO Sans#1OPPO400https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
500https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
华康金刚黑#2字节跳动400https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap
500https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap
  1. OPPO 的在线引用 WOFF2 截取了 5000 字,因此在一些不常用的字上回出现不显示的情况
  2. 华康金刚黑实际和苹方是一个字体,因此需要授权才可使用。虽然 cdn 是可以跨域使用,但请谨慎。

引入字体

上述字体列表链接中,若是 css 链接可直接引用,若是 woff 字体链接需在你的 css 文件中引入。具体方式见下:

CSS

方式 1	在 html 中直接引入:<link rel='stylesheet' href='链接.css'>
方式 2	在 css 中引入:@import url('链接.css');

WOFF2

在 css 中引入
@font-face {
	font-family: OPPOSans;	//定义字体名称
	font-weight: 400;	//定义字重
	font-display: swap;
	src:url('链接.woff2') format('woff2');	//字体链接
}

完成上述引入字体文件后,那么在需要使用的元素处设定 css 属性 font-family 中输入字体名称即可,注意:字体名称要和引用的字体名称相同。

字重说明

浏览器默认字重 400,假如对标题想要使用粗体该如何操作呢?在设定字体字重时会有两种不同的呈现效果方式。

情况一

例如下述两个不同字重文件都使用 OPPO-Sans 名称,但在引入字体时设置了不同的字重和链接:
@font-face {
	font-family: OPPO-Sans;
	font-weight: 400;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
	font-family: OPPO-Sans;
	font-weight: 500;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}

那么在对 h1 这个部分引用时,如何使用字重 500 的字体呢?只需要在实用的元素设定 CSS 属性 font-weight 为 500 即可。即下述:
div { font-weight: 400; }	// 普通元素在引入 400 字重时
h1 { font-weight: 500; }	// 标题元素在引入 500 字重时

情况二

例如下述两个不同字重文件使用不同字体名称,在引入字体时也设置了不同的字重和链接:
@font-face {
	font-family: OPPO-Sans-Regular;
	font-weight: 400;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
	font-family: OPPO-Sans-Medium;
	font-weight: 500;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}

那么在使用不同字重时,只能使用当初设定该字重的字体名称。即下述:
div { font-family: OPPO-Sans-Regular; }	// 普通元素在引入 400 字重时
h1 { font-family: OPPO-Sans-Medium; }	// 标题元素在引入 500 字重时

你会发现,无论是否使用相同名称,font-weight 的值都必须要与实际的字体字重文件匹配。若使用不同的字体名称,一方面增加代码工作量,另一方面还不易解读。因此,通过两个字重的使用方式,如果从便于管理的角度来看,情况一更为方便。

font-display swap 说明

你会发现很多引入字体的文件都会标注这个属性,它的作用是在没有加载出字体前,优先加载本地字体进行渲染,避免网页出现空屏。若您想了解关于该部分的研究资料及加载字体所带来的影响,推荐您查看该文章《知乎:一种减少字体加载影响的新方法:CSS 字体描述符(译)》

unicode-range 优化说明

当你引入官方的 css 字体链接后,有些文件里的一个 unicode-range 属性引起了你的注意,这个属性的作用是规定不同的字符加载不同字符集文件。通俗讲我们会把一个字体分成多个字符集,然后按需加载。例如一个页面只有 500 个字,但是这 500 个字恰好都在一个字符集里面,那么其他的字符集就不需要加载,换句话说就不需要加载整个字体文件,因此节省了流量和优化了加载速度。

使用该优化方式的上述链接中有:思源黑体(谷歌)、小米字体(小米)、鸿蒙字体(B 站)、华康金刚黑(字节跳动)

字体文件格式

本文一律使用 woff2 字体格式,在如今浏览器趋于 Chromium 内核的潮流下,作为个人站点可以不需要考虑旧版本浏览器的兼容性。若您想了解其他字体格式,推荐您查看《知乎:关于字体格式》

结语

就 windows 上的清晰效果而言,无论你使用何种字体,都没有在 windows 经过特殊优化的微软雅黑更好。如今当你在 windows 安装苹方字体后,你会发现苹方字体的显示效果也十分漂亮,这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在 Windows 经过特殊优化的字体,也会在 Windows 上大放异彩。

魔改笔记四:友链页重构及友链朋友圈适配

2024年4月10日 13:02
前天晚上,店长更新了方舟系列的友链卡片,作为店长铁粉,当然要第一时间买店长的火柴啦,于是我将店长所有的友链卡片稍微整合了一下,结合安知鱼的教程,最终实现了“五世同堂”,五种友链可以混合搭配,于是在此分享给大家!

我最近做的有趣的事

2023年12月21日 22:26
每日写作提示
您最近做了什么有趣的事?

“最近做了什么有趣的事?”,这是今天的WordPress Writing Prompts

我觉得每天白天搬完砖回家,停车场点根烟看到猫咪去逗它,拿起手机给它拍照是个有趣的事;回到家陪BB玩耍,看着他的每一举动,这也是非常有趣的事;和家人周末一起去公园一待就是到傍晚的惬意时光等等…

其中做过的有趣且有意义的事,同时也包括重新回到独立博客这个圈子,及其衍生出来所做的一些有趣的事情。

旧文章

把以前的数据恢复后,厚着脸皮去翻看以前自己写过的东西。时隔八年后再去看看,过去的自己原来这么的幼稚与迷惑。不去回忆自然是不再深刻,即便有《蝴蝶效应》里面的日记本,让我回到过去那是大可不必,活在当下才能无所畏惧,真正的自由与幸福是对于现在的认识、接受与察觉,去体验和理解当下的每一个瞬间,而不是过去或等待未来。

友情链接

翻看了链接库里以前的小伙伴,十几个独立博客只剩下三个能访问。一个不更新,一个换了样,还有一个是威言威语,他真的很棒!

威言威语 曾经在我博客里评论道“当初很多玩博客的玩玩淡出去了”,我回复的是“哈哈,看来我还是比部分人坚持~”,结果看来我没能坚持下去,从很多方面他是最好的老师。重新上线第一个想与之建立友链的也就是他,于是乎博客追加了三篇在OneNote记录的一些近期日记进行发布,这样看起来起码是有内容的。然后以一个新站点的状态很不好意思的向他提出了友链申请。。。

因为最近没时间,一开始的友情链接页面真的是直接在页面编辑里添加而不是调用WordPress链接库,晾在那好些天后才抽空处理了一下。没错是看了 威言威语 友链页面的头像上、标题中、描述下并垂直居中的布局做的,只是后来添加了一个内容更新提示。顺便提一下还有存档页里简单的数据统计

最近向一些小伙伴申请了友链,同时把一些觉得不错的独立博客加入RSS阅读器,偶尔看一看大家写些什么也是一件非常有趣且有意义的事。

评论

同样上线后没太多时间去关注,评论表单直接用了WordPress的官方插件Jetpack的时事通讯功能,因为里面包含了“订阅站点”和“订阅评论(新评论邮件通知)”的选项。一开始我觉得这很完美很够用了,直到前几天 雅余 回复说我的博客评论表单是“已重置连接”状态,原来WordPress的网络服务在中国大陆还是那么不稳定,后来就直接恢复了默认表单。感谢 雅余 的细心提醒!

不过没有了新回复邮件通知选项,虽然评论者不一定会开启这个选项,但总觉得缺少了什么。于是抽空制了一个回复通知邮件模板,因为觉得Jetpack里的订阅功能中邮件通知挺好看,就直接照样大致模仿了一下,用户头像使用Cravatar。效果如下:

Jetpack订阅邮件通知
新回复邮件通知

缓存

也就是昨天,把Memcached安排上了。因为所用服务器在新加坡,也没用CDN(启用了Jetpack的图片CDN之*wp.com玄学加速),安装了W3 Total Cache用的是磁盘增强缓存方式,所以唯一能实现用户访问良好体验的愿景就是希望网络好点。Bitnami堆栈默认未捆绑 Memcached服务,PHP也没安装该模块,就一直放着,想着等有空看Bitnami文档去处理,就等到昨天。使用上后加载速度提升不少,至少感觉上是哈哈。

其他

看中现在用的这个WordPress主题Bravada。在确保不修改程序及主题任何文件的情况下利用额外自定义CSSWPCode等插件来进行一些小调整。在关闭博客前好像还没有自定义CSS功能,感觉很好用。

❌
❌