個(gè)人網(wǎng)站建站相關(guān)總結(jié)

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

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

個(gè)人網(wǎng)站建站相關(guān)總結(jié)：原文鏈接：個(gè)人網(wǎng)站建站相關(guān)總結(jié)

建站需求

個(gè)人網(wǎng)站一般是輕量級的靜態(tài)展示站點(diǎn), 用于發(fā)布博客文章、心得體會、學(xué)習(xí)筆記、生活動態(tài)等, 鮮少用于提供后臺服務(wù), 因此也就沒有必要購置云服務(wù)器, 如阿里云的ECS或亞馬遜的AWS。GitHub提供了一個(gè)很好的“白嫖”機(jī)會: GitHub Pages。在GitHub賬戶下創(chuàng)建名為USERNAME.github.io的repo, 選擇適合自己口味的主題即可快速搭建個(gè)人網(wǎng)站的框架。這里強(qiáng)烈推薦: TeXt主題。GitHub Pages提供了個(gè)人站點(diǎn)的服務(wù)器, 只需要專心地簡單地通過Markdown語法編寫內(nèi)容并commit到repo即可, GitHub會為你自動更新你的站點(diǎn)內(nèi)容。如果你并不需要個(gè)性域名, 那么到這里就可以了, 你將擁有如下的個(gè)人站點(diǎn)的網(wǎng)址, 其中USERNAME是你的GitHub賬戶ID。

https://USERNAME.github.io如果你還想擁有自己的個(gè)性域名, 那么可以參考下面的內(nèi)容。

建站方案

目前, GitHub Pages已經(jīng)可以免費(fèi)地提供對個(gè)性域名的強(qiáng)制HTTPS服務(wù), 使你的個(gè)人站點(diǎn)即便在個(gè)性域名下也一樣擁有HTTPS加持而無需另外配置或購買HTTPS證書^[1]。

為了“白嫖”這個(gè)功能, 本文介紹的建站方案如下:

這里首先簡要介紹這幾個(gè)模塊各自的功能:

其中Cloudflare并非必須, 但它的功能如表并且免費(fèi)方案就夠用, 建議加上。

要使托管于GitHub Pages的站點(diǎn)支持個(gè)性域名, 需要進(jìn)行兩步操作: 添加CNAME與設(shè)置DNS解析, 分別在GitHub端和域名解析端(如Cloudflare)完成。這個(gè)過程是這樣的:

也就是說: 在GitHub repo中添加CNAME, 告知了GitHub你的個(gè)性域名和當(dāng)前repo綁定; 而DNS解析商只需要將你的個(gè)性域名解析到GitHub即可^[2]。

個(gè)性域名

可以在萬網(wǎng)或GoDaddy注冊, 分別是國內(nèi)、外的域名服務(wù)商。在萬網(wǎng)下注冊的域名最好進(jìn)行備案。本方案中唯一需要的花銷就在購買域名了。

Cloudflare

Cloudflare可以為你的網(wǎng)站提供CDN加速、域名解析、頁面跳轉(zhuǎn)以及若干實(shí)用的App, 例如: 回到頂部。上面提到的兩個(gè)步驟之一是到域名服務(wù)商設(shè)置, 在此以Cloudflare添加根域名(apex domain)為例^[3], 在DNS功能區(qū)下添加A類型的解析條目, 將個(gè)性域名鏈接到GitHub提供的IP地址(如圖所示)即可:

如此, 域名服務(wù)商這邊的任務(wù)就完成了, 接下來是GitHub Pages端的操作。

GitHub Pages

為了支持個(gè)性域名, 可以在repo的Setting下的GitHub Pages/Custom domain中輸入個(gè)性域名, 如圖:

在此設(shè)定后, repo中將會出現(xiàn)名為CNAME文件, 內(nèi)容即對應(yīng)的個(gè)性域名; 如此, 橋梁便搭起來了。此外, 還可以勾選圖中的Enfore HTTPS以強(qiáng)制站點(diǎn)使用HTTPS協(xié)議提高安全性, 勾選后一般需要若干小時(shí)實(shí)際生效。此后, 對個(gè)性域名的訪問將都建立在HTTPS協(xié)議之上。

如何在GitHub Pages搭建個(gè)人站點(diǎn)不是本文重點(diǎn), 你可以在這里或者這里找到更多詳盡的介紹方法。強(qiáng)烈推薦TeXt主題, 風(fēng)格貼近iOS風(fēng)格并且有詳盡的文檔說明, 對新手相當(dāng)友好。

Google search console

為了增加個(gè)人站點(diǎn)的曝光度, 可以通過google search console主動添加網(wǎng)站的站點(diǎn)地圖(sitemap), 一般是.xml文件。首先如圖所示在google search console下添加你的站點(diǎn)網(wǎng)址, 可以添加全域或一個(gè)子域名。

然后, 點(diǎn)擊“站點(diǎn)地圖”后輸入站點(diǎn)地圖的鏈接(一般是根網(wǎng)址/sitemap.xml)添加即可。

TeXt主題已包含jekyll-sitemap插件^[4], GitHub Pages將會在每次commit后為站點(diǎn)自動生成相應(yīng)的sitemap.xml文件。其他Jekyll主題也可以根據(jù)該插件的說明相應(yīng)配置即可。

補(bǔ)充: 對于其他的搜索引擎(百度、Bing等)也可以類似設(shè)置。Bing支持直接從已配置好的google search console導(dǎo)入。

額外選項(xiàng)

鏈接重定向

Cloudflare除了提供DNS解析外, 還提供Page Rule功能, 該功能可以用于實(shí)現(xiàn)鏈接的跳轉(zhuǎn)。使用場景如下(踩坑歷史): 你先將你的個(gè)人站點(diǎn)鏈接到了個(gè)性域名的三級域名下, 例如: http://blog.example.com, 并且在搜索引擎中已經(jīng)留下了若干記錄或者在其他地方留下了對該域名下的網(wǎng)址的鏈接; 但某一天你覺得這個(gè)域名結(jié)構(gòu)不太好, 你想把它換成這樣: http://example.com/blog/; 如果直接換了而不做其他的處理, 那么以前的鏈接也就變成了死鏈。這時(shí)候就可以用到Page Rule功能用于實(shí)現(xiàn)鏈接的重定向。免費(fèi)的Cloudflare計(jì)劃提供3條重定向規(guī)則制定, 由于該規(guī)則支持通配符匹配^[5], 對于個(gè)人站點(diǎn)一般是夠用的。例如, 我的站點(diǎn)在修改結(jié)構(gòu)前如下:

https://blog.be-my-only.xyz/yyyy/mm/dd/article-title.html而修改后相應(yīng)的鏈接變?yōu)榱?

https://be-my-only.xyz/blog/article-title.html我去除了鏈接中的日期, 并且將原本的三級域名blog挪到了根域名下的blog目錄了, 那么在Page Rule通過一條指令即可實(shí)現(xiàn), 如圖:

其中*是通配符, 而$3表示第三個(gè)通配符匹配的內(nèi)容。在源鏈接中使用了三個(gè)通配符, 第一個(gè)用于匹配HTTP或HTTPS, 第二個(gè)用于匹配源鏈接中的日期部分, 第三個(gè)是源鏈接中的網(wǎng)頁名稱。在目的鏈接中我強(qiáng)制了HTTPS協(xié)議并且地址中現(xiàn)在只保留了第三部分, 因此如上所寫。確認(rèn)以后點(diǎn)擊保存并部署稍等幾分鐘Page Rule就會生效, 如此便可以保留已有的搜索引擎結(jié)果和別處的鏈接而仍然將用戶引導(dǎo)到修改后的網(wǎng)址了。

小工具

Cloudflare還提供了若干常用的小工具, 這類工具的特點(diǎn)在于與站點(diǎn)后端完全獨(dú)立, 你可以在Cloudflare的后臺調(diào)整、預(yù)覽小工具部署到你的站點(diǎn)后的效果, 部署后用戶在訪問你的站點(diǎn)時(shí)便可以利用上這些小工具。

參考

1. ^https://github.blog/2018-05-01-github-pages-custom-domains-https/
2. ^https://help.github.com/en/articles/securing-your-github-pages-site-with-https
3. ^https://help.github.com/en/articles/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain
4. ^https://github.com/jekyll/jekyll-sitemap
5. ^https://support.cloudflare.com/hc/en-us/articles/200172286-Configuring-URL-forwarding-or-redirects-with-Cloudflare-Page-Rules