只能挂静态网页,动态网页还是需要买服务器的
这里只是把代码挂到了码云上,用的码云的gitee page 功能,github也有相同功能,但GitHub服务器在国外,上GitHub很慢所以选择码云,更多更能自行百度吧
文章有点长,但很详细,图文说明!
先展示效果(无聊时随便写的一个首页,就别吐槽了),访问这个可以看到  https://sunset0827.gitee.io/h5-first/
正文教程开始:
1,下载git,懒癌患者百度云传送门 懒癌患者百度云传送门 密码: gvzg
安装一直下一步就行,桌面右键出来这两个选项为安装成功
,新建一个文件夹,在文件夹里右键,点git bash here,弹出来命令行输入
git config --global user.name 姓名 
回车后输入
git config --global user.email 邮箱 
这里的姓名和邮箱是可以随便输入的,刚才新建的文件夹也可以删了,留不留都可以
2,注册并登陆码云:gitee.com,点新建项目(右上角+),项目名称随便起一个,路径后别是中文,其他跟我设置一样就行(不开源也行,不过不开源后面使用git时需要输入码云的账号密码)

3,点击项目,点进刚才新建的项目,如下图


点右边的克隆/下载,然后复制你的项目链接(直接点url然后在url后直接加.git貌似也可以)
4,在桌面右键,点Git GUI Here,然后点Clone Existing Repository(克隆到本地),第一个输入框粘贴刚才的地址,第二个输入框选择桌面然后手动在后面加   /test (文件夹名)   (先新建文件夹再直接选择会有坑,另外文件夹别用以前的,就通过选择路径的时候让系统新建,文件夹名别是中文),然后点Clone.
5,打开刚才的文件夹test,在里面就可以写你的首页和各种静态页面了,(首页名一定要是index.html,不然后面访问还要在url后加上你的文件名.html),写好index.html后点rescan左上角就会扫描出来你刚才做了改变的文件,然后点stage changed,就会把上面改变的文件放到下面的框,然后在右边Commit Message输入框输入版本信息(一般是备注自己相对于上次做了哪些改变,不填不能commit),然后点commit,再点push,这时候可能就需要输入密码了,输入码云的账号密码即可,码云的账号就是在注册时填的个性地址,实在不知道的看图
6,这时候你的代码已经上传成功了,点项目就能看到,在这个项目里点服务,点gitee pages
进去后分支和目录都不用管,直接点启动就行(如果gitee账户没绑定手机号,启动是灰色不能点,绑定手机号即可),然后部署分支上面就会提示:已开启 Gitee Pages 服务，网站地址xxxxxxx,直接点金网站地址就可以看到自己的index.html了(应该是秒进,如果长时间加载没反应可能是gitee服务器还没给你部署好,等五分钟再进就行).

如何把一张图片放到网页上或者如何在浏览器查看一张图片

首先新建一个文件夹，命名为Index（自由命名）
然后在Index文件夹里面放进一张图片
再然后在Index文件夹里面新建一个文本文档，暂时不用命名
接着打开文本文档，在里面输入：<img src=“001.jpg” />
001.jpg是图片的命名，根据实际情况进行修改即可
然后保存文本文档，然后把文本文档的：新建文档.txt  重命名为 tupian.html
双击打开即可

把live2D添加进网页
Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。

—来源：https://baike.baidu.com/item/Live2D/8496493

那么我们怎么把live2D人物模型添加进网页呢？

我就以我的一个网页为例：

先看效果

可以实现鼠标交互。


开始！
初级部分
1.软件准备
如果只是简单使用的话没有什么技术含量：

live2D做好后本地直接打开是没有效果的，所以我们先用搭建出本地服务器环境。

使用XAMPP或其他软件搭建出本地服务器
剩下的部分我们可以直接去“后宫学长”的博客查看具体操作：https://haremu.com/p/205

以上就是初级部分

我在此详细讲解高级操作
我们看到，这些人的博客每次刷新后人物都会改变服装，那么这是怎么实现的呢？

1.我们先来分析live2D文件夹的目录



css、js文件夹放的什么我就不多说了，我们重点来看model文件夹

model顾名思义就是放模型文件的地方

其中tia是人物名，没什么意义。知道一个人物模型放一个文件夹就可以了。

textures是放人物贴图的地方

model.moc是人物模型

model.json类似于人物贴图和模型的索引

2.  接下来我们重点关注model.json文件



可以看到，textures存放的是模型的贴图
"textures":[
        "textures/default-costume.png"
    ],

我们把贴图文件放在\live2d\model\人物名\textures下，

获取每一个贴图的文件名，存放在model.json的textures下



换装的原理就是每次载入网页时为模型指定不同的人物贴图。

我们可以在主页中加上这段：
			<script type="text/javascript">
			
			function RandomNumBoth(Min,Max){
                  var Range = Max - Min;
                  var Rand = Math.random();
                  var num = Min + Math.round(Rand * Range); //四舍五入
                  return num;
            }
			
			    $.getJSON('/live2d/model/Pio/model.json', function(model) {
                    modelObj = JSON.parse(JSON.stringify(model, null, 2)); //这里
                    textures = modelObj.textures;
                    
                    modelObj.textures = ['/live2d/model/Pio/textures/' + textures[RandomNumBoth(0,textures.length)]];
                    loadlive2d('live2d', '/live2d/model/Pio/model.json', '', modelObj);
                });
					console.log("使用的贴图和模型：" + modelObj);
			</script>

原理就是通过 $.getJSON()来获取model.json，在随机读取textures中的一个贴图文件载入就完成了。

模型和贴图主要来自于游戏《药水制作师》
结束

发现好多的博客页面上有这样一个看板娘，非常的讨人喜欢，于是自己就尝试将其添加入网页。
效果图：


首先下载资源并解压：https://www.lanzous.com/i5xllwh

双击live2d.html，这就是一个已经弄好的示例网页。（暂时还没有换装/换人物的一些功能）
用编辑器打开网页源码

这一段是需要引用的css：
<link rel="stylesheet" href="live2d/css/live2d.css" />

这一段是body中需要添加的元素：
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="hide-button">隐藏</div>
</div>

这一段是在body尾部需要引用的javascript资源：
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>//添加jquery环境（必须）
<script type="text/javascript">
    var message_Path = 'https://6dduu6.github.io/live2d/' //message.js的目录（必须填写，否则无法加载交互的文字）
    var home_Path = 'https://6dduu6.github.io/' //网站的根目录
</script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "https://6dduu6.github.io/live2d/model/pio/model.json"); //model.json和其模型等都需要放在服务器网站上
</script>

把这些代码加在所要添加的网页上的对应位置就行了。

建议把资源丢到自己的服务器或github网站中，引用自己的资源地址！！



学习自：

https://blog.csdn.net/kids_calamus/article/details/82719896

https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
我的github：https://github.com/6DDUU6/6DDUU6.github.io/

示例网站：https://6dduu6.github.io/live2d.html