保姆级教程:从零构建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的地址:

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

目录
相关文章
|
2月前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
90 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
1月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
72 1
|
4月前
|
开发工具 git
[github初学者教程] 分支管理-以及问题解决
[github初学者教程] 分支管理-以及问题解决
33 0
|
1月前
|
数据采集 人工智能 Rust
『GitHub项目圈选周刊01』一款构建AI数字人项目开源了!自动实现音视频同步!
『GitHub项目圈选周刊01』一款构建AI数字人项目开源了!自动实现音视频同步!
232 0
|
4月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
|
4月前
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
133 0
|
3月前
|
存储
github pages 部署单页面
github pages 部署单页面
54 0
|
3月前
|
JavaScript Ubuntu 网络安全
使用github actions,将私有仓库的构建文件发布到另一个公开仓库,并同步到gitee
使用github actions,将私有仓库的构建文件发布到另一个公开仓库,并同步到gitee
98 0
|
3月前
|
存储 搜索推荐 安全
GitHub教程-自定义个人页制作
GitHub是全球最大的代码托管平台,除了存放代码,它还允许用户个性化定制自己的主页,展示个人特色、技能和项目。本教程旨在向GitHub用户展示如何制作个性化主页,同时,介绍了GitHub Actions的应用,可以自动化更新主页内容。通过本教程,GitHub用户将学会如何打造独具个性的GitHub个人主页,吸引更多关注和合作机会。具体代码请参阅文末。
72 0
|
3月前
|
缓存 网络协议 CDN
Docsify 配合 Github Pages 搭建一个自己的云笔记
Docsify 配合 Github Pages 搭建一个自己的云笔记
95 0