Media Buy之免費(fèi)且高速的Landing Page部署方案

時(shí)間：2023-04-18 14:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-18 14:06:01 來源：網(wǎng)站運(yùn)營(yíng)

Media Buy之免費(fèi)且高速的Landing Page部署方案：

前言

對(duì)于新手且不懂技術(shù)的Media buyer來說，Landing Page是一個(gè)令人頭疼的部分，我剛開始的時(shí)候是跟著《40天》教程使用AWS，后來因?yàn)镃DN費(fèi)用過高轉(zhuǎn)過其他方案，可以看我早期我寫過的一篇文章《Media Buy之Landing Page的資源文件CDN部署方案》,目前我的部分Landing Page也仍然在使用那篇文章中的方案，不過也正在逐漸往本篇文章將要講述的方案遷移，部分已遷移到新方案的Landing Page加載速度和穩(wěn)定性表現(xiàn)良好，已穩(wěn)定使用一個(gè)月以上。

資源準(zhǔn)備

CloudFlare

注冊(cè)地址: https://www.cloudflare.com/

我們需要使用到它免費(fèi)的DNS和CDN。

GitHub

注冊(cè)地址: https://github.com/

我們主要使用它來管理我們的Landing Page，同時(shí)你也需要一個(gè)GitHub客戶端，下載地址是: https://desktop.github.com/

Netlify

注冊(cè)地址: https://www.netlify.com/

我們需要使用它來進(jìn)行靜態(tài)部署，也就是存放我們的Landing Page，你可以使用GitHub帳戶來直接注冊(cè)Netlify，也可以注冊(cè)好之后再連接GitHub帳戶，這個(gè)下面會(huì)教怎么連。

http://Name.com

注冊(cè)地址(aff): https://name.sjv.io/c/3104883/1005785/13165

建議使用它來購買域名，這家可以使用支付寶支付，使用promo code(優(yōu)惠碼): privacyplease 可以獲得免費(fèi)的Whois Guard。

個(gè)人強(qiáng)烈建議始終使用.com域名。

原理解析

Netlify本身是一個(gè)免費(fèi)的靜態(tài)網(wǎng)站部署方案，主要是給個(gè)人博客使用，我的博客https://maxjmac.com/最初也是使用Netlify作為部署方案。它每個(gè)月有100GB的帶寬額度，看上去好像不是很夠用，但是當(dāng)你配合CloudFlare的CDN進(jìn)行使用的話，100GB是完全足夠的。所以這個(gè)方案可以說是除了域名，完全免費(fèi)。

配置流程

1. 首先去選購好你的域名

這里只演示如何使用promo code。

2. 然后到GitHub創(chuàng)建一個(gè)代碼倉庫

登錄GitHub后點(diǎn)擊上圖中紅框部分（兩者均可）。

Repository name填寫一個(gè)倉庫名稱，選擇Private，勾選Add a README file，最后點(diǎn)擊Create repository即可創(chuàng)建。

創(chuàng)建成功后，點(diǎn)擊Code按鈕，再點(diǎn)擊Open with Github Desktop，就會(huì)喚起我們前面安裝好的那個(gè)GitHub Desktop應(yīng)用，將倉庫下載到本地，如下圖：

后續(xù)我們只需要將LP放到本地倉庫中，再提交到GitHub，即可自動(dòng)部署，這個(gè)后面會(huì)有講述。

3. 連接Netlify和GitHub

打開https://app.netlify.com/，點(diǎn)擊GitHub直接登錄。

如果是Email注冊(cè)的賬戶，則在登錄后點(diǎn)擊右上角的頭像，進(jìn)入U(xiǎn)ser settings，在Profile下方的Connected accounts一欄中點(diǎn)擊Edit settings，然后連接GitHub即可。

回到主界面中，在Sites菜單下點(diǎn)擊Import from Git，如下圖：

在彈出的頁面中點(diǎn)擊GitHub按鈕，如下圖：

這時(shí)會(huì)彈出一個(gè)窗口，進(jìn)行GitHub驗(yàn)證，如下圖：

點(diǎn)擊Authorize Netlify，進(jìn)入下一步，如下圖：

為安全考慮，建議只授權(quán)訪問相應(yīng)的倉庫，選擇后點(diǎn)擊Install按鈕。

繼續(xù)點(diǎn)擊上圖中的紅框部分，進(jìn)入最后一步，最后一步內(nèi)容無需修改，點(diǎn)擊最下方的Deploy site即可。

4. 連接Cloudflare和域名

登錄Cloudflare后臺(tái)后，點(diǎn)擊添加站點(diǎn)按鈕，輸入你的域名后點(diǎn)擊添加站點(diǎn)。

計(jì)劃選擇最下方免費(fèi)的即可，如圖

選擇后點(diǎn)擊繼續(xù)，會(huì)跳到查看您的DNS記錄這一步，先不用管，點(diǎn)擊繼續(xù)。

進(jìn)入更改您的名稱服務(wù)器這一步，按步驟，我們先到域名管理的后臺(tái)https://www.name.com/account，點(diǎn)擊Account菜單，點(diǎn)擊你域名右側(cè)的MANAGE按鈕。

往下滾動(dòng)找到NAMESERVERS，點(diǎn)擊下方的Manage Nameservers鏈接。

刪除原有的Nameservers記錄，將Cloudflare的更改您的名稱服務(wù)器頁面中步驟3的兩個(gè)記錄添加進(jìn)來。

點(diǎn)擊下方的完成，檢查名稱服務(wù)器按鈕即可。

在下一個(gè)頁面中點(diǎn)擊查看建議，將啟用“始終使用 HTTPS”和啟用 Auto Minify都應(yīng)用建議。最后轉(zhuǎn)到概述界面，等名稱服務(wù)器生效即可，生效后會(huì)收到一封來自Cloudflare的郵件。

將Cloudflare后臺(tái)的緩存菜單下的配置子菜單中的瀏覽器緩存 TTL從4小時(shí)修改為1年，如下圖：

5. 連接Cloudflare和Netlify

在Netlify的后臺(tái)，找到Site下的Domain settings，如下圖：

在Custom domains中點(diǎn)擊Add custom domain，如下圖：

輸入你的域名，點(diǎn)擊Verify，會(huì)顯示你的域名is already registered，直接點(diǎn)擊Add domain。

會(huì)來到HTTPS這一欄，先不要點(diǎn)擊下面的Verify DNS configuration按鈕，往上滾動(dòng)回到剛才Domains那里，點(diǎn)擊Check DNS configuration，如下圖：

獲取域名需要指向的記錄，如下圖：

在Cloudflare中分別添加不帶www和帶www的域名的CNAME記錄，如下圖：

添加完之后就去Netlify的Domain management下的HTTPS那一欄，點(diǎn)擊Verify DNS configuration按鈕就可以了。

至此，配置部分已全部完成。

如何使用

將你處理好的LP放到本地倉庫的根目錄下，如圖：

打開你的GitHub Desktop客戶端，你會(huì)看到如下圖的內(nèi)容：

我們?cè)?處隨意輸入一個(gè)標(biāo)題，方便以后你自己分辨即可，我一般以geo-landingpage名稱來命名，然后點(diǎn)擊2處按鈕，此時(shí)3處的按鈕會(huì)變成Push origin，點(diǎn)擊即可。

隨后到Netlify的后臺(tái)，Site overview菜單下，看到如下圖：

紅框部分即剛才填寫的標(biāo)題，狀態(tài)Published就代表成功了，我們可以用域名加路徑訪問試一下。

頁面正常打開，也帶有https標(biāo)志，測(cè)個(gè)速試試。

幾乎滿分。

總結(jié)

這套方案可以說是經(jīng)濟(jì)實(shí)惠，除了域名都不要錢。性能也很好，訪問速度很快。Netlify雖然每個(gè)月只給100GB的帶寬，但是配合Cloudflare使用的話完全夠用。配置起來也不復(fù)雜，配置好之后使用更是簡(jiǎn)單方便，只需放到本地倉庫，再在GitHub Desktop應(yīng)用中點(diǎn)擊兩下即可自動(dòng)部署到Netlify。

以上！




原文鏈接：https://maxjmac.com/affiliate-marketing/high-speed-landing-pages-host