使用Vercel+Github搭建個人博客


前言

在座的各位應該都試過用Github Pages來搭建個人博客,但效果卻總是不不盡如人意,訪問速度太太太太太慢了。

今天我在群里問大佬該如何做到讓博客秒開,大佬給我推薦了Vercel,讓我試試。我在百度上搜索,竟然找不到官網,經過一番周折后還是找到了。

https://vercel.com/

因為我的Github賬號已經注冊過Vercel了,注冊賬號的時候也沒注意流程,只好引用MTR-Static大佬的圖片了。

這篇教程就當是從零開始建設個人博客吧。

正文

注冊Github賬號

不多贅述,參考這篇教程吧。

注冊Vercel賬號

這里我用我的Github小號演示。

打開https://vercel.com/signup,點擊Continue with Github

firefox_2020-08-28-01-47-51-1598550471.png

出現授權頁面,點擊Authorize Vercel

火狐截圖_2020-08-27T17-49-26.430Z.png

創建博客

點擊Import Project

firefox_2020-08-28-02-11-12-1598551872.png

接着點擊Select Template

firefox_2020-08-28-02-11-41-1598551901.png

在模板選擇頁面向下滾動,可以找到Hugo,點擊它,現在我們將使用Hugo來生成靜態網頁。

firefox_2020-08-28-02-13-31-1598552011.png

保持默認,點擊Continue

v2-808d1ea8ba78e0250b328b265ebb60bf_r.jpg

點擊Install Vercel for Github

v2-7f0e7b2ad2a4d2be9b31657c937e0d33_r.jpg

點擊綠色的Install

v2-237a6169386d6296dbafe6123450e676_r.jpg

保持默認,點擊Continue

v2-a476f208535064ac9abe8db76a2d4559_b.jpg

到了Create Git Repository頁面,因為之前關聯的是Github,所以選擇Github。在Repository Name內填寫你想要的倉庫名稱,Vercel將在Github創建一個倉庫用於托管文件。Private Git Repository無論勾選與否都差不多,區別就在於創建的倉庫是是私人倉庫還是公開倉庫,點擊Continue

firefox_2020-08-28-02-18-00-1598552280.png

Import Project頁面保持默認即可,點擊Deploy

firefox_2020-08-28-02-22-13-1598552533.png

現在就創建成功了,點擊Visit就可以直接訪問。但是界面十分粗糙,接下來需要做一些個性化設置。

firefox_2020-08-28-02-23-51-1598552631.png

火狐截圖_2020-08-27T18-50-23.903Z.png

開始使用

你可以到GitHub Desktop下載GitHub Desktop,相比CLI的git,配置起來更便捷。

登錄號賬號之后點擊File,接着點擊Clone repositories

GitHubDesktop_2020-08-28-03-00-37-1598554837.png

找到自己為創建Hugo創建的倉庫,選中后點擊Clone

GitHubDesktop_2020-08-28-03-02-46-1598554966.png

GitHubDesktop_2020-08-28-03-04-02-1598555042.png

打開文件資源管理器,打開C:\Users\你的用戶名\Documents\GitHub,應該可以看到剛剛clone的倉庫,此處為test

explorer_2020-08-28-03-06-15-1598555175.png

按照主題提供的方法做配置,我推薦even

修改完之后打開Github Desktop,應該能看到更改,在左下角的Summary里填入做的修改(upload theme或者別的什么,有內容即可),點擊Commit to master

圖片.png

點擊右上角的Push origin,把修改推送到Github。

GitHubDesktop_2020-08-28-03-14-23-1598555663.png

完成之后再等待半分鍾,打開網站,改動應該已經生效了。

firefox_2020-08-28-03-21-47-1598556107.png

這是因為Vercel會檢測到Github倉庫改動之后會自動重新生成網頁,之后更新文章可以直接在Github網頁版上傳到./content/posts里,比在電腦上自己生成網頁再Push方便不少。

firefox_2020-08-28-03-20-29-1598556029.png

綁定域名

這需要你自己有一個域名,如果不想花錢的話可以在freenom免費申請一個,這里不多贅述。

在Vercel的控制面板里打開你的項目(如此處的test) > Settings > Domains,在輸入框里輸入你想綁定的域名,此處我用test.yxyy.top。接着它會提示錯誤,這是因為我還沒有設置域名解析。

firefox_2020-08-28-03-32-51-1598556771.png

你需要按照提示在域名提供商那里做CNAME解析,我是在阿里雲注冊的域名,其他的域名注冊商應該也大同小異。

firefox_2020-08-28-03-35-23-1598556923.png

現在回到Vercel控制面板,應該就不會報錯了,它還會自動幫你申請Let's Encrypt的SSL證書。

firefox_2020-08-28-03-37-34-1598557054.png

真不錯,可以帶着域名訪問了。

圖片.png


以下為備份。

到了Select Vercel account的頁面,在下面的Personal Account內點擊你自己的賬戶,接着點擊Continue

firefox_2020-08-28-02-16-18-1598552178.png

可能是因為我的Github小號用的是189郵箱?無法注冊。

firefox_2020-08-28-02-05-34-1598551534.png

引用別人的教程吧,請按照他的方法來注冊賬號,注冊完帳號就可以回來了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM