Web on Yazzyk's Blog

使用caddy2,docker-compose快速部署一个自带TLS和HTTP3的网站

Sun, 11 Dec 2022 00:00:00 +0000

使用背景

发现Caddy是我刚刚将博客换了个服务器，一时兴起，听闻IETF已经在今年(22年6月)推出了正式版HTTP3(RFC9114),那就干脆使得博客支持上，但找了半天，基于nginx都没有一个简单的方案，都是要去编译nginx-quic然后修改配置文件,看着就感觉好麻烦，也没有找到合适的docker来支持，弄完还得去弄证书来开启https。偶然间又看到一篇文章利用Caddy轻松HTTPS，支持HTTP3/QUIC,然后查了一下，发现caddy这个web服务器已经是默认支持HTTP3了，而且还可以自动去生成TLS证书，自动开启https，官方支持docker，那不快乐起来了吗！

简介

Caddy是一款用Golang编写的开源的web服务器，相比于Nginx来说有着以下优点

可自动获取TLS证书
自动续签证书
默认支持HTTP3(RFC9114)协议
配置文件简单易上手

docker-compose.yml

version: "3.7"

services:
  caddy:
    container_name: caddy-server
    image: caddy:2.6.2
    restart: always
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - $PWD/Caddyfile:/etc/caddy/Caddyfile
      - $PWD/site:/srv
      - $PWD/caddy_data:/data
      - $PWD/caddy_config:/config

创建一些映射出来的文件和文件夹

在docker-compose.yml同目录下

Springboot日志显示到Web

Sat, 15 Jun 2019 00:00:00 +0000

0x01

首先要在服务器端运行打包好的jar包，并将log打印到指定文件中

nohup java -jar /www/wwwroot/air.css0209.cn/air-0.0.1-SNAPSHOT.jar > /www/wwwroot/air.console.css0209.cn/nohup.txt

具体是什么文件，根据你自己的情况来改

0x02

在HTML文件中写入

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<meta name="theme-color" content="#222">
    <title>后端输出内容</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        html{
            padding: 0;
            margin: 0;
            overflow-x: hidden;
        }
      	h1{
      		padding: 0;
            margin: 0;
          	text-align: center;
        }
        body{
            padding: 0;
            margin: 0;
          background-color: #222;
        }
        #main{
            width: 100%;
            height: 100%;
            background-color: #222;
            
            color: #fff;
            padding: 20px 0;
            min-height: 800px;
        }
        textarea{
            width: 100%;
            height: 100%;
            background: #222;
            color: #fff;
            border: none;
          	padding: 30px;
            min-height: 820px;
          	font-family: Monaco;
        }
      @media screen and (max-width: 700px){
        textarea{
        	padding: 0;
        }
      }
      textarea:focus{
      	outline: none;
      }
    </style>
</head>
<body>
    <div id="main">
        <h1>后端输出</h1>
        <textarea id="info" readonly=""></textarea>
    </div>
    <script>
      var line = 1;
        setInterval(function(){
    	$.ajax({
          url: 'nohup.txt',
          dataType: 'text',
          success: function(data) {
            $('#info').html(data);
            var scrollTop = $("#info")[0].scrollHeight;
            if(line != scrollTop){
              line = scrollTop;
              console.log("new log"+line);
              $("#info").scrollTop(line);
            }
          }
    });
},1000);
    </script>
</body>
</html>

然后边可以在web端查看你的springboot的log内容了。

Hugo_blog搭建

Tue, 21 May 2019 00:00:00 +0000

CodeSheep视频 Hugo中文文档我的环境为MacOS

安装 Hugo

brew install hugo

生成站点

hugo new site hugo_blog
cd hugo_blog

安装一个主题

hugo的主题

从官网选用一个主题
例如我选的zozo
看到insetallation
执行命令

git clone https://github.com/imzeuk/hugo-theme-zozo themes/zozo

写一篇文章

hugo new posts/mypost.md

然后打开文件用markdown写就行我的文章之前是hexo的，可以直接复制粘贴文件到posts目录下

使用js渲染HTML表格

Mon, 04 Mar 2019 00:00:00 +0000

突发奇想

那天，老师在上面讲一个HTML的表格，然后过于无聊的我，突发奇想，能不能用js来渲染繁琐复杂的表格，减少HTML的代码了量。

HTML

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border: 1px solid #000;
        }
        th,tr,td{
            border: 1px solid #000;
            text-align: center;
            padding: .5rem;
        }
    </style>
    <script src="js/index.js"></script>
</head>

<body>
    <script>
        context = [
            ['Name', 'Math', 'English', 'IT'],
            ['张三', 60, 80, 90],
            ['李四', 90, 80, 89],
            ['王五', 70, 89, 78]
        ]
        table(context);
    </script>
</body>
</html>

JS

function table(context) {
    document.write('<table>');
    for (var i = 0; i < context.length; i++) {
        document.write('<tr>');
        for (var j = 0; j < context[i].length; j++) {
            if (i == 0) {
                document.write('<th>' + context[0][j] + '</th>');
            }else{
                document.write('<td>' + context[i][j] + '</td>');
            }
        }
        document.write('</tr>');
    }
    document.write('</table>');
}

博客船新改版 hexo+NexT

Wed, 19 Sep 2018 00:00:00 +0000

搭建

搭建直接看官方文档
本文就直接写搭建后的美化啊，部署什么的

部署到服务器

我看了不少文章，但是总是有什么权限之类的问题，要不然创建的git账号无法访问，要不然宝塔的www账号无法访问，最后自己还是按照那个意思上传上去了，不过这样是 不安全的! 不安全的! 不安全的!

Chrome破解无法复制粘贴

Thu, 13 Sep 2018 00:00:00 +0000

解决方案1

在考试酷提交作业时发现不能直接粘贴答案进去经过谷歌之后找到了破解网页限制复制粘贴的办法(仅限于Chrome) 首先打开需要复制粘贴的网页 Windows按下F12 MacOS按下Command+Option+I 打开开发者工具然后再按下F1打开开发者工具设置窗口然后再找到Preferences->Debugger->Disable JavaScript 把前面的框选上即可关闭当前页面的所有js，完成复制粘贴后再去掉勾选即可恢复当前页面的js

Chrome/Firefox非安全端口问题

Mon, 10 Sep 2018 00:00:00 +0000

学校的端口号为95，是非安全端口，这里我来说一下这样用Chrome或者Firefox进入非安全端口

Firefox:(Windows和Linux、macOS通用)

(1) 地址栏输入about:config进入参数设置界面
(2) 鼠标右键新建新的字符串设置项，名称为：network.security.ports.banned.override
(3) 为新参数设定要允许的端口或端口范围，如：95

为网页加上动画效果

Sun, 18 Mar 2018 00:00:00 +0000

先来让我们看看这个，然后写出它的代码和注释

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
	<div class="demo"><div class="demo-animation"></div></div>		
</body>
</html>
css部分：
.demo{
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}/*这个不是重点,下面那个才是*/
.demo-animation{
	width: 100px;/*宽度100像素*/
	height: 100px;/*高度100像素*/
	background: #f00;/*背景色为#f00(红色)*/
	position: relative;/*定位为相对，因为我想让它只在这框框的范围内移动*/
	left: 0px;/*这是在没有动画情况下的位置距离左侧0像素*/
	top: 0px;/*距离顶部0像素*/
	animation: demo1 5s;/*	所有动画属性的简写属性，除了 animation-play-state 属性，animation-name(名字)为demo，animation-duration(动画耗时)为5s*/
	animation-iteration-count: infinite;/\*animation-iteration-count(动画播放次数)为无限\*/
}
@keyframes demo1{/*@keyframes为规定动画*/
	0%{left: 0px; top: 0px;}/*在动画进行到0%时，方块demo-animation的位置为left:0px;top:0px;*/
	25%{left: 200px; top: 0px;}/*在动画进行到25%时，方块demo-animation的位置为left:200px;top: 0px;后面的以此类推*/
	50%{left: 200px; top: 200px;}
	75%{left: 0px; top: 200px;}
	100%{left: 0px; top: 0px;}
}/*其中值得注意的时position在.demo-animation已经提到了，所以在规定动画时不需要在提它，然后用margin好像不行，我也不知道行不行，反正我用着会出问题。*/

然后，这是关于animation熟悉的一张表格：