小趙同學
0%

如何快速上线一个静态网站

发表于 更新于

操作思路

三种简单方法：

  • 将静态网站托管到阿里云OSS
  • 使用Nginx代理到阿里云OSS （目前采用这个方案）
  • Nginx作为web网站，对外发布

具体操作

域名解析指向Nginx

编写网站HTML内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Welcome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style rel="stylesheet" type="text/css">
            html {
                background-image: url(https://geeksre.zhaohongye.com/other-web-index-html/html-background.png);
                background-color: white;
                font-family: "DejaVu Sans", "Liberation Sans", sans-serif;
                font-size: 0.85em;
                line-height: 1.25em;
                margin: 0 4% 0 4%;
            }

            body {
                border: 10px solid #fff;
                margin: 0;
                padding: 0;
                background: #fff;
            }

            p {
                line-height: 1.5em;
            }

            h1 {
                margin-bottom: 0;
                line-height: 1.9em;
            }
            h2 {
                margin-top: 0;
                line-height: 1.7em;
            }

            #content {
                margin: auto;
                clear: both;
                padding: 10px;
                width: 50%;
                padding-left: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                border-bottom: 5px solid #eee;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <h1>Hi, 好久不见</h1>
            <h3>Have belief in your ability .</h3>
            <h3>Focus on your blessings, not your troubles .</h3>
            <br />

            <p>其实技术的路没有捷径,只有踏实的积累。</p>
            <p>也不用担心天赋，因为以大多数人的努力程度之低，其实轮不到拼天赋。</p>
            <p>很多人梦想找到一个牛逼的师傅，几天速成后笑傲江湖。</p>
            <p>可是每一个真正练就一身武艺的人都是靠冬练三九夏练三伏这么过来的，</p>
            <p>他们靠着一种忘我的热情持续投入进去磨练，数年如一日，</p>
            <p>最终自己也不知道怎么就发现具备了无坚不摧的实力！😄</p>
            <br />
            <h2>
                我的博客网站，请移步
                <a href="https://www.zhaohongye.com">https://www.zhaohongye.com</a>
                。
            </h2>

            <br />

            <a href="https://beian.miit.gov.cn/" target="_blank">ICP证：冀ICP备19011596号-1</a>
        </div>
    </body>
</html>

上传HTML到OSS

配置nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
  listen 80;
  server_name *.ops.work ops.work;
  access_log /var/log/nginx/zhy.log main;
  error_log /var/log/nginx/zhy.error.log;

  if ($request_uri != /) {
    return 301 http://ops.work/;
  }

  location / {
    proxy_pass https://geeksre.zhaohongye.com/other-web-index-html/ops.work.html;
  }
}

效果