寫在前面

爲什麼想到寫部署教程

最近向服務器商租借了一臺虛擬主機vps用於搭建自己的代理，然後看着服務器上分配的幾十GB空閒空間，想到何不順道搭建一個個人主頁放在上面呢？否則月租費交了，空間不用也是浪費。正好一直以來也是有搭建一個個人主頁的想法，不用過於花哨，只要靜態的html+css網頁放一放自己的個人簡歷、文章索引、一些小資源就好了。寫出一個靜態網頁能在本地瀏覽器預覽很簡單，但將它部署到服務器上，讓別人能通過一個自己鐘意的、好記的域名訪問到它，這一流程環環相扣，萌新可能會碰壁良多，網上暫時也沒有整合起來的中文文章。故在此寫一篇比較詳細的文章，爲萌新梳理一下網站的搭建究竟是什麼樣的框架，需要什麼樣的流程。

不講什麼、會講什麼

本文不是html+css教程，如果還未入門html+css可以在菜鳥教程html 和菜鳥教程css 跟着教程學一學，在沒有JavaScript和PHP腳本插手去實現一些成熟網站的fancy功能的情況下，學用html和css樣式表寫一個好看又有一定互動的靜態網頁真的非常簡單，很快就能有所成。
本文會梳理一下一個html文件要被他人通過域名成功訪問，究竟需要哪些平臺工具和步驟。大部分文章都主要是博主爲自己做的備忘、或是針對某一環節講一些特殊事項，一般不會提及基本概念的梳理。本着對萌新的友好，我會從最基礎的講起。
本文會以Vultr服務器商+Freenom域名+DNSPod國內解析（即我的個人主頁所使用的流程）爲例，以實例來講解一下具體的部署流程。

前置

本地需要有一套已經寫好的、可以本地在瀏覽器中瀏覽的網頁文件夾。遵從習慣，請將您的導覽主頁命名爲index.html。如以下就是一個主頁文件夾的的示例結構：

|- homepage
   |- index.html
   |- blogs.html
   |- resources.html
   |- about-me.html
   |- img
      |- img1.png
      |- img2.jpg
   |- icon
      |- icon1.png
      |- icon2.ico
   |- css
      |- style.css

如果想要學習一下有關部署的知識，但還沒有成型的網頁，也可以簡單的寫一個hello world先試試部署能否成功。
最好準備有架梯子的工具，因爲目前Vultr等網站似乎已經需要梯子才上的去了。相信這並不是什麼難事。

網頁部署基本概念

一個網頁文件能夠被別人通過一個域名訪問到，需要三個要素：

服務器：承載存儲你的網頁的平臺；每個主機都有自己的ip地址，別人能夠通過這個ip地址順利地訪問服務器上的內容。
域名：一個代替ip地址的、好聽的、好記的“名字”，通過域名字符串，從而定位到你的服務器的ip地址，繼而瀏覽器可以從上面獲取網頁文件。
DNS服務：將一串域名字符串和你的服務器的ip地址綁定起來的服務，沒有它，域名和你的網頁本身是無法關聯的。

服務器

服務器商在網上提供租賃的網頁用服務器一般是一些集中運行在機房大樓裏的主機，他們維護這些主機持續地開機運行，然後將這些集羣的存儲和算力分割成不同大小的小塊，在網上按不同的套餐價位將一塊塊空間和算力提供租賃。我們租到的一個“服務器”，實際上不一定是一臺完整的電腦主機和一塊完整的存儲空間，而是租賃商分割出來的某一服務器集羣中虛擬的一小塊的使用權，簡單來說這就叫虛擬主機（vps）。
一臺租賃的/購買了永久使用權的虛擬主機（相信會看本文的讀者一般也沒有經濟實力能自己購買、安置並持續維護一整臺服務器吧）有幾個重要的要素：

位置地點：這臺服務器的機器本身在什麼位置？例如在美國洛杉磯，或者日本東京。
ip地址：每一臺虛擬主機都必須有一個自己的ip地址，它就是一臺機器在互聯網世界中的門牌號，其他接入網絡的設備可以通過這一唯一且獨特的ip地址找到這臺主機。這是計算機網絡的基本知識了。
操作系統：這臺虛擬主機上可以選擇安裝什麼操作系統來提供服務。服務器端的操作系統一般是Linux系，如CentOS、Ubuntu等。你需要使用Linux命令行的基本能力。
用戶名+密碼：服務器商給了你虛擬主機的使用權，也就要提供你登入這臺主機的用戶以及密碼，一般通過root用戶登錄，以及一串隨機登錄密碼。
硬件條件：CPU、Memory和磁盤存儲空間的大小。

擁有了虛擬主機後，我們就可以在其上安裝網頁服務客戶端，然後把網頁文件上傳到上面，其他人就可以隨時通過互聯網訪問到你的網頁了。這臺主機也就是常說的服務器端/後端，而別人能夠查看到的網站網頁即前端。

域名

域名就是一個名字，一個名字字符串比ip地址的四個數字要好記的多，這就是爲什麼我們需要域名。就像你在地圖上搜索一個目的地，你直接拿街道+門牌號搜索也能搜索的到，但總是搜索一個簡單好記的地名更容易些。
簡短的域名、或是特別好記或有特殊含義的頂級域名都很貴，但也有許多免費的域名暫且空閒，可以通過域名服務網站來搜索搶注和購買。有關域名的知識，可以參考維基百科。

DNS服務

DNS服務就是將一個域名和你的服務器的ip地址進行綁定的服務，即一條“什麼名字對應你的服務器的門牌號”的記錄。當註冊了一個DNS服務，然後將域名和一個ip地址綁定之後，每當一個用戶在瀏覽器中輸入這一域名字符串，它就將這一字符串發送給DNS服務商，而後DNS服務將其解析到綁定好的ip地址發回給瀏覽器，從而瀏覽器就可以從這個ip地址訪問到你的服務器，經由服務器上搭建好的網頁客戶端從上面獲取網頁信息。

詳細部署流程實例

Step 0. 準備靜態網頁

本文的目的主要是部署中的概念和流程的解釋教學，因此只會涉及最基礎的靜態html+css實現的網頁的部署，不涉及任何JavaScript、PHP等動態腳本語言的運用，且不包括有關反向代理、流量控制和高級的安全控制等進階內容。

本地網頁編寫

先在本地編寫好靜態網頁及樣式表，並在瀏覽器中本地打開，查看格式、鏈接跳轉等是否正常，保證網頁在本地先能夠成功解析。（Tips：需要部署的網頁在編寫時需要考慮一下不同瀏覽器內核的css解析兼容問題，儘量在Chrome、Mozilla Firefox、IE等都測試一下，因爲訪問你的網頁的用戶可能使用不同的瀏覽器內核）。網頁文件夾的大致結構參看上文。

示例

如下是我作爲示例的簡單的index.html，及在本地打開的效果：

<!DOCTYPE html>
<html>

  <!-- Head -->
  <head>
    <meta charset="utf-8" />
    <title>Test Page</title>
  </head>

  <!-- Body -->
  <body>
    <h1>Hello World!</h1>
  </body>

</html>

Step 1. 租借虛擬主機

作爲一切的基石，我們首先需要的是一臺能爲我們所用的服務器，一臺可以被其他用戶訪問的、不間斷運行和維護的服務器。你可以選擇任何一家提供租賃的免費或收費服務器商，也可以有條件自己購買和維護一臺服務器。
免費服務器商的服務一般很不穩定，又很有時限性；這裏強烈推薦Vultr，這是一家按小時計費、非常便宜、服務又非常穩定的服務器商，用戶註冊後可以無限地申請服務器設備，同時按小時計費扣除賬戶餘額，只有下一小時餘額不足纔會停止服務，而且價格很公道，非常良心。

進入Vultr官網註冊充值

可以點擊鏈接進入 Vultr的官方網站 1（貌似目前已經需要架梯子才能上的去），初次進入先註冊一個賬戶然後驗證郵箱：

註冊並驗證好後，進入自己的賬戶，打開“Billing”一欄，可以選擇支付寶（Alipay）進行充值，可以先充值最低的$10使用，很方便。

充值後賬戶裏就有了10刀，完全足夠購買並使用兩個月了。

購買租借套餐

在“Server”一欄中可以看到現在的服務器列表是空的。點擊右側“加號”進入購買頁面。購買需要進行選擇：

服務器位置地點（Server Location）：美、日、新等均可，但請選擇你和其他用戶可以有效、快速訪問到的服務器ip地址位置。很有可能你這一次購買的主機ip不幸被國內牆住，那可以立即銷燬部署然後再次嘗試購買，直到得到ip可以直接無阻地訪問到的爲止，因爲每一次購買本身只需$0.01，銷燬部署是可以隨時隨地免費進行的。這也是Vultr可靠好用的重要原因之一。
操作系統類型（Server Type）：既然是網頁服務器，最合適的OS一般就是CentOS了，這裏推薦選擇64bit CentOS 6 x64 （點擊一下CentOS就會讓你選擇是6還是7；推薦6是爲了避免7的複雜的防火牆問題）。你至少需要簡單操作Linux命令行的能力。
服務器硬件條件（Server Size）：這裏是套餐價格的區分處，選擇服務器存儲空間大小、CPU核心數、內存和套餐每月帶寬等配置。每月$5的價位已經可以完全支持一個靜態網頁的部署了，當然也可以選擇更貴更好的配置。注意如非特殊情況，不要選擇IPv6 only的主機，我們還是需要IPv4的。
額外特性（Additional Features）：開啓IPv6、自動備份（需要額外附加費）、DDOS攻擊保護、私有網絡等選項，按需選擇，示例中就都不選了。
開機腳本（Startup Script）：服務器每次開機運行的腳本。我們暫且不需要。
SSH密鑰（SSH Keys）：SSH的密鑰管理。我們也暫且不需要。
主機名和標籤（Server Hostname & Label）：主機名字和在列表中的標籤，二者保持一致就可，最好起一個包含地點、系統和用處的標籤名字。

等待主機配置完畢

購買好後，在“Server”一欄即可看到你的主機正在準備中了。此時他的狀態還是安裝中，請等待其安裝完畢並顯示運行中“Running”，那麼主機就準備完畢了。

查看服務器設置並獲取密碼

點擊上圖中你的主機的OS欄下的設置圖標，可以查看到主機的配置和流量詳細信息。重要的是主機的ip地址、登入用戶（一般爲root）和密碼，密碼不可修改，使用時一鍵複製即可。

此時請使用ping命令ping一下這個ip地址，保證可以成功連接這個ip，若不能成功ping到，則點擊上上圖右側的省略號，選擇紅色的“Server Destroy”銷燬部署，然後重新嘗試購買一次（購買一次只需$0.01，服務是按時計費的）：

user@LOCAL:~$ ping 45.77.250.43
PING 45.77.250.43 (45.77.250.43) 56(84) bytes of data.
64 bytes from 45.77.250.43: icmp_seq=1 ttl=42 time=463 ms
64 bytes from 45.77.250.43: icmp_seq=2 ttl=42 time=489 ms
64 bytes from 45.77.250.43: icmp_seq=3 ttl=42 time=409 ms

Step 2. 搭建後端、上傳網頁

這一步是網頁部署的最重要的環節，即登入你的服務器，安裝網頁客戶端服務框架，然後將自己的網頁上傳至服務器上。完成後用戶已經可以直接通過ip地址訪問你的網頁了。

登入服務器端

記錄下你的服務器ip地址和密碼之後，通過ssh登錄你的服務器命令行（若不太熟悉ssh和scp，請參看我的另一篇文章，它們對於後端管理非常重要）：

user@LOCAL:~$ ssh root@45.77.250.43
The authenticity of host '45.77.250.43 (45.77.250.43)' can't be established.
RSA key fingerprint is xxxxxxxxxxxx.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added '45.77.250.43' (RSA) to the list of known hosts.
[email protected]'s password: 
[root@Singapore-CentOS-Test ~]# [# 這裏就是服務器端的命令行了]

打開服務器的80端口接聽權限

這一步非常重要，很容易被忽略。Vultr租下的服務器默認是不打開80端口的，一般網頁的接聽默認均是通過80端口，所以我們需要手動打開一下IPTables中的80端口。
使用nano/vim打開/etc/sysconfig/iptables文件，在已有的ACCEPT規則之後、REJECT規則之前添加一行規則：

-A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT

然後保存，並重啓防火牆服務：

service iptables restart

安裝Nginx客戶端

成功進入服務器命令行後，下一步就是爲這臺服務器配置一個網頁服務客戶端。這裏選擇的是輕便簡潔的Nginx，當然也可以使用Apache等。
首先使用yum安裝Nginx，yum會自動處理好所有的依賴問題，很簡便。安裝完成後打開Nginx：

yum -y install nginx
nginx

安裝完成後，此時nginx安裝完成了，端口權限正確的情況下，在瀏覽器中輸入ip地址，已經可以看到Nginx的默認歡迎頁面了；否則，請仔細檢查端口是否開放：

配置Nginx客戶端

Nginx的用戶配置文件路徑爲/etc/nginx/nginx.conf，將此文件的內容修改爲我們需要的配置即可，最好不要修改另外的默認配置文件。將nginx.conf文件的內容用nano/vim寫爲以下內容（此爲最簡單的配置，足夠支持一個靜態網頁的部署了，還有很多很多其他配置功能如反代、訪問控制等等此處暫且不提），注意註釋部分行：

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {

}

http {
    include             /etc/nginx/mime.types;                    # 保證css文件類型的解析正確
    sendfile            on;

    server {
        listen          80;
        index           index.html;                               # 設定被訪問的導覽首頁
        try_files       $uri $uri/index.html;
        root            /www/homepage;                            # 網頁文件夾的路徑

        # 網頁文件的導引位置
        location / {
            allow       all;
            root        /www/homepage;                            # 保持同上
            access_log  on;
        }

        # 其他後綴文件的導引位置
        location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt) {
            root        /www/homepage;                            # 保持同上
        }
    }
}

修改完畢記得保存，然後檢查一下配置文件是否有語法錯誤，並重載Nginx：

nginx -t
nginx -s reload

上傳網頁文件

使用scp將本地的網頁文件夾上傳至服務器端，例如上述配置中設置的文件夾位置爲/www/homepage，則網頁文件夾爲homepage/，homepage/下保證有index.html，如前文的文件樹所示。儘量不要放置在root用戶下，否則會出現權限問題。
在Linux終端中使用scp上傳：

user@LOCAL:~$ scp -r homepage root@45.77.250.43:/www/homepage
root@45.77.250.43's password: 
index.html                                              100%  187     0.2KB/s   00:00

上傳完畢，現在從瀏覽器訪問這個ip地址後，就可以看到我們的網頁啦！（如果出現“403 Forbidden”問題，那麼請仔細檢查你的Nginx能否定位到index.html，且網頁文件夾整體權限是否是755或以上）：

Step 3. 申請域名

其實我們的網頁已經算是部署成功了，接下來是錦上添花的一步：申請一個好記的域名。有關域名的申請網上有非常多的選擇，這裏推薦很省心的免費域名獲取平臺Freenom。

Freenom註冊

可以點擊鏈接進入 Freenom的官方網站 2，網站有中文語言。點擊右上角的“登入”，同樣是註冊和登錄的過程，比較方便的是可以直接通過Google賬戶免註冊登錄，這裏就不再贅述。

查閱申請免費域名

點擊“Services”下的“註冊一個新的域名”，然後在搜索框中輸入你想要的域名名字，檢查可用性，查看這一名字目前的申請情況。例如我想要申請一個域名josetest：

可以看到上面列出了這一名字目前對應的可以獲取的免費頂級域名後綴（如大名鼎鼎的.tk），而下方開始是需要收費的後綴（如.com一般都不會免費）。選擇一個免費的域名，然後點擊“Checkout”，進入如下設置環節：

這裏，可以選擇12個月的免費時間（到期了也可以再次申請免費12個月的）；Freenom本身提供了一個DNS服務，可以直接填寫服務器ip地址後使用他的DNS服務，我們先這麼選。繼續後，填寫一些賬戶細節，然後這一域名就被我們申請到了。進入賬戶下的“我的域名”，可以看到已經有這個域名了。
現在在瀏覽器輸入josetest.tk，已經可以訪問到我們的網頁啦！

DNS服務

Freenom直接提供的這個DNS服務不是特別穩定，國內使用有可能會解析不到，所以我推薦使用DNS服務DNSPod，然後在Freenom上設置讓這一域名的DNS使用第三方DNSPod解析。
可以點擊鏈接進入 DNSPod的官方網站 3，同樣也是註冊賬戶，就跳過了。

添加DNS解析條目

在“我的域名”中，選擇“Add Domain”，添加我們註冊的域名josetest.tk：

添加兩條A記錄，指向我們的域名@和www，“value”中爲ip地址：

設置Freenom域名使用DNSPod解析

進入Freenom中的“My Domains”下，選擇我們域名的“Manage Domain”，在“Management Tools”下選擇“Nameservers”：

選擇“Use custom nameservers”，將DNSPod的NS服務記錄地址填入：

確認後，我們就將Freenom域名使用DNSPod服務解析了。

效果檢驗

我們這樣就成功將本地的靜態網頁部署在自己的服務器上，並且申請了鐘意的域名解析到它了。現在，在瀏覽器中輸入域名，就可以成功看到自己部署的靜態網頁了！

若文中有什麼不足之處或錯誤，歡迎大家評論指出～

VULTR：https://www.vultr.com/ ↩
Freenom：https://www.freenom.com/zh/index.html?lang=zh ↩
DNSPod：https://www.dnspod.com/ ↩

網頁建站部署萌新向詳細教程 - 讓別人訪問你的主頁非常簡單

寫在前面

爲什麼想到寫部署教程

不講什麼、會講什麼

前置

網頁部署基本概念

服務器

域名

DNS服務

詳細部署流程實例

Step 0. 準備靜態網頁

本地網頁編寫

示例

Step 1. 租借虛擬主機

進入Vultr官網註冊充值

購買租借套餐

等待主機配置完畢

查看服務器設置並獲取密碼

Step 2. 搭建後端、上傳網頁

登入服務器端

打開服務器的80端口接聽權限

安裝Nginx客戶端

配置Nginx客戶端

上傳網頁文件

Step 3. 申請域名

Freenom註冊

查閱申請免費域名

DNS服務

添加DNS解析條目

設置Freenom域名使用DNSPod解析

效果檢驗

有關 Rust 語言設計理念、優缺點的一些隨筆

對共識算法 Paxos、Raft 的一些理解

有關 File System 和 Database 的一些隨筆

MacOS X Mojave GDB 安裝 & Codesign 步驟記錄

梳理常見硬盤存儲 I/O 接口相關簡稱

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結