个人网站搭建流程

个人网站搭建流程

话说，一日我看见小破站上有个推荐视频，个人心血来潮，觉得自己搭建一个，在此记录其中的坑和绝大多数流程

第一步 购买服务器

我买的是阿里云的服务器，最便宜的一款35一年
然后需要重置密码
然后给服务器开放80和443端口（默认只开放22）
如下视频
https://www.bilibili.com/video/BV14Z4y1r7AH
在服务器执行命令

yum update
yum install nginx -y

参考
https://blog.csdn.net/qq_39132177/article/details/108447229

第二步 发布自己的html

由于是静态网页资源，在写好直接导入即可
目录是/usr/share/nginx/html

参考
https://github.com/lihangleo2/official_web_copy_redbook

这里我使用的工具是xshell和xftp 破站视频上面那个开源的比我用的这个更好

第三步

其实正常到上面的步骤就可以了，但是我用的资源中存在mp4视频；在访问时需要全部下载好后才能播放，且访问下载速度仅有130KB/s 影响用户体验。主流一般会将其切片成m3u8和ts文件，执行命令后

ffmpeg -i D:\VSProject\myweb\myweb\imgs\ffmpegfolder\background.mp4 -c:v libx264 -hls_time 1 -hls_list_size 0 -c:a aac -strict -2 -f hls D:\VSProject\myweb\myweb\imgs\ffmpegfolder\bg.m3u8

就会生成m3u8和ts。这里需要安装ffmpeg

并且在加载过程中会出现转圈圈和lloading的字，需要video.js初始时去掉
并且过程中还会有一个video多次加载的bug，需要销毁对象
参考
https://stackoverflow.com/questions/63952598/video-player-is-loading-this-is-a-modal-window-how-to-remove-unwanted-text
https://blog.csdn.net/xu_xu_0924/article/details/111934391

代码大致如下

   <div class="center_div_left">
                <div id="my-wrap">
                <video id="video_iphone" class="video_iphone" loop muted poster="./imgs/phone_pic.jpg" style="width:260px;height:564px;">
                    <source>
                </video>
                </div>
                <img class="phone_outer" src="./imgs/iphone_outer.png" alt="">
   </div>
<script>
    var iphoneOptions = {
        autoplay: true,
        loadingSpinner: false,
        errorDisplay: false,

        sources: [{
            src: "./ffmpegfolder/pv.m3u8",
            type: "application/x-mpegURL"
        }],
    };
    //如果myPlayer对象已经存在
    if (typeof (myPlayer) != "undefined") {
        //将myplayer对象消除
        myPlayer.dispose();
        //重新新建对象
        videojs.options.flash.swf = "js/video.min.js/video-js.swf"
        var id = "video_iphone";
        $("#my-wrap").html("<video id='" + id + "' class='video_iphone' loop muted poster='./imgs/phone_pic.jpg' style='width:260px;height:564px;'><source ></video>");
        //设置资源路径

    }
    var myPlayer = videojs('video_iphone', iphoneOptions);

</script>

第四步

在完成以上后，还有一个问题是现在很多情况终端都是手机，主流的手机和PC的打开页面是不一样的，需要做适配
修改nginx.conf
目录在
使用

ps -ef | grep nginx
/usr/sbin/nginx -t

可以看到结果是/etc/nginx/nginx.conf

参考
https://blog.csdn.net/LJFPHP/article/details/78474152
配置文件如下

        location / {
                if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {
                root   /usr/share/nginx/html/mobile;
                }
                index  index.html index.htm;
            }

参考

https://www.jianshu.com/p/7b1aa87f0c57

代码

全部html资源打包如下
https://download.csdn.net/download/weixin_43596589/84994942