创建仓库
仓库名为username.github.io,username是注册的github用户名。
初始化仓库
创建文件index.html,随便贴一些内容进去。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>智能家居开放平台</title>
<style>
* {
background: black;
color: azure;
margin: 40px;
padding: 20px;
}
.left {
float: left;
}
.right {
float: right;
}
#code_pen {
background: #444;
}
.code_text {
margin: 0;
padding: 0px;
width: 486px;
height: 84px;
}
#login_text {
color: azure;
background: #444;
padding: 10px;
}
.mp0 {
padding: 0px;
margin: 0px;
}
.margin_20 {
margin-left: 20px;
}
.head_box {
background: #fff;
}
</style>
</head>
<body class="mp0">
<div class="head_box mp0">
<div class="head_left left mp0">
<span class="margin_20 mp0">智能家居开放平台</span>
</div>
<div class="head_right right mp0">
<span class="margin_20 mp0">首页</span>
<span class="margin_20 mp0">论坛</span>
<span class="margin_20 mp0">文档</span>
<span class="margin_20 mp0">登录</span>
</div>
</div>
<div id="index_left" class="left">
<h1>SmartHome</h1>
<h5>介绍</h5>
<p>智能家居开放平台，支持stm32,树莓派，arduino 等硬件接入。</p>
<p>网站建设中</p>
</div>
<div id="index_right" class="right">
<!-- <img src="./image/code_text.png" id="img_code_text">-->
<div id="code_pen">
<div id="login_text" class="mp0">登录</div>
<div class="mp0">
<textarea class="code_text" id="editor">
<!-- 请输入用户名和密码 -->
$ username:
$ password:</textarea>
</div>
</div>
</div>
</body>
</html>
https
勾选 Enforce HTTPS
访问设置
username.github.io仓库中
依次点击 Settings --> pages --> Custom domain --> 输入注册的域名或者二级域名
域名解析
阿里云
控制台 --> 域名 --> 解析 --> 添加记录
记录类型：CNAME
主机记录：www
解析路线：默认
记录值 ：username.github.io
TTL : 默认
