花一块钱----快速部署一个自己的静态网站(京东云服务器)

最新推荐文章于 2024-06-06 12:11:28 发布
最新推荐文章于 2024-06-06 12:11:28 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： 前端 文章标签： 部署静态网站 Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geanwen/article/details/77720423
版权

最近参加了公司的前端后台团队帮忙，小白一枚，一直在学习，学习的都是基础，所以一个多月没有写博客。

前几天在大神郭林的公众号文章里发现了一片福利文章。

京东服务器搞活动，我花了一块钱买了两个月的（嘿嘿嘿），有意向的小白下面文章里有链接。

没买的同学注意，只能买一次，买了一块钱的续费就变成正常价位了（反手就给自己一个脸蛋子）。

这几天一直忙项目，到今天才闲下来自己发布一个静态网站试试。

贴出郭林大神文章地址：点击打开链接


再贴出我部署好的网站：点击打开链接


大神的文章写的很详细了，我就贴一下我部署的静态网站的代码，是很多天前看视频写的一个demo，很好看。

主要是怕以后找不到了，在这里记录下。


html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>

<body style="height: 100%; width: 100%">

<canvas id="canvas" style="height: 100%;width: 100%">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script src="digit.js"></script>
<script src="countdown.js"></script>

</body>

</html>

坐标js： 

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

cavas绘制js： 

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

// 结束的时间
const endTime = new Date();
// 设置据当前时间向后推一小时时间
endTime.setTime(endTime.getTime() + 3600 * 1000);
// 现在倒计时有多少秒
var curShowTimeSeconds = 0;

// 声明存储小球的数组
var balls = [];
// 存储颜色的数组
const colors = ["#33B5E5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ffbb33","#ff8800","#ff4444","#cc0000"];

window.onload = function () {

    // 屏幕body的宽高
    WINDOW_WIDTH = document.body.clientWidth;
    WINDOW_HEIGHT = document.body.clientHeight;

    // 设置左边距十分之一 即内容占五分之四
    MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
    // 根据内容占比算出小球半径
    RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;
    // 设置距离顶部五分之一
    MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds = getCurrentShowTimeSeconds();

    setInterval(
      function () {
          // 绘制
          render(context);

          update();
      },
      50
    );
}

function render(cxt) {

    // 刷新操作，这里刷新整个屏幕
    cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);

    var hours = parseInt(curShowTimeSeconds / 3600);
    var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);
    var seconds = curShowTimeSeconds % 60;

    // 绘制时间
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
    renderDigit(MARGIN_LEFT + 15*(RADIUS + 1), MARGIN_TOP, parseInt(hours %10), cxt);
    renderDigit(MARGIN_LEFT + 30*(RADIUS + 1), MARGIN_TOP, 10, cxt);
    renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
    renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);
    renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
    renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
    renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);

    // 绘制弹出的小球
    for (var i = 0;i < balls.length;i++){
        cxt.fillStyle = balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI, true);
        cxt.closePath();
        cxt.fill();
    }
}

function renderDigit(x, y, num, cxt) {

    cxt.fillStyle = "rgb(0, 102, 153)";

    for (var i = 0;i < digit[num].length;i++){
        for (var j = 0;j < digit[num][i].length;j++){
            if (digit[num][i][j] == 1){
                cxt.beginPath();
                cxt.arc(x + j*2*(RADIUS + 1) + (RADIUS + 1), y + i*2*(RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2*Math.PI);
                cxt.closePath();

                cxt.fill();
            }
        }
    }
}

// 算出距离结束时间还有多少毫秒
function getCurrentShowTimeSeconds() {

    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();

    ret = Math.round(ret / 1000);

    // 如果需要改成时钟效果 则直接计算今天已经过去多少毫秒
    // var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();

    return ret > 0 ? ret : 0;
}

// 处理变化
function update() {

    // 下一次显示的时间
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();

    var nextHours = parseInt(nextShowTimeSeconds / 3600);
    var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSeconds = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSeconds / 3600);
    var curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60);
    var curSeconds = curShowTimeSeconds % 60;

    if (nextSeconds != curSeconds){

        // 如果小时的十位数发生改变
        if (parseInt(curHours/10) != parseInt(nextHours/10)){
            addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours/10));
        }
        // 小时的个位数
        if (parseInt(curHours%10) != parseInt(nextHours%10)){
            addBalls(MARGIN_LEFT + 15*(RADIUS + 1), MARGIN_TOP, parseInt(curHours/10));
        }
        // 分钟的十位数
        if (parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
            addBalls(MARGIN_LEFT + 39*(RADIUS + 1), MARGIN_TOP, parseInt(curMinutes/10));
        }
        // 分钟的个位数
        if (parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
            addBalls(MARGIN_LEFT + 54*(RADIUS + 1), MARGIN_TOP, parseInt(curMinutes%10));
        }
        // 秒钟的十位数
        if (parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
            addBalls(MARGIN_LEFT + 78*(RADIUS + 1), MARGIN_TOP, parseInt(curSeconds/10));
        }
        // 秒钟的个位数
        if (parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
            addBalls(MARGIN_LEFT + 93*(RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds%10));
        }

        curShowTimeSeconds = nextShowTimeSeconds;
    }

    // 对已经存在的小球状态进行更新
    updateBalls();
}

function addBalls(x, y, num) {
    for(var i = 0;i < digit[num].length;i++){
        for (var j = 0;j < digit[num][i].length;j++){
            if (digit[num][i][j] == 1){
                var aBall = {
                    x:x+j*2*(RADIUS + 1) + (RADIUS + 1),
                    y:y+i*2*(RADIUS + 1) + (RADIUS + 1),
                    // 小球的加速度
                    g:1.5 + Math.random(),
                    // x方向的速度
                    vx:Math.pow(-1, Math.ceil(Math.random()*1000)) * 4,
                    // y轴方向的速度，设置为-5，即小球会有一个向上抛的动作
                    vy:-15,
                    // 随机出一个颜色
                    color:colors[Math.floor(Math.random()*colors.length)]
                };

                // 添加到数组中
                balls.push(aBall);
            }
        }
    }
}

// 已经存在的小球状态更新
function updateBalls() {
    for (var i = 0;i < balls.length;i++){

        // 小球x，y方向的位置
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;

        // y轴方向速度受加速度影响
        balls[i].vy += balls[i].g;

        // 判断是否出边界
        if (balls[i].y >= WINDOW_HEIGHT - RADIUS){

            // 先将小球位置固定
            balls[i].y = WINDOW_HEIGHT - RADIUS;

            // 在设置小球y轴速度的方向（1取反。2设置由于摩擦产生的阻力将速度变为原来的0.75）
            balls[i].vy = -balls[i].vy * 0.75;
        }
    }

    // 循环取出
    var cnt = 0;
    for (var i = 0;i < balls.length;i++){

        // 如果小球的右边缘大于零（右侧还在canvas内）
        // 并且小球的左边缘还在canvas内
        if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){

            // 当发现符合上面判断条件（在画布内）的小球，则负值给cnt位置
            // cnt从0开始，循环之后，在cnt之内的都是还留在画布内的小球
            balls[cnt++] = balls[i];
        }
    }

    // 将cnt之后的小球都删掉
    while (balls.length > cnt){
        balls.pop();
    }

}








geanwen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
https://zhuanlan.zhihu.com/p/448870120
Chubby_xp的博客
12-23 1007
开源应用中心聚合了目前最热门的前端开源应用模版，让大家真正可以做到像安装APP一样来上线一个网站。目前已经支持最热门的前端框架，包括Vue.js、React、Nuxt.js、Next.js、AntDesign等，还有内容管理平台Hexo、Docusaurus、VuePress、Sapper等。
基于京东云服务器来搭建javaWeb 运行环境
Stevefat
09-20 2069
前段时间购买了京东云的云服务,准备整合起来放上自己的网站,经过多次摸索才整好,特此记录一下,基本上所有平台的云服务器都可以使用. 系统是Ubuntu 16.04.2 LTS 因为我的系统的linux 的所以直接使用命令行来操作,win 的可以使用 xshell linux 下登录与服务器 ssh -i /path/to/JD -p 22 root@116.196.x.x 输入密码登录具体
基于京东云云主机搭建WordPress网站
云计算技术实践
06-19 716
1 摘要 本文描述基于京东云云主机，搭建WordPress网站所需的MySQL数据库和Web应用，并在完成Plugin配置后发布一篇博文的全过程。本文将用到如下京东云资源： 云主机(m.n2.large，内存优化标准型，机器名为jdcoe-srv010)：作为MySQL数据库 云主机(c.n2.large，计算优化标准型，机器名为jdcoe-srv011)：作为Web服务 2 * 40G SSD...
京东云轻量云主机一键部署幻兽帕鲁教程！
DeChenYun_Blog的博客
06-04 172
幻兽帕鲁》是一款备受瞩目的开放世界生存建造游戏，近期在游戏界非常火爆。玩家可以在游戏世界中收集神奇的生物“帕鲁”，并利用它们进行战斗、建造、农耕、工业生产等各种活动。与其他开放世界游戏不同，要想实现多人联机游戏，玩家需要自行搭建服务器。
京东云服务器怎么做网站,建站实践：京东云擎免费搭建wordpress网站
weixin_39833469的博客
08-10 737
在jae.jd.com也推出了云服务，前期有一些免费的资源可以利用，大家可以通过这个平台练练第一步/STEP1：注册京东账号完成实名认证先注册一个京东的账号，然后需要验证你的手机(实名制的相关要求)，然后就可以使用京东云擎服务了。完成注册后登陆，访问控制台http://i.jcloud.com/user/info/authorization#appengine，申请京东云擎服务。第二步/STEP2...
京东云轻量云主机使用WordPress搭建博客教程
最新发布
DeChenYun_Blog的博客
06-06 536
WordPress是使用最广泛的博客和内容管理系统，可以快速搭建独立的博客、论坛等网站，WordPress支持丰富的插件和模板，功能强大，易于扩充功能。本文以轻量云主机（CenTOS 7.6系统）为例，介绍如何搭建单机版WorPress。
Go-Ran:一个用Go编写的简单静态Web服务器
08-13
Go-Ran是一个基于Go语言开发的简单静态Web服务器，它为用户提供了一种快速启动本地Web服务来托管静态文件的方法。Go语言，又称Golang，是由Google开发的一种静态类型的、编译型的、并发型且具有垃圾回收功能的编程...
Heroku-Static-Site:用Heroku托管一个简单的静态网站
05-23
Heroku静态网站在Heroku上制作静态网站的教程脚步添加一个名为composer.json的文件，并在其中添加： {} 添加一个名为index.php的文件，并在内部添加： <?php include_once("home.html"); ?> <?...
cpp-LEAR是一个以惊人效率提供静态资源的简单HTTP服务器
08-16
总结，cpp-LEAR是一个高效、轻量级的C++ HTTP服务器，专注于静态资源的快速分发。其设计和实现揭示了如何利用C++语言特性来优化性能，为开发者提供了深入学习HTTP服务器和C++并发编程的宝贵机会。对于任何想深入了解...
static-comments:一个 Probot 应用程序，用于为静态网站启用评论
05-29
一个NodeJS 应用程序，可以对托管在 GitHub 上的“静态站点生成”网站进行评论 安装 您可以托管自己的static-comments实例（例如在Heroku上），然后将其安装在GitHub帐户中，也可以直接安装使用我维护的实例的公共...
阿里云快速搭建一个静态网站的方法步骤
01-20
如果你刚开始接触可看一下，我建议先给自己的静态网站发布到服务器上去。 准备： 1、申请注册一个服务器 申请注册一个云服务器，可以阿里云、腾讯云等等。学生党使用服务器有优惠哈~ 2、配置ftp\ssh环境 ps：我知道...
快速部署网站容器化
小马奔腾的博客
05-06 614
前言：如今容器化正愈演愈热，未来的一个趋势，不学点容器化东西，怎么能行，技术就是一点点学习积累上去的。今天跟大家分享一个使用docker快速部署网站的案例。 大家都知道部署一个网站，首先你的有数据库存储吧，其次准备好一个网站包。这里呢我结合我自己部署一个网站的案例跟大家阐述下具体步骤细节。 我的网站是一个标准的java开发的web项目，是一个war包，使用tomcat容器进行运行网站。数据库是使用...
怎么把静态网页放到服务器上,将静态网页部署在云服务器上
weixin_35070578的博客
08-06 3376
将静态网页部署在云服务器上 内容精选换一换部署提供可视化、一键式部署服务，支持并行部署和流水线无缝集成，实现部署环境标准化和部署过程自动化。本节通过以下五步介绍如何使用部署服务将归档在软件发布库的软件包部署到云主机上。第一步：准备弹性云服务器第二步：添加授信主机第三步：新建部署任务第四步：执行部署任务第五步：验证部署结果本示例中用的应用程序运行需要部署到服务器上才可以运行。本示例在分布式HA部署场...
云服务器如何快速部署访问静态页面（个人网站博客等）
John_D_B_Lee的博客
01-30 640
可以使用SecureCRT，本地远程连接到服务器（需要用户名与密码，ip等），公网id（或域名，需要备案与配置）+nginx配置的端口访问。云服务器ecs下，配置ip、端口所有人都可访问。项目可放到/var/www/html下，需新建。传完文件权限设置777。
本地搭建简单服务器运行静态页面
xilejie的博客
06-20 1026
http-server 服务依赖于node，要先安装node.js。如果访问入口为其他名称的html文件（例如demo.html）可通过。1、全局安装http-server。如果访问入口是index.html。2、安装完成，查看版本。
阿里云ECS静态建站学习
国庆的博客
02-08 997
访问网站步骤： 1. 输入域名 2. 自动调用DNS（域名服务器）将域名解析为IP地址 3. 浏览器通过IP地址找到服务器 4. 服务器返回网页至服务器 建网站基本步骤： 1. 申请一个独立域名 2. 申请云服务器ECS，存储和运行网站内容 3. 安装完整环境（Apache） 4. 发布网站内容至服务器 5. 第一步注册的域名解析至云服务器的外网IP地址 ...
(阿里云)Linux部署静态html页面
向上的"狼"的博客
08-03 4515
(阿里云)Linux部署静态html页面
Nginx部署前端静态网站详细教学（一步步操作）
Ghmin的博客
01-16 5844
从零开始使用Xshell、Xftp、Nginx 简单部署静态网站，需准备云服务器(阿里云、腾讯云、华为云等都可)
如何快速部署静态页面？
shiter编写程序的艺术
06-07 2735
文章大纲静态页面静态页面的几种方式1. linux 主机的 httpd 服务2. Nginx 反向代理自动化部署的几种方式 朋友圈大神胡老师说过，都2020年了，写代码实现不是实现的唯一方式，天下武功唯快不破。如何快速构建，持续交付才是王道。比如经常有这样的场景， 静态页面 静态页面的几种方式 gitlab github 都支持 项目文件展示为静态页面 甚至，jupyter 也可以 作为静态页面直接分享出去 1. linux 主机的 httpd 服务 2. Nginx 反向代理 自动化部署的几种方式 ci
WT32-ETH01有线模块AT指令例程v1.2.pdf
05-21
这些指令例程对于开发者来说是非常宝贵的资源，可以帮助他们快速集成WT32-ETH01模块，实现各种网络功能。需要注意的是，在使用DHCP时，确保网络环境支持IP地址分配，否则可能导致模块无法正常工作。在具体应用中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值