网站建设中,中国大陆地区请使用VPN访问,欢迎提建议,关注LSKR Mastodon

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

本文利用Github Pages教你搭建一个简单website。

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结构,直接上传到博客中。

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

主页地址

إرسال تعليق

Cookie Consent
我们使用 Cookie 来了解您如何使用我们的网站并提升您的体验。这包括个性化内容和广告。
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.