保姆级教程:从零构建GitHub Pages静态网站(上)

简介: 保姆级教程:从零构建GitHub Pages静态网站

1. Github Pages为何物?

Github Pages官网:https://pages.github.com/

GitHub PagesGitHub 提供的一个免费的静态网站托管服务,它允许 GitHub 用户创建和托管自己的静态网站,这些网站可以通过特定的 GitHub 仓库进行管理和托管。


GitHub Pages 的主要特点包括

  • 免费托管GitHub Pages 提供免费的静态网站托管服务,允许用户将自己的网站内容托管在 GitHub 上,用户不需要支付额外的托管费用;
  • 使用简单: 创建和管理 GitHub Pages 静态网站相对简单,特别是对于熟悉 GitHub 的用户来说,用户只需在自己的 GitHub 帐户中创建一个特定名称的仓库,将网站文件上传到该仓库即可;
  • 自定义域名: 用户可以选择使用自定义域名来访问他们的 GitHub Pages 网站,这使得它们更适合个人网站、博客和项目页面;
  • 支持多种静态网站生成工具GitHub Pages 支持多种静态网站生成工具,如 JekyllHugoGatsby 等,以及纯HTMLCSSJavaScript 等前端技术,这使得用户能够根据自己的需求选择适合他们的工具;
  • 自动构建: GitHub Pages 可以自动构建用户上传的网站内容,无需用户手动生成或编译网页,这使得发布网站变得更加简单。

对于开发人员和技术爱好者来说,GitHub Pages 是一个很好的选择,用于托管个人网站、博客、文档、项目页面等静态内容,它提供了一个方便的方式来分享和展示自己的作品。

2. 快速搭建第一个Github Pages网站

在搭建前,默认已经注册成功了Github用户,现在开始根据官网教程一步一步的搭建。

GithubPages的站点类型有几种:

  • 个人或组织站点(User or Organization sites):对于个人或组织站点,每个GitHub用户或组织只能有一个站点,它通常使用username.github.ioorganizationname.github.io的格式,这是GitHub Pages的默认站点,通常用于个人网站、博客等。
  • 项目站点(Project sites):对于项目站点,每个GitHub仓库可以有一个关联的GitHub Pages站点,这意味着对于每个项目,您可以创建一个独立的GitHub Pages站点,无需限制。

本文讲解下以上两种建站的方式。

2.1 搭建个人(组织)类型的网站

Step1: 新建一个项目

登录Github:https://github.com/,在顶部菜单栏点击“+”,然后“New repository”新建仓库,输入项目的相关信息,然后“Create repository”创建仓库:

Step2: 创建一个界面文件

首先创建一个文件:

输入文件内容,点击提交:

输入提交信息,点击提交

Step3: 访问

大概等待几十秒,访问:https://用户名.github.io/,即可部署第一个属于自己的静态网站了,可以看到部署成功了:

2.2 搭建项目类型的网站

Step1: 新建一个项目

登录Github:https://github.com/,在顶部菜单栏点击“+”,然后“New repository”新建仓库,输入项目的相关信息,然后“Create repository”创建仓库:

Step2: 创建一个界面文件

同样是创建一个文件:

同样写入内容:

然后输入提交信息:

Step3: 设置Github Pages

点击Settings:

设置Github Pages:

Step4: 保存并访问

点击上图的保存,然后不断刷新保存之后的页面,直至出现GtihubPages的地址:

点击跳转之后,可以看到已经为该项目创建了静态网站了:

目录
相关文章
|
16天前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
18天前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
21天前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
24天前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
26天前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
20 2
|
1月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
36 0
|
1月前
|
算法 程序员 开发工具
GitHub上新!14个Python项目详细教程(附完整代码)
Python作为程序员的宠儿,越来越得到人们的关注,使用Python进行应用程序开发的也越来越多。 今天给小伙伴们分享的这份项目教程完整代码已上传至GitHub,你可以选择跟着这份教程一段一段的手敲出来这几个项目,也可以直接从GitHub上copy下来。
|
2月前
|
C语言 Python
专为编程小白设计的Python零基础入门教程,GitHub星标破W
市面上大多数技术类的书籍都着重于一步步的构建系统的知识体系,并不是说这样就是不对的,但这样按部就班的学习注定了需要花费大量的时间用来掌握“基础知识”,或死记硬背,或慢慢理解。 然而世界不会迁就你,而是在步步紧逼的告诉你要赶紧学完,赶紧找工作,赶紧挣钱,这才是你生活的基础。 今天给小伙伴们带来了一份《编程小白的第一步Python书》,这本书是专为零基础小白设计的,不会告诉“先学C语言,会更好理解Python”这种狗屁道理。而是先带你掌握搭建项目所用到的最少得知识,再真实的项目搭建中实践自己的所学,逐渐的完善知识体系。
|
2月前
|
Python
封神!霸榜GitHub的零基础Python教程居然是本早教书
近期托朋友的福,给大家找来了一份Python早教书,本来是给我大侄子准备的,结果看我发现更适合零基础学编程的小白。 你想想看,本来就是给孩子看的东西,能难到哪里去,孩子都能上手的东西,到咱手里那还不得上天啊!
|
1月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
25 0