近日閑來無事,想將之前的舊站點繼續維護起來,奈何使用的搬瓦工服務器因為搭建了的緣故,總是會出現IP被封的問題,用來搭建站點并不合適(需要經常變更IP地址)。但因為預算有限也不愿意再單獨購買一臺主機用來建設站點,所以就想著找找免費的建站服務提供商來部署自己的網站,如今站點初步建設完成,總結分享給希望低成本建站的朋友。
這套部署方案并不需要你懂代碼,按部就班復制粘貼完成配置即可,對非技術人員來說相對簡單。
免費的建站服務提供商
提供商 | 優點 | 缺點 |
wordpress.com | 易于使用,提供多種主題和插件,可以輕松定制網站 | 免費版本有廣告,功能受限 |
Wix | 拖放式編輯器,適合新手,提供大量模板 | 免費版本有廣告,存儲空間有限 |
Weebly | 簡單易用,拖放式構建器,集成電子商務功能 | 免費版本有Weebly品牌廣告,功能相對有限 |
GitHub Pages | 適合技術人員,支持自定義域名,完全免費,無廣告 | 需要一些技術知識,適合靜態網站 |
Google Sites | 與Google其他服務無縫集成,簡單易用,適合團隊協作 | 功能比較基礎,不適合復雜的網站需求 |
Netlify | 適合開發人員,支持持續部署和自定義域名,免費套餐功能強大 | 需要一些技術知識 |
這里面WordPress.com、Wix、Weebly免費版本都有內置廣告,這不是我想要的,我需要干凈的頁面。github Pages、Google Sites都有離開了VPN無法訪問的問題。Netlify注冊居然需要身份證驗證??
當然還有傳統的wordpress方案,這個和Wordpress.com不是一個東西,因為我不準備購買額外的主機所以不在選擇內。而且即使購買主機還需要有數據庫,如果選擇ALL IN ONE的模式部署,穩定性是很大的問題,而且我個人不會php,無法自己二次開發,所以如果你是技術人員Wordpress的可折騰性是不夠的,而如果你是非技術人員Wordpress部署非專業人士也是不太好解決的而且沒有源碼未來的拓展性也受限。
最終選擇的方案是Vercel和Vercel Template的一個輕量級建站模版Platforms Starter Kit,不過結論是這東西其實并沒有想象中那么好,主要是bug有不少完成度不高,但是作為個人博客或者獨立站的基礎模板完全夠用,于此同時還能得到完整的SSL服務、監控、日志、存儲、圖片服務、云服務的高穩定性,而這些功能的費用是0。
相關資源地址
模板地址:https://vercel.com/templates/next.js/platforms-starter-kit
部署流程以及注意點
- 準備工作:
- Github賬號(https://github.com/),注冊流程省略了
- Vercel賬號(https://vercel.com/),可以通過github賬號一鍵注冊,注意下Plan Type選擇Hobby是免費的,其他省略了
- 購買一個域名(省略)
Plan Type選擇Hobby是免費的
- 部署流程
- 部署很簡單,訪問模版地址(https://vercel.com/templates/next.js/platforms-starter-kit),點擊Deploy
一鍵部署
- 接下來就是創建代碼倉庫(倉庫名隨意)、創建存儲數據庫(數據庫名隨意)
代碼倉庫名稱
- 配置項目,這一步稍麻煩一點,但也都是復制粘貼的事,下面挨個講一下具體配置方法
- 域名NEXT_PUBLIC_ROOT_DOMAIN,這里要注意填寫你申請的根域名,比如你申請的是gooddomain.com,那就寫gooddomain.com不需要加任何前綴,因為代碼里有很多和域名硬編碼的東西,所以建議不要寫其他形式
填寫你的根域名
- 登陸主賬號認證信息設置,這個賬號主要是登陸后臺進行網站管理使用,三個配置項NEXTAUTH_SECRET, AUTH_GITHUB_ID,AUTH_GITHUB_SECRET
管理賬號相關配置
這幾個配置項通過https://github-client-generator.vercel.app/↗這個地址生成即可,訪問上面的地址,一路點擊,需要輸入名字的地方隨意輸入,然后就得到了想要的秘鑰,拷貝之后填進去即可。
使用網站生成相關秘鑰配置
注意在這一步創建完github秘鑰并拷貝完成后,需要回到github頁面修改該秘鑰的回調地址,否則將會出現登陸后回調不正確的問。訪問https://github.com/settings/apps進行修改
在這里修改github認證秘鑰的回調地址,否則無法登陸
添加回調地址,把localhost:3000替換為app.你自己域名即可
注意回調地址修改,因為只有后臺需要登錄。
- 圖片存儲TOKEN配置BLOB_READ_WRITE_TOKEN,需要先創建一個Blob Storage的庫,打開項目或者應用頁面,點擊Storage選項卡,點擊create輸入一個名字即可創建完成,然后復制粘貼即可
創建一個新的BlobStorage
- 以下配置非必須項,主要是為了實現這個模板多租戶的功能,需要調用vercel的Api,所以需要配置,如果你不需要這些功能,那么就可以隨便填(因為不填無法部署)
– 認證的Vercel秘鑰配置AUTH_BEARER_TOKEN,在這個鏈接https://vercel.com/account/tokens創建,名字隨意,注意創建完成需要復制一下秘鑰,因為秘鑰只會在創建完成后給你展示一次,后續你就復制不了了
生成Vercel認證秘鑰
– 項目ID配置PROJECT_ID_VERCEL,這個值在你的Vercel應用的Settings(路徑大概是這樣:https://vercel.com/<你的項目名稱>/<你的應用名稱>/settings)里即可找到
找到項目ID
– TeamID配置TEAM_ID_VERCEL,這個值在你的Vercel項目的Settings(路徑大概是這樣:https://vercel.com/<你的項目名稱>/~/settings)里即可找到
找到TeamId
– OPENAI_API_KEY,這個值的作用是發表文章的內置編輯器內嵌入了一個AI提示的功能,只需要你有openAI的apiKey,填了之后在你進行文章的時候可以通過/快捷性進行AI自動續寫。
配置完成,等待部署成功。
域名配置
域名配置有兩套方案:
- 將你的域名完全托管到Vercel,由Vercel負責域名解析服務
- 在你的域名原托管服務商配置域名映射到Vercel的入口IP
兩種方案都沒有問題,按照Vercel的域名配置提示進行設置即可。
最后即可使用你的域名訪問到你的網站了,訪問https://app.你的根域名即可訪問到站點管理后臺,來創建你域名下的子站點(也就是說你完全可以使用這一套應用來部署很多個獨立站點)
站點管理后臺
創建完成子站點后,就可以向子站點中添加文章之類的內容,并通過為子站點設置的子域名訪問到你的子站點。
你還可以訪問https://app.vercel.pub/體驗官方Demo,或者我的博客體驗子站點的樣式https://blog.justinmad.com/
前面提到這套模版有一些bug,在我的博客里有提到如何解決,我自己也在克隆的倉庫里做了修復,除了bug以外,我額外為這個子站點的頁面增加了分頁、社媒分享、聯系我一類的小功能,后面如果有需要的朋友我可以貼出代碼的倉庫地址。總的來說作為個人博客或者輕量級的外貿產品介紹頁來說完全沒問題,畢竟這一套下來什么費用都不需要,何況還有源碼可以隨意修改,更重要的是你還可以白嫖到一套云端的(1個Postgresql實例 1個類似Redis的KV庫實例1個對象存儲BlobStorage實例, 這些存儲甚至為你做了隔離的開發、預覽、生成環境)。
Vercel的模版里還有一些功能非常齊全的電商類模板,后續可以分享一個強大的電商解決方案Medusa的部署流程,這個東西比本文的這個模板可要強大太多了,功能涵蓋完整的電商功能:交易、商品、營銷、用戶、購物車、支付(支持10 種類貨幣和主流的境外支付平臺)、訂單、庫存、履約(正向、逆向、換貨、賠付)、稅務等等,最重要的是開源,對于二次開發非常友好。
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。