ZoyaPatel

Git Pages如何搭建一个简单的网站

SohaniSharma

GitHub Pages 是一项静态站点托管服务,它直接从GitHub 上的存储库获取HTML、CSS 和JavaScript 文件,(可选)通过构建过程运行文件,然后发布网站。

一、描述

Github Pages 内置构建系统包括

  • JekyllMarkdown 文件构建成一个 HTML 静态网站

  • HTML javaScript CSS 构建整合成一个 web

  • 讲站点与创建域名绑定上线

他本质是一个托管静态网站,利用Github 作为资源上传位置,然后后台帮你构建上线。

二、Github pages 上线一个web服务

对于任何一个仓库,都可以建立一个pages。只需要告知,所需 web 资源文件资源位置。包括所在分支,所在文件路径。Github Pages 就会自动检测是不是一个Jekyll项目(Markdown),还是一个单纯的HTML静态web资源,进行构建上线。

2.1 资源文件仓库

为了方便,我们直接建立一个空仓库。

  • 如果是用户或者组织,那么一个Github账号只允许建立一个这种 Web 仓库名称格式:<user>.github.io<organization>.github.io 全部小写(防止有人大写混淆冒充)。

  • 某一个项目(仓库)Web 那么名称随便起了,是在用户账户下面。也就是常见的项目。

2.2 建立站点

为站点创建入口文件。 GitHub Pages 将查找 index.htmlindex.md 或 README.md 文件,作为站点的入口文件。

对于新建立仓库,我们一般需要有一个默认分支。随意我们初始化仓库。这里就是为了建立一个main分支。

用户创建的时候,Github 会给出代码让我们本地创建对应仓库,进行关联,直接照做即可。

前提条件:有了一个基本仓库,或者说仓库包含了main分支(任何分支都行)。

点击仓库 setting >Pages > 分支以及文件夹 ,指定了web资源所在位置。如图所示:

2.3 上传web资源

Github Pages 是自动判断指定位置的资源,进行构建。

  • 直接上传web资源,比如HTML等资源到指定分支,通过建立一个类似的网站结构,直接传入HTML资源。

  • 使用Jekyll 使用Markdown 形成资源,传入目录中,Github Pages 会自动判断这是一个JekyII 项目。执行JekyII构建,生成静态web资源,上线。

三、实现一个极简web网站

3.1建立首页

使用typora 写一个如下网站,对于图片设置存放为.assert中,路径为相对路径。导出为HTML为了简介,你可以带格式,也可以不带格式。

导入结果

删除源文件 index.md ,将文件放入到项目的docs下,上传到github。

这些都涉及Git 操作,不是本文重点,简单来说,建立一个docs 目录,传入index.assets资源和index.html到目录下。

注意:当然也可以直接从web端操作,上传文件和建立目录。

当我们上传成功后,项目就会给提示:1 in progress check ,打开就是这个。

点开Details 就会显示项目的详细进程。

构建完成后,如果不知道web地址,你可以重新打开setting >Pages 看到

3.2添加文章页面

这里演示了第二种,创建页面的方式。直接在web上操作,添加HTML文件。你可以在这里面填加HTML代码内容。记住本质用git上传都是一样,文件夹是路径,上传即可。

同样的,我们使用markdown 转换方式,实现一个HTML页面,同时修改Home页面的文章链接。

修改主页的链接/建立基本的结构。

四、总结

用户可以去我的哪里直接COPY 过去基本的博客文章结构。

  • 主页包括:一张主题图片和博客标题以及导航栏

  • 文章根据目录进行分类放入不同文件夹

于是我们就有了一个极简的web 。使用Markdown Typroa 编写本地文档,导出成HTML结构,直接上传到博客中。

就是这么简洁,但是包含了一切。

主页地址

Ahmedabad
Kolkata
Hyderabad
后一页 Bangalore 前一页

Random Manga

Ads

نموذج الاتصال