透過 Linode 架設靜態網站

by | 7 月 29, 2018

這張圖片的 alt 屬性值為空,它的檔案名稱為 m04-1024x741.png

從匯出Codepen檔案,到購買虛擬主機、部署上線。

前言

這篇是Hahow動畫互動網頁程式入門 (HTML/CSS/JS)的學習筆記,推薦給想從設計觀點切入學習網頁的朋友,課程範例相當精美。(首次註冊可使用NT$ 300折扣碼

靜態網站不涉及資料庫,可以想成是電子書或形象官網,不會因為使用者的身份差異而出現內容變化,同樣頁面資訊都是固定的。

課程末段、教了如何購買伺服器部署,對我來說是完全沒碰過的領域;特別做個紀錄,和有類似需求但沒頭緒從哪開始接觸的朋友們分享。

最近開始學習後端知識,藉此初步了解虛擬主機設定。

匯出Codepen檔案

這張圖片的 alt 屬性值為空,它的檔案名稱為 m06.gif
這張圖片的 alt 屬性值為空,它的檔案名稱為 m07-1024x525.jpg

Codepen是能練習HTML/CSS/JavaScript的線上編輯器,截圖的天氣盒子是課程動畫章節,透過CSS和SVG做出基礎的互動效果。(老師的天氣盒子Codepen範例檔

我們要把作品下載、架設到自己租的虛擬主機。

首先點擊右下角的Export .zip。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m09-1024x625.jpg

將zip解壓縮後,即可取得完整的網頁檔案。

index.html和style.css是轉譯好的檔案。

先前為了加快開發速度,我們在Codepen使用pug和sass,下載回來的檔案也有,但後續架設並不會使用到,可以先忽略。

另外在Codepen是從.daybox開始寫,檔案會自動幫我們加上開頭的相關內容,像是meta、title等;CSS部分也會另外獨立成一支。

網頁檔案的前置作業,到這步就完成囉。

註冊Linode帳號

Linode是一個總部建立於美國紐澤西州加洛偉的虛擬專用伺服器(VPS,Virtual Private Server)提供商。 如同它的名字一樣,Linode 只提供運行 Linux 的伺服器,而不提供運行 Windows Server或其他作業系統的伺服器。 (維基百科

這張圖片的 alt 屬性值為空,它的檔案名稱為 m12-1024x576.jpg
這張圖片的 alt 屬性值為空,它的檔案名稱為 m13-1024x768.png
這張圖片的 alt 屬性值為空,它的檔案名稱為 m14-1024x755.jpg

接著我們上Linode註冊帳號,開始租用有獨立IP、設定彈性較高的虛擬主機;Nanode方案每個月150元台幣。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m15-1024x550.png

要填寫信用卡資訊等,才能開始使用。

啟用虛擬主機

這張圖片的 alt 屬性值為空,它的檔案名稱為 m16-1024x758.jpg

選擇Nanode方案,主機地點選新加坡或東京都可以。

5分鐘不到,我們就有獨立網址的機器可以用了!

IP就像網站的門牌一樣,可以直接連線;而我們常見的網址,例如google.com,則是付費註冊好記的名字,再回頭綁定門牌。

舉例來說,假設我們今天約朋友碰面,前者概念類似「台北市信義路五段7號」、後者則是「台北101」,都表示同樣的地方,後者好記又有識別度。

當我們連線進去時,網頁會一直轉圈圈,完全空白什麼都沒有。(發現我IP打錯了,總之會是空白無內容Q_Q)

目前狀態像是還沒有裝作業系統的電腦,所以毫無反應。

安裝Ubuntu作業系統

接著替硬體注入軟體的靈魂。

安裝Ubuntu LTS版本(Long-term support長期支援)。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m22-1024x562.png

Ubuntu就像Windows、MacOS,同樣是作業系統,如果平常沒有接觸第一次聽到是很正常的,我也是先前玩樹莓派才知道世界如此寬廣(?)

Ubuntu其名稱來自非洲南部祖魯語或科薩語的「ubuntu」一詞,意思是「人性」、「我的存在是因為大家的存在」,是非洲傳統的一種價值觀。 是著名的Linux發行版之一,它也是目前最多使用者的Linux版本,用戶數超過10億人(含伺服器、手機與其分支版本)。 (維基百科

設定Root密碼,也就是管理者密碼。

安裝過程大約3分鐘。

如果覺得抽象,這個過程相當於我們把電腦玩壞後的重灌。

點Boot開機,相當於我們按電源鍵開啟電腦。

安裝Apache伺服器

Mac直接打開Terminal(Mac Terminal怎麼開

Windows用Putty(Putty SSH怎麼用

這步卡住的話,後面備註是網路的教學文章。

如果要裝Nginx伺服器我寫在這一篇,可以跳過去接著閱讀。

在Terminal(黑底白字看起來很恐怖的視窗),貼上SSH Access後面的內容,以截圖為例是 ssh [email protected]

yes確認連線,輸入剛剛的管理者密碼,就會看到Welcome to Ubuntu訊息,等同於開機後、鎖定畫面成功解鎖,來到桌面的操作介面了(想像一下)

這張圖片的 alt 屬性值為空,它的檔案名稱為 m27.jpg

貼上sudo apt-get install apache2,輸入Y開始安裝Apache。

翻譯:sudo是superuser do,「我是超級使用者,我要安裝Apache2」;基於安全考量,有些指令要有sudo權限才能執行。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m29.jpg

安裝完成,可以關閉小黑窗了,掰喔。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m30-1024x601.jpg

這時候我們重新連到剛開始的IP,就會成功顯示Apache的歡迎頁面了。

上傳網站檔案

我們使用FileZilla,FTP軟體、回到親切的圖像介面。

改SFTP。

連線後會看到右下角的目錄出現一些東西。

但我們不用在意,點斜線回去。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m33-999x1024.png

點斜線,進到var。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m34-1002x1024.png

在var裡選擇www。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m35-991x1024.png

www中會看到熟悉的html。

這張圖片的 alt 屬性值為空,它的檔案名稱為 m36-988x1024.png

index.html就是剛剛的歡迎頁面。

把Codepen匯出的檔案拉進來取代就大功告成啦。

打開解壓縮的zip檔案,把CSS資料夾、index.html(如果有js的話也要,範例沒有)拉近右側、確認取代index.html。

檔案傳輸成功。

部署完成

這張圖片的 alt 屬性值為空,它的檔案名稱為 m39-1024x546.jpg

再次連線,原先的歡迎頁面,成功被天氣盒子替換掉了。

同樣流程,也可以建立個人部落格,並把IP換成購買的網址。

雖然單純的靜態網站,可以透過Github Pages完成;但學習虛擬主機相關識,將來可以玩的東西又更多了~ ٩(。・ω・。)و

想說簡單整理流程,來回整理寫了四個小時,看到蠻多有趣的新知識。

延伸閱讀

研究Linode、DigitalOcean和Heroku過程中,發現前者是IaaS,後者是PaaS這類名詞,想瞭解更多可參考知乎這篇科普文:雲服務也就是雲計算的三個分層:IaaS、PaaS和SaaS,就像pizza店提供三種服務:買成品回家做、外賣和到披薩店吃。

Virtual Private Server

[不是工程師] 架站用VPS還是Web Hosting,中文翻譯都有「虛擬」到底差在哪?

【VPS】什麼是VPS? 使用VPS有什麼好處嘛?

吳 致賢

吳 致賢

擁有 App/Web 開發經驗的軟體 PM,從 0 到 1 執行過 20 個以上全客製專案,包含悠遊付、friDay 影音等。關於我的簡歷點此

Recent Posts

時尚與穿搭,啟蒙我審美的影片

時尚與穿搭,啟蒙我審美的影片

在 YouTube 與 bilibili 看了超過一百部關於時尚、穿搭、服飾主題的影片,整理出幾個精選,希望讓讀者們從比較有趣的角度瞭解:)