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

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

目录
相关文章
|
21天前
|
安全
Deploy Github Pages With GPG Signing
This article is also posted on my blog, feel free refer to it for the latest revisions: [Deploy Github Pages With GPG Signing](https://blog.timerring.com/posts/deploy-github-pages-with-gpg-signing)
110 70
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
PeterCat:一键创建开源项目 AI 问答机器人,自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
PeterCat 是一款开源的智能答疑机器人,能够自动抓取 GitHub 上的文档和 issue 构建知识库,提供对话式答疑服务,帮助开发者和社区维护者高效解决技术问题。
184 7
PeterCat:一键创建开源项目 AI 问答机器人,自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
|
4月前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
78 2
|
4月前
为什么 GitHub Pages 的文章标题不能以 @ 开头?
本文记录了一个 GitHub Pages 博客网页上文章标题以 `@` 开头导致的问题,并分析了原因,提供了解决方法。
59 0
|
6月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
211 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
6月前
|
数据采集 数据可视化 Ruby
GitHub星标破万!Python学习教程(超详细),真的太强了!
Python 是一门初学者友好的编程语言,想要完全掌握它,你不必花上太多的时间和精力。 Python 的设计哲学之一就是简单易学,体现在两个方面: 1. 语法简洁明了:相对 Ruby 和 Perl,它的语法特性不多不少,大多数都很简单直接,不玩儿玄学。 2. 切入点很多:Python 可以让你可以做很多事情,科学计算和数据分析、爬虫、Web 网站、游戏、命令行实用工具等等等等,总有一个是你感兴趣并且愿意投入时间的。
|
6月前
|
存储 Linux Go
如何在Github上Pull Request的教程
关于如何在GitHub上发起Pull Request(合并请求)的详细教程,包括Fork(分支)、Clone(克隆)、创建新分支、修改代码、提交更改、推送到远程仓库等步骤,并提供了解决权限问题的方法,如创建个人访问令牌(Personal Access Token)。
207 6
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
这篇文章是一份详细的GitHub使用教程,介绍了如何在GitHub上创建仓库、创建分支、编辑和发布更改内容、发起拉取请求以及合并分支的操作步骤。
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
|
6月前
GitHub——使用GitHub Pages生成在线文档
GitHub——使用GitHub Pages生成在线文档
41 0
|
6月前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。

热门文章

最新文章