如何用github搭建专属域名的网站 | How to build a website with binding domain on github

By @alanzheng1/24/2018utopian-io

What Will I Learn?

  • Create new repository on github.
  • Deploy the website on github.
  • Binding domain with the website.

可以学到什么?

  • 创建新的github仓库
  • 在github上发布网站
  • 将域名和网站绑定

Requirements

  • github account
  • Your own domain

学习要求

  • github帐号
  • 注册域名

Difficulty

  • Basic

难以程度

  • 容易

Tutorial Contents

教程内容

  • 在github上创建网站代码仓库,注意仓库名称必须是:github用户名+.github.io。如下图我的github用户名是alanzheng,因此仓库名是:alanzheng.github.io
    image.png
    image.png

  • 使用git工具将代码仓库clone到本地:

git clone https://github.com/AlanZheng/alanzheng.github.io.git
  • 在本地的文件夹(alanzheng.github.io)中创建index.html文件,并且收入如下内容:
<!DOCTYPE html>
<html>
<body>
<h1>Hello github page</h1>
</body>
</html>
  • 将index.html文件添加到代码仓库:
git add index.html
git commit -m "add index.html"
  • 将本地代码仓库推送到github仓库:
git push

输入github的用户名和密码即完成推送

  • 在浏览器的地址栏输入alanzheng.github.io即可看到index.html的内容:
    image.png
  • 在域名注册商处注册域名,比如我注册的域名:alanzheng.top,并且添加如下A记录
    image.png
    上图中的ip地址可以通过ping alanzheng.github.io获取:
    image.png
  • 将域名和网站绑定
    在本地仓库alanzheng.github.io中新建文件CNAME,输入内容为注册的域名。比如:alanzheng.top
    image.png
    用上面添加index.html的方法将GNAME文件推送到github仓库。
  • 测试网站:
    在地址栏中输入注册的域名alanzheng.top,即可访问到自己的主页:
    image.png



Posted on Utopian.io - Rewarding Open Source Contributors

17

comments