手把手 hexo 從零開始教學(二)

發表於 更新於 分類於 Disqus： 文章字數： 3.8k 所需閱讀時間 ≈ 10 分鐘

繼上一次我們成功的在本地端 localhost 做出一個靜態的網頁，在這一次的教學中，我會介紹如何把靜態網頁使用 docker 包起來佈署，以及利用域名、DNS 真的架出一個屬於個人的網站。於其它網路上的教學文不同的是，因為考慮到未來我有可能要加上動態網頁的部份，所以我沒有使用 gitpage 去做。

keywords: hexo, docker, DNS, cloudflare

生成靜態資料

所謂的靜態資料就是指把 js, css 經一連串編釋，變成一個最小單位的一個檔案，可以把它想像成一個程式碼都以經最佳化的濃縮檔。而這個資料夾在習慣上會取名叫 public 或者是 build (這些都可以在設定中更改)，而我們只需要把這份檔案，不管用什麼方法把它部署上去，我們的網站就搞定了。

在 hexo 中，生成靜態資料的指令是：hexo generate 或簡寫為 hexo g。執行就可以看到工作目錄底下多了一份 public 檔，而那個就是接下來的重點了。

docker

我就不在這裡多說什麼是 docker，但我為了想要移植方便因此多用一個 docker。

在工作目錄底下新增一個 Dockerfile 

1
touch Dockerfile
在裡面新增以下的程式： 
1
2
3
4
FROM nginx:stable-alpine
COPY public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
在這裡我使用 nginx 這個反向代理套件。以下是 Dockerfile 內容簡單描述： 1. 會先去 Dockerhub 上下載對應的 image 2. 把剛剛生成出來的 public 複製到 nginx 底下的資料夾，nginx 會自己去偵測它 3. 把 Docker 中的 80 port 打開 (80 port 是 http 的 port) 4. 起動 nginx

最後執行以下指令，等它跑了一陣子後就會建立好一個 container，並且執行喔 

1
2
docker build
docker run

nginx

後來我還在外面再加上一層 nginx 來管理未來可能會新增前後端的需求。以下是 nginx 的 Dockerfile 內容 

1
2
FROM nginx 
COPY ./default.conf /etc/nginx/conf.d/default.conf
然後新增一個 default.conf 檔案，裡面是來設定 nginx 的。 
1
2
3
4
5
6
7
8
9
10
11
12
13
server {
  listen 80;
  listen 443;

  location / {
    proxy_pass         http://frontend;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;
  }
}

listen 80、listen 443 是來監聽這些 port 到主機上的，location 則是未來管理網址來達成重新導向的。記得要在 proxy_pass 的地方打上 Docker 中對應的 bridge 名稱，這樣 Docker 的前後端才可互相溝通。

docker-compose

因為我們有太多 Dockerfile 啦，還是用 docker-compose 來好好整理統一一下。

在最上一層資料夾新增一個 docker-compose.yaml 檔 

1
touch docker-compose.yaml
在裡面新增對應的程式碼： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
version: '3'
services:
  frontend:
    build: ./hexo
    image: "hexoapp:1.0.0"
    restart: unless-stopped
    networks:
      - sub-etha
    volumes: 
      - ./hexo/public:/usr/share/nginx/html
  revproxy:
    build: ./nginx
    image: "reverseproxy:1.0.0"
    restart: unless-stopped
    networks:
      - sub-etha
    ports:
      - 443:443
      - 80:80
    depends_on: 
      - frontend
networks:
  sub-etha:
    driver: bridge

接著輸入： 

1
docker-compose up --build
就會看到全部的 Dockerfile 都被我們串接在一起啦，這個時候再回到 localhost 可以看到我們的網頁有成功運行，(這個時候你可能會想：阿這不就跟剛剛一模一樣，同樣的網址阿效果也相同，為什麼我們還繞了一大圈用這麼多東西呢？)。其實這些準備，都是為了讓我們未來不管是擴充，或是移植到其它伺服器上時更加方便的事前準備喔。

接下來 build 好 container 後，我們就可以讓我們的網頁上線啦啦啦。

域名 & DNS

porkbun

現在可以看到我們的網址都是一串神秘的 ip 位置，或是 localhost，這是因為我們是把網站架在自己的電腦上的，自己的電腦連上自己架的網站非常合理，但是如果今天你的目標是要讓全世界的人都可以看到你認真經營的網站的話，就必須要有三個條件啦

  1. 一個固定 ip
  2. 一個域名
  3. 一個機器

通常在家裡面使用的網路都是「浮動網路」ip 位置每格一段時間就變，一旦變了就沒有人可以存取到你的網站了，而要一個固定 ip 解決方法有很多，可以打電話到 ISP (中華電信…) 去尋問，或是用 PPPoE 也可以。(或是有錢的話可以去 azure 或是 GCP 要一個也可以 w)

首先先去買域名，這裡我是向 porkbun 買，這裡的網域又大又…阿是又多又便宜。

選好一個自己喜歡的名字後，接著選副域名，通常越有名的就會越貴，像是 .com .org 阿，那越不有名或看起來就像詐騙網站的 ww 就會非常便宜，像是 .xyz ...那就看自己的需求囉。porkbun 第一年會有優惠，從第二年開始要續約的話才會錢一點。

買好後就會看到下列畫面： image-20210702152427067

一共有兩個重點：DNS 以及 DNS record，DNS 是 Domain Name Server 的縮寫，負責把 ip 位置轉換成剛剛買的網域，DNS record 則是一個轉換的設定。

接下來我會介紹 cloudflare ，一個免費而且非常好用的 DNS 代管伺服器，它可以免費提供 Whois 服務 (查不到你的 ip 位置)，以及擋下一些 DDoS 攻擊。

cloudflare

到 cloudflare 中，先註冊一個帳號，接著新增一個網域，他會要叫你先驗證 DNS，也就是設把 DNS 改成 cloudflare，回到 porkbun，點開 Authoratative nameservice 把裡面的東西全刪了，貼上 cloudflare 提供的 DNS。接下來 porkbun 會說這個設定可以要等最多 48 小時才會生效，因為 DNS cache 的問題，(但我個人的經驗差不多 1 個小時就差不多了 w)

image-20210702154142658

一但 cloudflare 驗證完後會寄一封通知信，接著 porkbun 的 DNS record 設定就會換移到 cloudflare 上啦。

回到 cloudflare ，點開 DNS，選擇 A (就是指單純轉換的意思)，Name 寫買的網域名稱，Content 則是 ipv4 的位置，也可以加上 www 的設定，就可以一併把 www.website.com 導向到 website.com。

image-20210702154406198

恭禧啦！設定完成了！可以直接利用買的網域名稱連上自己架的網站伺服器了！

homepage 雷

如果架好後發現，咦奇怪，我的網站怎麼 js css 跑掉了，排版變的怪怪的，這極有可能是因為 homepage 設定的問題，因為在 hexo generate 因為我們把 public 資料拿到其它地方去，網頁的「首頁」位置跑掉了，在 package.json 最上面加上這一行就可以解決問題了。

1
2
// "homepage": "<你的網頁網域>"
"homepage": "https://mushding.space/"