###### tags: `學習` `網頁上架`
{%hackmd SybccZ6XD %}
# 如何上架網頁

## 網頁上架前準備

### 0.準備好佈署的網頁

[佈署流程](https://hackmd.io/NuZgogDFQuO_N7FuMvpv1g)

### 1.購買網域
這裡是到[godaddy](https://account.godaddy.com/products)買，可以先只買http的網頁，有其公司的服務可以讓網域為https。

### 2.託管網域
因為godaddy網域的https要另外付費所以將網域託管到其他有提供免費服務公司
這裡使用[CloudFare的服務](https://dash.cloudflare.com/9a79ac729d9a5919442cd9cf2cf93b25)
另外轉代理的最主要目的指向網頁的位置，當然如果在godaddy已經購買https的服務也可以godaddy上設定網頁指向的位置
如圖

#### 1.開始託管網域
輸入剛剛買到的網域
#### 2.選擇方案
因為我是免費仔所以選擇免費方案XD

#### 3.會自動從購買網域的公司爬到設定檔

不過這些都會修改，所以點選繼續

#### 4.開始託管

1.因為要把網域給CloudFare託管所以要把下圖的這兩個設定檔貼到godaddy去

2.登入入godaddy網頁後，點選我的產品，點選想要託管的網域如下圖。

3.網域名稱伺服器點選變更

4.輸入我自己的名稱伺服器 (進階)在左下角

5.複製並貼上CloudFare的名稱伺服器並儲存

6.點選是

7.回到cloudFare點選完成


8.就耐心的等吧，網頁託管不是即時的，點選"檢查名稱伺服器"就會出現目前的狀態

### 3.設定DNS
#### 1.點選CloudFlare的DNS


#### 2.自訂網址指向的位置
1.可以點選新增紀錄增加新的網域名稱
2.或是修改既有的網域名稱
把切版直播班第八周作業做為目標指向，第八周的作業是放在GitHub所以下個步驟需要到GitHub page做設定
類型'CNAME'名稱'week8' 內容'a121515222.github.io'後儲存
如下圖
#### 3.到GitHub page做設定
1.點選想要指向的GitHub repositories > 點選page 在Custom domain
輸入'week8.chun-chia.site' (week8為名稱，chun-chia.site自己所購買的網域)後點選save

2.出現綠色打勾代表成功，但是如果出現錯誤也別緊張，因為服務不是即時的，有可能修改之後要等2-4個小時


3.最後GitHub會出現下圖


就代表DNS指向已經完成啦，記得要自己加上https

因為將網域託管給CloudFare所以需要在CloudFare上做設定
#### 4.更改為一律使用https
因為網路安全的關係強烈的建議一定要修改這一項
1.點選規則建立網頁規則如下圖


2.輸入想設定的名稱+網域 'week8.chun-chia.site'，並選擇一律使用https後儲存並佈署


## 網頁上架後

### 1.使用Google search console 提交網頁並觀看流量數據

1.搜索Google search console點選網域或是下拉式清單新增，輸入想提交的網址如下圖

2.google要驗證這個網域的所有人，複製下方的TXT

3.接著到CloudFare，雖然是在godaddy買的，但是我們給CloudFare託管了
選擇要提交給google的網域，點選新增紀錄，類型:TXT、名稱:week8(與提交的網址名稱相同)，內容：貼上從google複製的內容後儲存，如下圖

4.再回到google search console按下驗證，成功後畫面如下圖

5.點選前往資源後點選開始，就代表正式提交啦，要等24小時才會有數據

### 2.使用Google Analytics 追蹤流量

1.搜索Google Analystic，輸入建立帳戶的名稱後點選下一步

2.輸入資源名稱後下一步

3.點選商家資訊後建立

4.設定資料串流來開始收集資料
點選網頁，因為網頁是放在GitHub上

5.設定網頁串流

6.全域網站代碼，要把全域網站代碼放入自己的網頁中(layout.ejs)

7.重新在佈署一次就可以接收到資料啦

## SEO
### 網頁title怎麼下
舉例
(title) 蘋果手機 - 手機列表 - 自己的網頁名稱 (/title)
(title) html css大全 | 群嘉 (/title)
1.以消費者觀點來看最重要的是自己要買/看的東西，而不是網頁名稱，前面的
title比h1還重要

2.頁數超過10頁

## 使用vue cil如何上架至github

### 1.修改在CLOUDFare新增一個DNS
如下圖，新增的DNS為vue-eshop為子網域

### 2.到vue.config.js修改路徑
如下圖原本的路徑為github的repository
修改為下圖

### 3.增加CMANE檔案
放置的位置為public
如下圖
CNAME的內容如為
vue-eshop.chun-chia.site
也就是子網域加主網域最後是頂級域。

### 4.就上傳到github上吧
git init //第一次用的話
git add .
git commit -m "commit"
git push origin -u main

[Vue CLI 使用sh deploy.sh指令上傳到github page](https://hackmd.io/NuZgogDFQuO_N7FuMvpv1g)
[2021/11/2 怎麼改別人的code和發PR請求?](https://hackmd.io/BcuVzYajSdmZip57wPkRaQ?view)
[2021/11/4 關於merge / 整個協作過程](https://hackmd.io/3eGzFlHeSR-Zz-y7R5h73A)

## 虛擬主機
### 什麼是虛擬主機
簡單的來說就是可以跟公司租用空間放置網頁，不是實際租用主機。

硬碟空間：就是可以在虛擬主機存放多少內容

流量：當有人存取虛擬主機的內容大小，就會產生流量

## 注意事項
1.域名.com為公司行號使用，個人也可以購買與使用，只要不要被檢舉就好。
2.一個網域名指可以綁一個網頁嗎? 一個網域可以綁多個網頁，可以建多個主機去指向，網址帶使用者器哪個網頁。
這就是DNS，可以自訂網址指向，對應的主機(網址或IP)
例如：這次購買的網域是chun-chia.site
www.chun-chia.site 可以指向自己的gitHub //CNAME
shop.chun-chia.site 可以指向自己的拍賣網頁 //CNAME
local.chun-chia.site 可以指向一個ip //A
MX 是指向email
3.目前chrom遊覽器只允許https網頁，所以還是需要碼網域改成有https。
4.把網域託管給cloudFare不一定是即時的有可能會等上數小時到24小時
5.1年之後託管就會結束，網域就會回到godaddy
6.從CloundFare指向給GitHub的網址在GitHub上沒有https，所以要自己加上
7.可以研究關鍵字'網頁規則'、'CNAME與A差別'、'快取'
8.圖片與影片才是流量的大宗，圖片壓縮[tinypng](https://tinypng.com/)
9.每次GitHub Pages 更新的時候 custom domain都需要重新設定
10.全域網站代碼在放在layout.ejs中這樣子全部的頁面才能分析流量，在</body>前貼上，如果有多個layout那兩個layout都要貼。
11.每一頁的title不能一樣