独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案!
原文章來自:獨立于 Github,更方便地管理自己的靜態網站?來試試這套自托管 Git 倉庫方案! - Sxrhhh 的個人小站
目錄就在前幾天,我成功地將我自己的網站由 wordpress 遷移為了靜態網站。不過說是遷移,但是域名保持不變,本質上就是把將網站文件夾一整個換了遍。我選擇的是 mkdocs 的網站框架,在一般情況下,我們選用 Github Pages 作為網站托管方案。但是這一次,我想仍然保留在自己的服務器上。但是我還是想要享受到 git 版本管理網站的快捷感,怎么辦呢?這篇文章提供的 Git 自托管方案便可以為你解決這一煩惱!
- 服務器結構簡介
- 在自己的 PC 上構建網站
-
建立遠程 Git 服務器
- Github 的倉庫方案
- 建立 git 用戶管理倉庫
- 將客戶端與 git 服務器同步
- 注意事項:編寫 .gitignore文件
-
建立 web 服務器
- 將 web 服務器連接到 Git 服務器
- 創建 Apache 虛擬主機
- 實時同步 web 網站目錄
- 驗收成果
- 網站維護碎碎念
服務器結構簡介
這套方案可以實現一個非常方便的編寫博客的方法。你可以在自己電腦上寫好文章,生成網站,并且直接git push即可部署到自己的服務器上,一氣呵成,一般情況下完全不需要登陸遠程服務器。
在講述方案之前,我先說明一下這套方案采用的服務器結構。
- 本地客戶端:在本地,也就是我們用來寫文章的 Windows 系統,在下文,我稱之為客戶端。客戶端上,我們需要安裝
Git,并且我們要會用git提交文件。git的安裝方法和使用方法在此不做贅述,相信各位試圖搭建靜態網站的讀者,git的用法肯定是有所涉獵的。(當然,如果你的主力機是 Linux 系統的話也完全沒有問題,將這篇文章涉及的 Windows 目錄結構和命令使用翻譯為 Linux 版本的,想必對你來說并不難。) - 遠程 Git 倉庫:如果我們不想要將網站依托于 Github 這個網站,那么我們就得要自己建立一個 Git 服務器。通過這個 Git 服務器,我們接受來自客戶端的 Git 請求來儲存網站。
- 遠程網站服務器:這個服務器就是實際上的 web 服務器。這一次,我采用的是
apache服務器,通過虛擬主機方式,建立網絡站點,并且實時同步 Git 服務器的內容,實現網站的更新。
通過這一套流程,我們就可以在本地寫好文章,放在相應的網站位置,生成預覽、提交文件,從而完成網站更新的一整套流程。
如下圖,便為這一套系統的基本框架了,非常的簡單。
在自己的 PC 上構建網站
構建網站的第一步,便是構建自己網站。要構建靜態網站,有很多的解決方案,比較著名的就有Hexo,Mkdocs,Hugo,Jekyll等,甚至你還可以自己手寫前端 CSS 和 JS 生成 html 文件。不管采用那種方案,最后的要求便是你要有一個site文件夾,或者叫其他名字,他的里面便是網站所有的被掛在前端的文件,包括 html 之類的玩意。我們的 Apache 服務器的文件目錄便最終會指向它。
這次,我采用的 Mkdocs 由python編寫而成,它的一個名為mkdocs material的主題顯得非常簡潔美觀,所以我選擇了它。和其他運行環境不同的是,這一次我們所有的網站環境全部會部署在本地,遠程服務器完全不需要。這也很好理解,畢竟遠程服務器只要展示網站文件就夠了,生成網站的任務落在了客戶端的頭上。
Mkdocs 采用一個叫做mkdocs build的命令來構建網站文件夾,我們每一次用 git 提交文件之前都會進行一次這樣的構建。現在,我們來建立那個 git 服務器。
建立遠程 Git 服務器
要*方便地管理網站文件,離不開的就是一個 Git 服務器。我們將會在遠程服務器上搭建一個 Git 服務器。與想象中的不同,他不需要也沒必要像 GitLab 那樣配置復雜。與之相反的是,這件事出乎意料的簡單。在此之前,我先帶各位回憶一下 Github 上的 git 服務器長什么樣。
Github 的倉庫方案
在 Github 上,如果我們需要克隆一個存儲庫,我們需要諸如以下命令:
git clone git@github.com:cycode0527/learngit.git
可以看到,這條命令采用 ssh 的方式鏈接的 Github 服務器,并且克隆了上面的 cycode0527/learngit.git 的倉庫。但是這個克隆并不是一個簡單的復制,在服務器上,它叫 xxx.git ,克隆到了本地,他就變成了一個叫做 xxx 的文件夾,里面有一個叫做 .git的隱藏文件夾。這其中的差別其實就是:Git 服務器上的 git 倉庫叫做裸倉庫。裸倉庫沒有“工作區”的概念,所有的數據全部保存在一個文件夾內,不需要直接操控其中的文件,只要干好 Git 服務器一件事就行。
再次看向上面那條 clone 命令,你可能還會注意到 git@github.com這一小節。只要你用過 ssh 這條命令,你應該就會清楚,這是指人家 Github 服務器上的一個叫做 git 的用戶名。我們在克隆倉庫時,就會連接到 github.com 的 git 用戶,并且讀取你(cycode0527)的 xxx.git 文件。搞清楚這一點,我們就清楚了,在遠程服務器上,有一個負責處理 git 請求和存儲的用戶,叫做 “git” 。
建立 git 用戶管理倉庫
現在,我們就可以在遠程服務端建立 git 用戶了。
首先,我們要讓服務器支持 git ,直接安裝即可。
sudo yum install -y git # 本條命令為 CentOS 使用,其他操作系統可自行更改
然后,我們建立 git 用戶和用戶組,用來運行 git 服務。
groupadd git
useradd git -g git # 建立用戶 git 并加入 git 用戶組
用這種方式創建的用戶,系統會默認創建好它的家目錄。我們現在創建一個倉庫吧。
cd /home/git
mkdir repo # 創建了一個叫做 repo 的文件夾,用于存放各種倉庫
cd repo
git init --bare website.git # 建立一個名為 website 的倉庫,--bare參數就是創建裸倉庫
# 輸出結果: Initialized empty Git repository in /home/git/repo/website.git
最后我們調整一下倉庫的所有者,以防止你剛才創建 git 用戶所用的 root 用戶忘記切回來,導致 git 用戶家目錄下全是 root 的文件。
chown -R git:git /home/git/repo
現在,這個 git 服務器已經建好了,下一步要做的就是將客戶端連接到這個服務器。
將客戶端與 git 服務器同步
現在我們要做的就是,通過 clone 命令,將客戶端的文件夾與遠程 git 服務器建立映射。(當然,你也可以通過已有的網站目錄,用 git remote add 的命令與新的服務器建立映射關系。)
為了在與遠程服務器同步時不在輸入密碼,我們選用的是 ssh 的連接方式,但是在此之前,我們需要將自己客戶端上的 ssh 公鑰發給遠程服務器的 git 用戶,從此登陸 git 用戶就不用密碼了,更為方便的提交網站更改。
首先看一下自己的家目錄下有沒有 .ssh 文件夾,這個目錄處在 C:\Users\<你的用戶名>\.ssh 這里,如果有的話,跳轉下一步;沒有的話,請看如何生成一個 ssh 公鑰。
現在打開你的 windows 終端,或者是 cmd、powershell、git bash 之類的玩意,輸入如下命令:
ssh-keygen -t rsa
然后連按三個回車,ssh 密鑰對就生成好了。現在再進入家目錄下的 .ssh 文件夾,找到一個后綴名為 .pub 的文件,不要雙擊打開,右鍵打開方式,找一個記事本或是 vscode 等能打開文本文件的軟件打開這個文件,將里面的內容盡數復制出來。
然后我們來到遠程服務器,登錄到 git 用戶,建立 ssh 用戶驗證文件:
cd ~
mkdir .ssh
vim .ssh/authorized_keys
我們用 vim 打開了這個叫做 authorized_keys 的文件,然后把復制好的 ssh 公鑰粘貼進去,保存并退出。(各位應該知道 vim 怎么操作吧……)
現在你可以試驗一下,登錄到 git 用戶還需要密碼不。
ssh git@www.sxrhhh.top
如果直接進去了,說明 ssh 已經不需要密碼了,那么 git 的一切操作也可以不用密碼快速進行。
在客戶端下:
git clone git@www.sxrhhh.top:/home/git/repo/website.git
git clone git@www.sxrhhh.top:repo/website.git # 是的,冒號后面的路徑就是相對于 git 用戶家目錄的相對路徑
好了,如果你的電腦上出現了 website 文件夾并且里面還有 .git 隱藏文件,那么就成功了!
現在,你就可以將你的網站文件放進去,歡快地 mkdocs build, git add .,git commit, git push了。
注意事項:編寫 .gitignore文件
為了防止在寫網站時一些亂七八糟的更改影響 git 的跟蹤文件,我們要提前寫好一個 .gitignore 文件,阻止它們進入 git 的跟蹤。
.gitignore:
.vscode # 防止用 vscode 管理網站的時候工作區更改
*~ # 防止用vim編輯網站文件時留下一堆儲存文件
后面我們還會往里面加一點東西,這個請讀者留意一下。
建立 web 服務器
現在,我們已經搭建好了這一套管理系統的核心結構,那么最后一步,就是將上傳的網站文件夾發給 Apache 服務器,讓它幫忙共享這個文件夾。
我們知道,git 服務器上的文件是不能直接用的。我們還是需要用 clone 和 pull 的方法將文件提取出來。這一次我們操作的是 root 用戶,這在權限管理上是不可取的,但是在這次的方案中,我們搭建的是靜態網站,對 apache 用戶的寫入權限要求不高。另外,apache 是一個 "nologin" 的用戶,他不能使用諸如 git 之類的命令,局限性過大。為了更好管理 web 文件夾,我們采用 root 用戶登陸。當然,為了安全,你完全可以再創建一個名字類似于 www-data 的普通用戶來給 apache 用。
現在我們就開始新建文件夾吧!
將 web 服務器連接到 Git 服務器
首先,我們要讓 root 用戶被 git 用戶認證,原因和之前一樣。即使在同一臺機子上的 root 用戶,想要 ssh 連接另一個用戶照樣需要認證。
ssh-keygen -t rsa
cat ~/.ssh/id_rsa.pub >> /home/git/.ssh/authorized_keys # 將root用戶的ssh公鑰加入到git用戶的認證文件中。請確保在上一步中你已經創建了這個文件。
我們在根目錄下創建一個文件夾,用來存儲網站。當然你也可以在 /var/www/ 下面建立,主要是我這個文件夾算是比較特殊,拎出來單獨處理。
mkdir /www
cd /www
git clone git@localhost:repo/website.git # 哈哈,來自遠程的localhost。如果你不確定,你可以把localhost改成你服務器域名。
如果一切順利,你會有一個 /www/website 文件夾,在這個文件夾里面又有一個存放構建完畢的 site 文件夾。那么,/www/website/site 就是你的網站的文件系統路徑了。記住它!
創建 Apache 虛擬主機
如果你先前沒有見過網站,你完全可以通過修改 DocumentRoot 的參數來直接運行服務器。但是建立過網站的同學都知道,虛擬主機還是挺重要的。所用的方法我有另一篇博客寫過了,網上也有很多教程和官方文檔,這里長話短說。
這里以 CentOS 和 fedora 之類的使用 rpm 包管理器的系統為例,apache 的服務名字叫 httpd,配置文件在 /etc/httpd/ 下,其他系統,譬如 ubuntu 下的 apache 可能被稱作 apache2 ,目錄結構也不太一致。請各位同學自行查找相應配置方法,但是下面的配置文件內容不會有問題。(當然文件路徑你也要根據自己實際情況修改)
cd /etc/httpd/conf.d
vim vhost.conf # 建立了一個叫做vhost.conf的文件,如果你有其他相同作用的文件,請打開它。
vhost.conf:
<VirtualHost *:80>
# 如果這個是你第一個虛擬主機,那么它也會成為你apache的默認共享位置
ServerName www.sxrhhh.top # 請自行更改為你自己的域名
DocumentRoot "/www/website/site"
<Directory /www/website/site>
AllowOverride All
Require all granted
</Directory>
# 下面的是用來強制跳轉https用的,可以暫時不寫。
RewriteEngine on
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{SERVER_NAME}$1 [L,R]
</VirtualHost>
或者,我們去掉那些沒用的,可以直接復制下面的:
<VirtualHost *:80>
ServerName www.example.com
DocumentRoot "/www/website/site"
<Directory /www/website/site>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
保存并退出,重啟 Apache,看一下能否訪問到自己的網站。
apachectl restart
如果一切安好,你現在就可以看到瀏覽器能訪問到你自己的域名網站。
在此還是確認一下,在測試瀏覽器訪問的時候,請確保你的域名服務商解析了你的域名到遠程服務器上,或者你在本地客戶端更改了 hosts 文件。否則你不可能用你的域名訪問到服務器。
實時同步 web 網站目錄
我們在每一次用 git push 更新網站后還得要上 root 用戶去 git pull 一下才能完成更新部署,太麻煩了。這時候,我們就要請出 crontab 這個自動任務管理工具了。
首先我們要寫好一個更新腳本:
cd /www/website/
touch update update_log update_err
vim update # 這個就是更新腳本,坑爹的一個點就是文件名不能帶小數點,要不然crontab會出問題。
update:
#!/bin/bash
cd /www/website
/bin/git pull 1>>./update_log 2>>./update_err
# 上面那個 1>>./update_log 這一條是記錄git pull的日志,如果更新頻率夠快,它會很快占用比你的網站還大。所以當你的網站已穩定運行后,你可以將這一段改為 1>/dev/null
我們建立了兩個文件,叫 update_log 和 update_err 作為同步結果的日志收集。你現在可以直接運行來測試。
bash ./update
cat update_log
看一下 update_log 有沒有多出一條回顯信息。如果有,說明 pull 成功,已經完成了一次 Git 服務器到 web 服務器的同步。
現在我們要利用 crontab 實現實時同步。原理也很簡單,就是每分鐘運行一次 update 腳本。
crontab -e
在打開的頁面中,我們在最后加入這么一條:
* * * * * /bin/bash /www/website/update > /dev/null 2>&1
上面這一條可以讓我們每一分鐘都執行一次 update 腳本。>/dev/null 后面的內容是用來防止 crontab 發一些奇怪的郵件的。
完成之后,你就可以時不時地看一眼你的 update_log 文件,看一眼它有沒有每分鐘都更新一次。
最后,我們將這幾個文件加入到 .gitignore 文件里,確保它們只在本地運行。
.vscode
*~
./update*
驗收成果
現在,我們的兩個服務器和一個客戶端上應該搞的東西都已經完成了,可以開始驗收成果了!
首先,我們在客戶端上寫好網站內容,放置好博客文章,構建,發送!
mkdocs serve # 通過虛擬服務器實時檢驗網站更改
mkdocs build
git add .
git commit -m "website updated"
git push
如果一切順利,你會在1分鐘以內看到你的網站成功發生了改變。從此,你只要在 vscode 中操作好文章,vscode 就能做好從撰寫文章、yaml 編寫和網站上傳等多種工作,怎么樣,學會了嗎?
網站維護碎碎念
在最后,我還是多提醒一些事項,防止有人在這里學習第一次建站。
首先,完成工作后,你的域名一定要解析到你的服務器,否則你的域名就沒有用,而且 Apache 的虛擬主機策略也有可能讓你的網站無法使用。
然后,記得使用 SSL 技術,也就是將你的網站升級為 https ,一方面是安全,另一方面是瀏覽器的一些自動跳轉設置,尤其是以前用類似域名綁定過帶 https 的服務器,可能會讓你訪問自己網站困難,一直跳轉到帶 https 的同名網址。
最后就是,如果你想多一份保障,不想完全脫離 Github ,只是網站不想建在那個上面,你還可以在 Github 上建立一個倉庫,并且在 update 文件里面去 git push 它。相當于每分鐘將網站倉庫同步到 Github ,但是并不依賴于它,只是作為一個 Github 的備份策略。
作者:Sxrhhh
個人網站:https://www.sxrhhh.top
博客園:Sxrhhh - 博客園 (cnblogs.com)
轉載請注明出處.
在個人網站持續更新中……
總結
以上是生活随笔為你收集整理的独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案!的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 毕业论文的表的上标如何
- 下一篇: 苹果11的电池容量(苹果官网报价)