【小白向】手把手教你發(fā)布自己寫的HTML靜態(tài)網(wǎng)頁
時(shí)間：2023-09-16 19:54:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-16 19:54:01 來源：網(wǎng)站運(yùn)營
【小白向】手把手教你發(fā)布自己寫的HTML靜態(tài)網(wǎng)頁：相對(duì)于C++、JAVA等編程語言的復(fù)雜難學(xué)，HTML/CSS/JS可以說是對(duì)剛接觸計(jì)算機(jī)的同學(xué)最友好的編程語言了。特別是隨著主流瀏覽器都支持了HTML5/CSS3，就算是新手， 只要費(fèi)點(diǎn)心思，也容易就能做出一些有趣的頁面。但是，當(dāng)我們做出了漂亮的頁面以后，是不是會(huì)急于與別人分享我們的成功呢？讓家人或者朋友通過輸入一個(gè)地址就能訪問到我們寫的HTML頁面，是不是會(huì)有很大的成就感呢？
今天博主就來手把手的教大家怎么在互聯(lián)網(wǎng)中發(fā)布自己寫的HTML頁面，建立自己人生中的第一個(gè)網(wǎng)站吧。今天的教程全部采用命令的方式來進(jìn)行，涉及到了
服務(wù)器的選擇、
安裝環(huán)境、
上傳網(wǎng)頁等多個(gè)過程，對(duì)用到的命令和軟件也會(huì)有初步的講解，總之這是一篇對(duì)初學(xué)者干貨滿滿的博客。
服務(wù)器的選擇與購買
既然想把網(wǎng)站發(fā)布到互聯(lián)網(wǎng)上，那就必須有一個(gè)互聯(lián)網(wǎng)的IP了。但是很遺憾的是，大多數(shù)同學(xué)使用的寬帶都是沒有互聯(lián)網(wǎng)的IP的，因此，第一步就是需要買一個(gè)云服務(wù)器。
對(duì)于經(jīng)濟(jì)相對(duì)比較拮據(jù)的學(xué)生來說，購買服務(wù)器需要參考的因素主要就是價(jià)格了。在價(jià)格優(yōu)惠的基礎(chǔ)上，也需要考慮帶寬和配置。其中，帶寬是初學(xué)者很容易忽略的問題，但是又是非常關(guān)鍵的問題。博主當(dāng)年可是在帶寬這一塊栽了大跟頭了。下面具體說一下帶寬的重要性。
現(xiàn)在主流的入門級(jí)服務(wù)器提供的都是
1Mbps固定帶寬。1Mbps固定帶寬是什么概念，和家庭寬帶一樣，要
除以8以后才是我們平常理解的下載速度。即1Mbps帶寬大概對(duì)應(yīng)
120kb每秒。那么120kb每秒又是什么概念？現(xiàn)在的手機(jī)隨便拍一張照片都是5M起步，在120kb每秒的下載速度下，需要
40秒才能加載完畢。同學(xué)們平時(shí)上網(wǎng)的時(shí)候，能容忍一個(gè)網(wǎng)頁40秒還加載不出來嗎？
還有一些廉價(jià)服務(wù)器標(biāo)榜自己是20M甚至50M帶寬，這時(shí)候就要擦亮眼睛了，看一下是共享帶寬或者固定帶寬了。如果是共享帶寬，則說明你是和別的許多用戶一起使用這20M帶寬的，這種帶寬下載速度極其不穩(wěn)定，甚至還不如1M固定帶寬，博主是十分不推薦購買這種服務(wù)器的。
好了，那么有沒有既便宜、配置和帶寬都看的過去的云服務(wù)器呢？答案是有的。那就是騰訊云輕量服務(wù)器，針對(duì)新用戶，只需要99元一年，297元三年。同學(xué)們可以點(diǎn)擊這個(gè)鏈接查看。
從上圖中可以看出，在13:00 的時(shí)候可以購買的輕量云的配置是1CPU、2G內(nèi)存和6M的帶寬配置。這里的6M帶寬是獨(dú)占的固定帶寬，下載速度約為800k每秒,加載1張5M的圖片只需要6秒。考慮到我們?cè)诎l(fā)布網(wǎng)頁之前，一般都會(huì)對(duì)圖片進(jìn)行壓縮，因此實(shí)際上加載速度會(huì)更快。
在購買服務(wù)器的時(shí)候，注意一下地域的選擇，目前活動(dòng)價(jià)提供的可以選的地域是杭州、杭州、杭州、杭州四個(gè)區(qū)域，選擇距離自己最近的區(qū)域購買即可。鏡像注意選擇
Ubuntu 20.04這個(gè)鏡像。博主個(gè)人認(rèn)為，對(duì)于學(xué)生學(xué)習(xí)而言，最好剛開始不要使用寶塔面板之類的建站工具，要學(xué)會(huì)摸索使用Linux系統(tǒng)，把Linux系統(tǒng)學(xué)好了，對(duì)自己以后的幫助會(huì)是非常大的。另外就是這個(gè)鏡像后面是可以更換的。
另外要注意的是，目前根據(jù)工信部的要求，使用國內(nèi)服務(wù)器搭建網(wǎng)站，需要對(duì)域名進(jìn)行備案，根據(jù)各地通信局的情況不同，備案時(shí)間可能需要15天到一個(gè)月。這意味著，如果我們想用域名來訪問我們的網(wǎng)站，要不就老老實(shí)實(shí)的備案，要不就是購買境外節(jié)點(diǎn)的服務(wù)器，比如24元一個(gè)月的香港節(jié)點(diǎn)。不過博主強(qiáng)烈建議購買國內(nèi)服務(wù)器，并進(jìn)行備案，因?yàn)榫惩夤?jié)點(diǎn)服務(wù)器在國內(nèi)訪問的速度是沒法保證的。當(dāng)然，如果我們通過IP來訪問我們的網(wǎng)站的話，則可以不需要進(jìn)行域名備案。
購買好了心儀的服務(wù)器以后，下一步就是開始在服務(wù)器上安裝可以讓我們網(wǎng)站運(yùn)行起來的軟件了。
安裝環(huán)境
首先，進(jìn)入到輕量云的控制臺(tái)，找不到的同學(xué)可以直接點(diǎn)擊這個(gè)鏈接進(jìn)入。先忽略下圖中的小箭頭，點(diǎn)擊我們購買的服務(wù)器，然后進(jìn)入到這臺(tái)服務(wù)器的詳情頁面，然后選擇重置密碼，服務(wù)器會(huì)自動(dòng)重啟來應(yīng)用新密碼。這些步驟相對(duì)簡單，由于篇幅所限，就不再一步一步截圖了。我相信聰明的同學(xué)一看就明白了，那個(gè)密碼一定要保存好，后面會(huì)用到。等重置了密碼以后，點(diǎn)擊下面的登錄按鈕，會(huì)彈出一個(gè)黑窗口。這個(gè)黑窗口，我們一般稱之為
終端，終端連接上服務(wù)器以后，我們?cè)诮K端里輸入的命令，就相當(dāng)于在服務(wù)器上運(yùn)行了。
注意一下上面的IP我給打了碼，同學(xué)們也要注意不要輕易在博客、論壇等公開的地方泄露自己的公網(wǎng)IP
現(xiàn)在我們可以安裝必備的軟件了。今天我們要安裝的軟件是Nginx。什么是Nginx呢？簡單來說，Nginx是一款輕量級(jí)的Web服務(wù)器、反向代理服務(wù)器，由于它的內(nèi)存占用少，啟動(dòng)極快，高并發(fā)能力強(qiáng)，在互聯(lián)網(wǎng)項(xiàng)目中廣泛應(yīng)用。今天我們不使用它的反向代理功能，只用來作為Web服務(wù)器。如果同學(xué)們后面想要從事網(wǎng)站開發(fā)的話，那么少不了要和Nginx打交道了。
我們使用apt命令來安裝Nginx。apt是Debian系Linux(Ubuntu就是Debian系的Linux系統(tǒng))上的一個(gè)高級(jí)軟件包管理工具，使用apt來安裝、更新、卸載軟件十分的簡單。下面一行命令，就可以輕松的安裝Nginx了。
sudo apt install -y nginx 如果我們想要卸載nginx的話，可以使用 sudo apt remove -y nginx來進(jìn)行卸載。
在終端中輸入上面的命令，然后按下回車鍵，系統(tǒng)就開始安裝Nginx了。等命令運(yùn)行完畢以后，Nginx就安裝好了
如果我們想知道nginx安裝到了什么地方，可以輸入下面的命令來查看
whereis nginx 安裝好nginx以后，就可以啟動(dòng)nginx了，啟動(dòng)命令是
sudo systemctl start nginx 啟動(dòng)成功后，用瀏覽器訪問我們的IP，就可以看到Nginx歡迎的頁面。這代表Nginx已經(jīng)安裝并成功啟動(dòng)好了。
由于我們并沒有上傳自己的網(wǎng)站，因此此時(shí)打開的是nginx默認(rèn)的頁面。這個(gè)頁面默認(rèn)是在服務(wù)器的/var/www/html目錄下的，我們可以使用
cd命令切換到對(duì)應(yīng)目錄下，然后用
ls命令列出當(dāng)前目錄下的文件，最后用
cat命令來查看網(wǎng)頁的內(nèi)容。
cd /var/www/html ls cat index.nginx-debian.html 下面是文件的內(nèi)容
<!DOCTYPE html><html><head><title>Welcome to nginx!</title><style> body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; }</style></head><body><h1>Welcome to nginx!</h1><p>If you see this page, the nginx web server is successfully installed andworking. Further configuration is required.</p><p>For online documentation and support please refer to<a href="http://nginx.org/">nginx.org</a>.<br/>Commercial support is available at<a href="http://nginx.com/">nginx.com</a>.</p><p><em>Thank you for using nginx.</em></p></body></html> 相信上面的文件內(nèi)容，同學(xué)們都能看明白，這是一個(gè)很簡單的網(wǎng)頁內(nèi)容了。我們要做的，就是把這個(gè)文件替換成我們自己的寫的頁面了。
上傳網(wǎng)頁
首先，我寫了一個(gè)很簡單的網(wǎng)頁，如下圖。這個(gè)網(wǎng)頁顯示了當(dāng)前的時(shí)間，而且每秒刷新一次。 如果同學(xué)們還沒有準(zhǔn)備好自己的網(wǎng)頁，可以拿我這個(gè)來進(jìn)行測試。點(diǎn)擊附件:時(shí)鐘網(wǎng)頁下載網(wǎng)頁源碼
這個(gè)源碼的文件結(jié)構(gòu)如下所示
里面包含了多個(gè)文件夾以及一個(gè)index.html文件，我們需要將這些文件上傳到服務(wù)器的/var/www/html目錄下。還記得前面重置的密碼嗎？這時(shí)候就需要用到這個(gè)密碼了。首先如下圖所示打開在自己的電腦上打開
命令提示符窗口（注意是在自己的電腦打開，不是上面那個(gè)網(wǎng)頁上的那個(gè)黑窗口了）。注意：上圖中，我把代碼放在了【我的網(wǎng)頁】這個(gè)中文目錄下，這樣會(huì)導(dǎo)致后面上傳失敗，請(qǐng)把這個(gè)中文文件夾改成英文文件夾
然后我們又看到了一個(gè)熟悉又陌生的黑窗口，這個(gè)黑窗口就是命令提示符窗口，在這個(gè)窗口中輸入下面命令
scp -r * ubuntu@100.101.102.103:/home/ubuntu # scp是向另外一臺(tái)服務(wù)器發(fā)送文件的命令，-r代表是發(fā)送文件夾，*代表發(fā)送當(dāng)前目錄的所有文件，# ununtu@100.101.102.103:/home/ubuntu代表發(fā)送到100.101.102.103的/home/ubuntu目錄下，用戶名為ubuntu # 注意這里把100.101.102.103換成自己服務(wù)器的IP 復(fù)制代碼 按下回車后，因?yàn)槭堑谝淮捂溄舆@臺(tái)服務(wù)器，命令提示符窗口會(huì)先詢問這臺(tái)遠(yuǎn)程主機(jī)沒有連接過，是不是要進(jìn)行連接？輸入yes,然后就會(huì)讓我們輸入密碼，這時(shí)候輸入前面重置密碼時(shí)候的密碼，如果密碼輸入正確，文件就會(huì)被上傳到服務(wù)器上。
文件上傳成功以后，我們需要回到網(wǎng)頁上的終端上，在終端上輸入下面命令，列出/home/ubuntu目錄下的所有文件
sudo ls /home/ubuntu/ 然后把這些文件移動(dòng)到/var/www/html目錄下。從上圖中可以看到我們當(dāng)前使用的lighthouse用戶(@前面的lighthouse代表當(dāng)前登錄的用戶)，這個(gè)用戶操作權(quán)限不高，因此為了方便，后面暫時(shí)切換到root用戶來進(jìn)行后面的操作。
sudo su # su是切換用戶的意思，例如 su lighthouse代表切換到lighthouse用戶，如果后面不跟用戶名的話，代表切換到root用戶 切換成功后，用下面的命令把/home/ubuntu下的文件移動(dòng)到/var/www/html目錄下，由于此時(shí)我們已經(jīng)是root用戶了，不需要在命令的前面加sudo
mv /home/ubuntu/* /var/www/html 執(zhí)行完畢后，再次在瀏覽器上輸入我們的IP，然后看到的就是我們自己寫的網(wǎng)頁了。
如果打開網(wǎng)頁有亂碼的話，需要在html文件的
<head></head>之間加上
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 到這里為止，我們的網(wǎng)頁算是正式在公網(wǎng)上發(fā)布了，此時(shí)，我們可以把IP地址發(fā)給我們朋友或者家人，讓他們一起來分享我們的喜悅吧。
總結(jié)
這篇博客中，講了怎么選擇購買一個(gè)性價(jià)比高的服務(wù)器，然后又講了怎么在linux上下載安裝Nginx，怎么把本地的文件上傳到服務(wù)器上，以及一些簡單基礎(chǔ)的命令。并且通過這些知識(shí)，我們成功的把自己寫的靜態(tài)頁面發(fā)布到了互聯(lián)網(wǎng)上。然而，學(xué)習(xí)的道路是沒有盡頭的，本文所講的也是非常簡單的一部分，如果通過本文的學(xué)習(xí)能夠培養(yǎng)大家對(duì)編程和linux的興趣，那么本文也就達(dá)到了目的。最后祝愿所有看到本文的同學(xué)將來都能成為能夠獨(dú)當(dāng)一面的大牛。
關(guān)鍵詞：靜態(tài),發(fā)布,把手
在線咨詢
