如何用github搭建

2023年 8月 2日 88.7k 0

一、前言

GitHub 是最受欢迎的开源版本控制系统之一,可以用于协作开发、项目管理和代码托管。有时我们还可以基于 GitHub Pages 搭建个人或团队的静态网站。

本文主要介绍如何使用 GitHub 搭建自己的个人或团队静态网站,包括创建 GitHub 账号、创建仓库、使用 Jekyll 生成网站、以及绑定域名等具体步骤。

二、创建 GitHub 账号

首先我们需要前往 GitHub 官网,注册一个 GitHub 账号。如果已经有了 GitHub 账号可以跳过这一步。

创建完成 GitHub 账号后,我们可以选择创建新的仓库。

三、创建仓库

在 GitHub 主页上点击 “New Repository” 按钮。

创建仓库

在 “Repository name” 输入框中输入你的网站名称,比如说 “my-awesome-website”。

命名仓库

接下来,我们需要选择仓库的类型。由于我们要搭建一个静态网站,因此选择 “Public” 类型即可。

选择公开类型

最后点击 “Create Repository” 完成仓库的创建。

四、使用 Jekyll 生成网站

接下来,我们需要使用 Jekyll 来生成网站。Jekyll 是一种简单易用的静态网站生成器,类似于 WordPress 和其它 CMS 系统,但它不需要数据库和服务器端脚本的支持,而是通过 Markdown 或 HTML 模板语言生成静态网页。

我们可以克隆一个 Jekyll 模板,该模板为我们提供了基本的网站结构和设计:

git clone https://github.com/barryclark/jekyll-now.git

登录后复制

克隆完成后,我们需要将这个仓库中的所有文件复制到我们自己的仓库中。然后在自己的仓库中新建一个名为 “_config.yml” 的文件,输入以下内容:

title: My Awesome Website
description: A description of my awesome website.

登录后复制

五、绑定域名

现在,我们已经成功搭建了自己的静态网站,并且可以通过访问自己的仓库地址来查看该网站。

但是,我们可能希望使用自己的域名来访问该网站,而不是使用 GitHub 的默认域名。因此,在这一节中,我们将介绍如何将自己的域名绑定到 GitHub Pages 上。

  • 首先,我们需要购买一个域名。有很多域名注册商可以选择,比如 GoDaddy、Namecheap 等。我们可以选择注册一个 .com、.net、.org、.co 等后缀的域名。
  • 接着,在域名注册商的控制台中,找到域名解析管理页面。在这里,我们需要添加一条 CNAME 记录,将域名解析到我们的 GitHub Pages 仓库上。
  • 假设我们的域名为 “mydomain.com”。那么,我们需要添加一条 CNAME 记录,将 “www.mydomain.com” 解析到我们的 GitHub Pages 仓库上。

    添加CNAME

  • 接下来,在我们的 GitHub Pages 仓库中,我们需要添加一个 “CNAME” 文件。在该文件中输入我们要绑定的域名,即 “www.mydomain.com”。
  • 最后,在域名注册商的控制台中,将域名的 DNS 服务器设置为 GitHub Pages 默认的 DNS 服务器:
  • ns1.p19.dynect.net
    ns2.p19.dynect.net
    ns3.p19.dynect.net
    ns4.p19.dynect.net

    登录后复制

  • 等待一段时间后,就可以通过访问自己的域名来查看自己搭建的网站了。
  • 六、总结

    本文主要介绍了如何使用 GitHub 搭建自己的个人或团队静态网站。我们需要首先创建 GitHub 账号,并创建一个新的仓库。然后,我们通过克隆 Jekyll 模板,并添加一个名为 “_config.yml” 的文件来生成网站。最后,我们还讲解了如何将自己的域名绑定到 GitHub Pages 上来访问自己的网站。

    以上就是如何用github搭建的详细内容,更多请关注每日运维网(www.mryunwei.com)其它相关文章!

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论