2023年5月3日 星期三

免費架站平台 Netlify (可跑 Serverless function)

最近發現一個可免費架站的平台 Netlify, 除了可佈署一般的靜態網頁外, 還能像在 AWS/Azure/GCP 上免費跑無伺服器函式 (serverless function), 官網網址如下 :





收費方案參考 :


首先註冊免費帳號, 可使用 GitHub/GitLab/Bitbucket 帳號, 也可以點底下 "sign up with email" 用 e-mail 註冊, 我習慣用 email : 




填寫好帳密按 "Sign up" 即可 : 




接下來是選擇網站用途, 我選 "Personal" 與 "Personal Site" :




然後是選擇佈署網站的方式, 可以從遠端源碼寄存庫 GitHub/GitLab/Bitbucket 等發布, 也可以按底下的 "Try Netlify Drop or Choose a template"  超連結以拖曳方式上傳檔案 :




先按底下超連結使用拖曳方式上傳檔案 : 





接著我建立一個資料夾 myweb 來存放網頁, 裡面目前只有一個首頁檔 index.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>小狐狸事務所 の 網路實驗室</title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:90%;}
    </style>
  </head>
  <body>
    <div id="tabs">
      <ul>
        <li><a href="home.htm">首頁</a></li>
        <li><a href="test.htm">網頁測試</a></li>
        <li><a href="tools.htm">小工具</a></li>
      </ul>
    </div>
    <script>
      $(function(){
        $("#tabs").tabs();
        $("#logo").width($("#tabs").width());
        });
    </script>
  </body>
</html>

將此資料夾拖曳到上面 Netlify 的上傳區即可, 完成後在左上角就會出現此網站的網址 :




此處是 https://zingy-sherbet-9f6d1d.netlify.app , 這是用預設 site name 產生的網址, 點此網址即可看到網頁效果.



但這網址也太長了吧! 可以在前面的頁面底下按 Site settings 鈕, 然後在如下頁面中按 Change site name 去更改 : 




此處將 site name 改成 tony1966 :




按 Save 儲存設定后, 在 Site information 頁面中的 Site name 就變成 tony1966 了 : 




連線網址就變成簡短的 https://tony1966.netlify.app 了 :



1 則留言 :

匿名 提到...

Hello! Are you considering finding the best IT jobs in Switzerland? Nada company will provide you with such an opportunity! We have been specializing in finding the best IT jobs in Switzerland for many years and have access to a wide selection of companies and jobs to find the right one for you! >> www.tech-careers.ch