三步驟用 Netlify 輕鬆架網站

網站架設的工具有好多種... 今天要跟大家分享一個簡單、免費、好用的 🥰

Netlify (發音 Net-li-fy),意思是 Net(網路) + Simplify (簡單化)

我要介紹的工具是 Netlify ,一個能免費架網站的平台。這篇文章裡,我會說明與示範基本的 Netlify 部署流程。

Source

開始囉!

🗂 Step 1 建立一個資料夾,裡面有你要部署的 HTML 檔案

把這個 html 命名為 index.html ,Netlify 才會判讀成為預設頁面

(註:html 是一種網頁檔案格式,假如你不熟悉 html,可以先下載這個檔案、解壓縮,就有現成的 html 範例可以用)

🌐 Step 2 把資料夾拖到 Netlify 的網站上

你會先盡到 Netlify 的官網,並用 Email 註冊(假如沒有在用 GitHub)。

接著,你就可以把剛剛創的資料夾拖拉到 Netlify 的網站(Drag and Drop),Netlify 就會開始部署。

大概三秒後,部署完成,這個網站就上線了,你會得到網站獨特的連結。

(本 GIF 沒有加速,就是這麼一瞬間,畢竟 html 檔案很小 XD)

🎉 完成!你的網站上線了

你可以在這時候改變你的域名,例如, cute-n-simple 是我自己設定的。

cute-n-simple.netlify.app

就會變成我的網站名稱,我可以貼給朋友,他們就可以在電腦手機上看看到這個網站。

假如你要客製化域名,那你可以去 Google Domain 之類的網站買(Google 定價 12 美金/一年,約一個月 30 塊台幣),再看教學綁回 Netlify 上面。不然,在 Netlify 的 https 加密跟自訂域名(netlify.app)都是免費的

https://cute-n-simple.netlify.app/

假如我會 html 或會寫程式,下一步是什麼?

  • 加入 CSS 與 JavaScript,使你的網站更有互動性
  • 使用版本管理工具如 GitHub 來完善你的開發流程
  • 使用 Static Site Generator 如 Parcel 來增加開發效率

業界有誰在用 Netlify?舉例來說...

... 都是架在 Netlify 上面。

以上就是今天的教學分享,是可以供大家免費操作的,不知道對沒有技術背景的人聽起來還可以嗎?

我試著要把流程簡化的誇張容易,所以只示範 Netlify 最基本的操作方式。事實上,網頁部署(做網站)是我近年蠻有心得的領域,希望以後能出文章講更多。

歡迎追蹤 黃岳涵|Yueh Han Huang 以得到後續文章資訊!

--

--

黃岳涵|Yueh Han Huang

Software Engineer @ Meta; 練習問得更深,解釋得更清楚 📚 bojne.com