二哥的小破站終於上線了,顏值賊高!

大家好,我是二哥呀!

2022 年 1 月 1 日,二哥的《Java 程序員進階之路》網站終於上線了!10 天過去了,網站在沒有 SEO 的加持下訪問量也突破了 1000 pu,算是一個小小的里程碑吧。


大家可以通過以下網站來體驗一下:

https://tobebetterjavaer.com

往下看,你不僅會直呼這個網站的顏值賊高,絲毫不輸 B 站上那些舞蹈區的小姐姐,hhh,另外你還會學到如何從0 到 1搭建一個個人的學習網站。

經常逛 GitHub 的小夥伴應該已經發現了,二哥的《Java 程序員進階之路》最近在持續霸榜,今天仍然在 GitHub 的周榜上。

這也是 2021-2022 年二哥收穫的最後一點點小驚喜了。

原來的《Java 程序員進階之路》網站是託管在碼雲 Pages 上的,而碼雲 Pages 沒辦法自定義域名,這樣就很不利於小夥伴們直接通過網址去訪問。

碼雲 Pages:https://itwanger.gitee.io/tobebetterjavaer

怎麼解決這個問題呢?

。。。。。。

讓我先來給大家鋪墊一下這個碼雲 Pages 是如何服務的,搞清楚了狀況後,我們就容易想到解決辦法。

首先,《Java 程序員進階之路》專欄的源頭是 GitHub 上的一個開源倉庫。

GitHub 地址:https://github.com/itwanger/toBeBetterJavaer

裏面除了 md 文檔和圖片之外,還有代碼示例,以及 docsify 的基礎環境文件。

  • index.html 入口文件
  • README.md 會做爲主頁內容渲染
  • .nojekyll 用於阻止 GitHub Pages 忽略掉下劃線開頭的文件
  • _sidebar.md 會做爲側邊欄內容渲染
  • _coverpage.md 會做爲封面圖渲染

docsify 是一個神奇的文檔網站生成器,不同於 GitBook、Hexo 的是,它不會生成靜態的 .html 文件,所有轉換工作都是在運行時發生的。只需要一個 index.html 文件以及一些基礎配置文件就可以開始編寫文檔,並直接託管在 GitHub Pages 上(省去了服務器的錢)。

不過,由於 GitHub 的網絡訪問原因,我就將 《Java 程序員進階之路》專欄同步到了碼雲,用碼雲 Pages 來替代 GitHub Pages,這樣的網絡訪問速度會快很多。

碼雲地址:https://gitee.com/itwanger/toBeBetterJavaer

同時,碼雲 Pages 也支持 Jekyll、Hugo、Hexo、docsify 等靜態網站的服務。當 GitHub 倉庫有更新後,直接在 GitHub Pages 上點一下刷新圖標就會立即完成網站服務的同步工作。

通過碼雲 Pages 提供的網址就可以訪問《Java 程序員進階之路》網址了。

但由於種種原因,碼雲 Pages 沒有提供自定義域名+ HTTPS 的服務,Pro 版支持,但也因爲業務調整,關閉了個人用戶的購買入口。

這就很扯了。

解決方案一

這是最容易想到的辦法,也是最笨的辦法:將本地倉庫上傳到雲服務器,通過 Nginx 部署靜態網站

在上傳服務器之前,讓我們先來確認一下本地的 docsify 目錄是否是完整的。因此我們需要在本地運行起來 docsify 服務。

進入本地《Java 程序員進階之路》的倉庫目錄,執行 docsify serve 啓動服務。

在瀏覽器地址欄訪問 http://localhost:3000

可以確認是沒有問題的。

然後將本地的文件上傳到雲服務器上,再通過 Nginx 部署靜態網站就 OK 了。

不過,這樣做會存在一個很嚴重的問題,就是雲服務器和本地、GitHub 倉庫之間沒辦法進行同步。

解決方案二

這是比較完善一點的解決方案:在服務器上搭建一個 Git 倉庫,從 GitHub 上拉取,再通過 Nginx 部署靜態網站

這樣就很容易解決掉倉庫之間不同步的問題,因爲 GitHub 倉庫提交的一定是正式版本,也是最新版本,從上面拉取是最方便和穩妥的。本地會做一些測試工作,比如說調整 docsify 的配置等等,不適合作爲雲服務器拉取的對象。

關於 Git 環境的搭建,我在《Java 程序員進階之路》專欄的「Git」篇裏已經詳細的講解了。

搭建過程我這裏簡單演示下。

第一步,安裝 Git

CentOS 上可以直接通過 yum install git 命令來安裝 Git 環境。

第二步,初始化 Git

執行 git init 初始化 Git 目錄。

第三步,克隆 GitHub 倉庫到雲服務器

爲了使 GitHub 相信所有的操作都是“你本人”操作的,所以在 clone 之前需要先配置 SSH 密鑰。具體的步驟可參考:崩潰!實習生把小組的代碼倉庫搞得一團糟。。。這篇中的「遠程倉庫」小節。

這裏就不再演示了。

在 GitHub 倉庫上點擊「Code」菜單,複製 SSH 地址。

然後執行 git clone 命令就可以從遠程倉庫上拉取到最新內容了。

第四步,通過 Nginx 部署靜態網站

Nginx 非常適合用來部署靜態網站,只需要將服務器的訪問目錄設定爲 index.html 文件就可以了。

OK,此時再訪問域名 https://tobebetterjavaer.com 就可以看到《Java 程序員進階之路》的內容了。

用這種方案的話,本地、GitHub、雲服務器之間的同步就完全打通了。

當 GitHub 上有更新的時候,再將內容拉取到雲服務器上。

舉例來說,我們在《Java 程序員進階之路》專欄的 GitHub 倉庫中修改 _sidebar.md 文件,追加一個感嘆號的標點符號。

有兩種辦法拉取。

第一種,先執行 git fetch,再執行 git merge

9909f82..7f4b815 master -> origin/master 就表示內容有變動。

第二種,直接執行 git pull 命令。

不過,這有一點不盡善盡美,每當 GitHub 上有更新的時候,還要手動在雲服務器上拉取更新,能不能做到自動化呢?

可以利用寶塔面板的計劃任務,添加一個 Shell 腳本。

腳本內容很簡單,就兩行內容:

# 切換到 git 目錄
cd /home/www/git/toBeBetterJavaer
# 執行git命令
git pull

保存後我們來測試下。

我們在《Java 程序員進階之路》專欄的 GitHub 倉庫中修改 _sidebar.md 文件,修改中文的感嘆號爲英文的感嘆號。

點擊計劃任務的「執行」按鈕。

查看雲服務器上的文件是否發生了變化。

到此爲止,我們就完成了《Java 程序員進階之路》網站從碼雲 Pages 到 VPS(Virtual private server,虛擬專用服務器)遷移的整個工作。

最後,再帶着大家使用不蒜子給網站加一個總訪問次數和總訪客數吧,看看一個月後《Java 程序員進階之路》的 PV 有多少。

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站總訪問量<span id="busuanzi_value_site_pv"></span></span>

兩行代碼,一行引入 JS 文件,一行展示數據。

刷新網頁,發現已經有了哈,我是第一個。

緊接着,可以把 GitHub/碼雲上的預覽鏈接從碼雲 Pages 修改爲 https://tobebetterjavaer.com 了。

簡單總結一波:爲了搭建這個網站,真的是能學到非常多的實戰知識,比如說:

  • HTTP 升級爲 HTTPS
  • Nginx 配置靜態資源
  • 域名解析
  • SSL 證書生成
  • Git 的基本使用
  • 寶塔面板的基本使用
  • Tabby 終端的基本使用
  • 域名備案
  • 等等等等

如果大家有時間的話,強烈建議大家動手去搭一個,尤其是之前白票過阿里雲服務器的小夥伴,動過手後你纔會真正地學到實戰經驗。

2022 年,二哥一定會繼續肝出更多優質的原創,豐富《Java 程序員進階之路》的內容,希望這個專欄日後成爲大家學習 Java 的第一選擇!


本篇已收錄至 GitHub 上星標 1.0k+ star 的開源專欄《Java 程序員進階之路》,該專欄風趣幽默、通俗易懂,對 Java 愛好者極度友好和舒適😄,內容包括但不限於 Java 基礎、Java 集合框架、Java IO、Java 併發編程、Java 虛擬機、Java 企業級開發(Git、SSM、Spring Boot)等核心知識點。

star 了這個倉庫就等於成爲了一名更優秀的 Java 程序員。可以點擊下面的鏈接跳轉過去 star 見證一下這個令人激動的時刻。

https://github.com/itwanger/toBeBetterJavaer

該專欄目前仍然排在 GitHub Trending 榜單(Java 類的周榜)上,這讓二哥終於體會到了霸榜的快樂!

請添加圖片描述
請添加圖片描述

沒有什麼使我停留——除了目的,縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣,我是不繫之舟

我們下期見~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章