都說搭部落格簡單，鬼知道後端程式設計師要經歷什麼！

作者：小傅哥
部落格：https://bugstack.cn

沉澱、分享、成長，讓自己和他人都能有所收穫！?

一、我，多能折騰！

? 我跟你說，折騰蓄藍，還能賺錢！

2013年，畢業以學Java的身份進入傳統企業寫C#和PLC，每天5:30下班，總有夥伴找到我幫忙做個網站。PS：要用PHP寫，省伺服器費用！
2014年，租住門臉，下班回來順便，賣電話、記憶體卡、充電線、手機殼、充話費
2015年，搭建 itstack.org 域名部落格，編寫 Netty 5.0 案例，後因 org 域名不能備案，部落格也掛了
2016年，從傳統行業進入網際網路已經半年，開始瘋狂折騰 Java 以前不熟悉的技術
2017年，好奇所接觸的一切新鮮框架技術，羨慕技術大佬的能力，書童一樣學習高併發場景實現，這麼大的呼叫體量怎麼沒有掛
2018年，不只是看了，開始對原始碼動手，把 RPC 實現了一遍，做了一套監控系統，寫了一堆的中介軟體，申請了好幾個專利，差點被淘寶中介軟體團隊挖去。
2019年，從《用Java實現一個JVM》開始，撿回我的熱情，申請並備案域名、搭建 jekyll 部落格、開通公眾號，年底成為 CSDN 部落格專家並已積累公眾號粉絲1k
2020年，2月編寫第一個基於 Netty 實現的仿微信 IM，放到騰訊技術社群參賽，獲得第一名(運營小姐姐告訴我，她把仿微信IM推給了小馬哥，哈哈哈)。同年位元組碼程式設計、設計模式、面經手冊等PDF相繼出爐，火了 他們都問我是不是位元組的！
2021年，趕在圖書節，我的第一本技術書籍《重學Java設計模式》出版了，出書並不是終點，只是想走走沒走過的路、爬爬沒爬過的山，看看風雨過後的彩虹是否那麼絢爛。

結束了嗎？ 不，折騰依舊在！

2021年的1024，小傅哥一路趟坑，把300篇文章的bugstack蟲洞棧部落格從 jekyll 升級到 vuepress！

這些年的折騰在域名申請到備案、伺服器選擇到上線、PHP開發擴充套件功能，遷移相容部落格等，經驗和技能儲備都沒問題，也會點 html、css、js、jquery 做自定義的開發處理。但在面對沒接觸過的 vue 時，依舊有點不知道從哪下手，而為了vuepress部落格從能用到好用，一頓操作差點幹拉胯！

技術拓寬、實力增強、薪資拉昇，來吧，一起折騰！

二、坑，差點肝拉？

可能你沒自己搞過 vuepress 的部落格，你不知道。它這個官網說啥？說：像數 1, 2, 3 一樣容 tui！糟老頭子壞的很，沒有一點前端知識根本跑不起來，更別說是生產使用，只能算是玩具級別。當然，不要誤會，人家這個也是想著你有vue的知識背景的，不過我不是沒有嗎！ 為此在我折騰完把坑趟平以後，知道怎麼正確操作後，還專門錄了個搭建 vuepress 部落格教程的視訊，如下：

嘿，好嘛！有了這個案例後，我就一直在琢嘛，怎麼把我的部落格遷移過來呢，畢竟這套架構可以更好的承載我的文章，也能很大程度的提升閱讀體驗和對部落格的操作空間。

日日思念惦記呀，就跟你處物件一樣，朝為日，暮為月，卿為朝朝暮暮啊！咋整，辦它吧，想過會遇到坑，也提前鋪平墊穩了，但無奈還是會有很多因為沒折騰過，vue 知識儲備不足而遇到的問題。

1. 300篇文章遷移，連結問題

背景：舊版部落格到新版部落格的遷移，不只是想把介面結構更換了，還希望解決文章分類的問題，所以在有些文章會重新擺放它所屬的資料夾。
問題：那麼就會出現文章路徑與原來文章路徑不一致的問題。這其中還包括原有文章中用到的圖片路徑問題。
方案：分兩階段解決，如果目前把舊版文章全部下線會導致很大一部分老使用者，尤其是保留了舊版連結的使用者，在訪問文章時就會出現 404 找不到了文章了，體驗非常不好。所以這裡上新版部落格的同時也保留舊版部落格在同一個伺服器中，另外把伺服器的 404 配置頁面配置到 https://bugstack.cn 以免將來舊版連結幾乎已經沒有什麼流量刪除時，再次出現 404 所以為了安全起見先把 404 頁面配置成首頁，這樣也能滿足使用者找到現有的文章路徑。

2. 瀏覽器限制cookie，解鎖問題

背景：小傅哥的部落格有一個閱讀解鎖功能，這個解鎖是基於公眾號做的開發，瀏覽器生成通過友盟cookie獲取6位的唯一碼，當做使用者的個人ID，再通過這個ID到公眾號輸入後繫結到公眾號個人身份ID上，就解鎖了。
問題：但有些使用者限制了瀏覽器cookie，或者安裝了一些攔截廣告的外掛，那麼 cookie 就不能正確拿到了，一點閱讀全文這個解鎖碼就不唯一了，卡卡的閃。我頭都大了！
方案：咋辦，總不能告訴每個使用者，你把外掛給我刪了 cookie 給我開啟吧，那他們肯定覺得傅哥技術拉胯呀！後來我就想肯定會有一個技術手段能在瀏覽器計算出唯一ID，否則我不登入時候瀏覽器xxxx，怎麼就給我推薦了呢。經過搜尋還真有對應的東西，就是瀏覽器指紋，fingerprintjs 瀏覽器指紋庫，這個庫用於查詢瀏覽器屬性並從中計算雜湊的訪問者識別符號。與 cookie 和本地儲存不同，指紋在匿名/私有模式下保持不變，甚至在清除瀏覽器資料時也保持不變。妥，有了這個技術就妥嘞，在 cookie 限制的情況下，通過瀏覽器指紋獲取唯一ID擷取成文章解鎖碼。

3. 構建檔案雜湊命名，版本問題

背景：看到這的時候我人都傻了，vue 變異出來的檔案竟然 數字+雜湊值.js 想想也對，人家這樣可以更好的保證版本升級，不至於出現快取問題。
問題：有啥問題呢，你看左側本地和右側伺服器，發現沒。只要每次部署一個版本，伺服器端就多出一個新的js檔案，好傢伙這用不了多久，不把我這小伺服器幹滿了嗎！！！刪除？刪錯了呢，那多嚇人！
方案：其實有時候遇到這樣問題不知道咋查你懂吧，搜了半天不如問前端一下，原來這個是可以通過webpack把打包檔名稱處理的，也就是你可以讓每次的構建出來的 js、css、img 檔名，都是一個固定的名字。但還有點小問題，vue 裡是這麼搞，vuepress 怎麼搞呢，找了不少資料終於找到 chainWebpack 可以配置檔名 config.output.filename('assets/js/cg-[name].js?v=' + dateTime).end();

模組打包配置：

chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        const dateTime = new Date().getTime();
        
        // 清除js版本號
        config.output.filename('assets/js/cg-[name].js?v=' + dateTime).end();
        config.output.chunkFilename('assets/js/cg-[name].js?v=' + dateTime).end();
        
        // 清除css版本號
        config.plugin('mini-css-extract-plugin').use(require('mini-css-extract-plugin'), [{
            filename: 'assets/css/[name].css?v=' + dateTime,
            chunkFilename: 'assets/css/[name].css?v=' + dateTime
        }]).end();
    }
}

通過這樣配置後，再打包出來的檔案就都是 cg-名稱.js 的檔案了，每次 push 到我的站點伺服器是上就可以只有一份同名的 js 了，不至於把我伺服器搞爆。

4. Java VS PHP 公眾號開發，伺服器資源問題

流程圖

DDD + PHP = 爺青回

背景：因為要開發部落格到公眾號的引流，所以需要對公眾號做一些開發處理。
問題：最初我是使用 Java 語言寫了一版，但目前隨著使用者體量的上升，呼叫我這個跑著 Java 程式的小伺服器，已經有點小馬拉大車了。現象就是服務崩潰，需要重啟！！！
方案：咋辦，花錢升級伺服器？我有技術我花那錢，鬧呢？上PHP呀，這玩意多升伺服器資源，況且我在13年就折騰會了，把DDD思想給我架到PHP上，讓它爺青回！

三、那，還能幹啥？

你覺得視野範圍重要嗎，如果我不曾如此折騰，可能與我相遇的美好，也都將錯過！

哪怕是工作，我也不希望自己是一個工具人。趁年輕、趁著有資源、趁著有時間，多給自己補充一些未來的可能，你現在所學到的所有知識、所結交的所有人脈、所開拓的所有技能，都將會在未來使用上，這些一點一點的點，會聚合成一條條知識線，在撐起你整個人生的頁面。

尤其是現在在大廠，可能很多時候自己接觸的工作範圍是非常侷限的，只是知道自己把程式碼寫好了就可以了，關於它是怎麼跑起來的，部署到哪裡了，域名、VIP、Nginx、CDN、SSL，也並不清楚都是什麼。這會有什麼問題嗎，短時間不會有，甚至還會做的很開心，但時間長了需要你承擔更大的職責了呢，又或者需要你自己出去幹點啥了呢，怎麼在冷啟動階段讓自己把這些事拿捏呢？千萬別把補充自己的知識當做卷的藉口，否則坑的是自己！

其實有一臺伺服器可以做很多事情，這不像你自己開虛擬機器，一個模擬環境和真實環境，還是有很大區別的！

你可以用一臺伺服器部署你在工作中遇到的知識，也可以是自己想學習搭建的系統，就像小傅哥折騰的這些內容：

搭部落格：https://mp.weixin.qq.com/s/ZoQ0xAphJQkP_pb8H08BMg
搞論壇：phpwind、Discuz、wordpress(有部落格和論壇等模板)
弄網盤：https://mp.weixin.qq.com/s/gzUrFexHcyCrw7XZ_L7N7w
聊天室：https://mp.weixin.qq.com/s/OmXCY4fTfDpkvjlg5ME0ZA
其他的：練習下自己的專案、搞個叢集、玩玩ES、弄弄實戰、留著接私活給別人部署演示

而這些內容的練習，都能讓你把一整套從研發到運維的內容玩透，徹底的瞭解域名、備案、ssl、寶塔、Linux常用命令等等。

四、卷，我們搞起來！

1. 先neng個伺服器

首先，無論你是否有伺服器，你都可以跟小傅哥一起學習關於伺服器的使用，我們建了個群專門學習伺服器，新增我的微信：fustack，備註：伺服器學習加群。

如果你還是一個新使用者小白，那麼可以跟著我的流程一起來，先neng一個便宜的伺服器，學習使用即可。這裡小傅哥給新人弄了個活動，79元即可買一臺一年有效期的伺服器，還是比我以前買的便宜多了！

購買連結：https://www.aliyun.com/minisite/goods?taskPkg=1111ydsrwb&pkgSid=11388&recordId=1033318&userCode=is4kfbdt
優惠價格：~~¥1,234.20~~ ¥69
參與條件：¥79 僅適用於新註冊或註冊未購買的使用者，如果你是老使用者可以找下物件或媳婦的帳號註冊。

當你購買伺服器的時候會看到，地域、例項、作業系統等，地域北京、上海、杭州的網速比較好，張家口的便宜但是網速會比較慢。作業系統預設即可，停機後可以更換。

2. 伺服器介紹

在購買完伺服器後，等待雲平臺數分鐘初始化服務，完事就可以直接使用配置。如下：

重置密碼：點選你的例項，藍色的這個字母，進入後再右側有一個，重置例項密碼，操作。
遠端連結：點選遠端連結即可連結到你服務上，它是一個線上的操作。你可以通過本地的軟體 xshell 連結到服務上去。
更換系統：如果你對自己預設選擇的系統不是很滿意或者有其他需求，都可以點選停止系統，之後開始作業系統更換。

3. 系統更換成寶塔映象

對於伺服器系統來說你可以使用Linux命令安裝各項服務元件，例如k8s、docker、jdk、tomcat、mysql或者php需要的內容等，但對於實際使用的運維來說，我們更希望運維成本越低越好，所以這裡我們選擇了寶塔，這樣一個伺服器運維皮膚來管理我們的伺服器。

在各類的雲平臺上，包括：百度雲、華為雲、阿里雲、騰訊雲，都可以安裝寶塔的，有的雲平臺還會有自己的已經準備好的寶塔映象，這裡我們以阿里雲服務為例，把系統停機更好為寶塔。

停機

位置：點選雲服務的例項，就可以進入到這個頁面
操作：更換系統之前我們需要先進行停機操作，停機後就可以點選更換作業系統了

換系統

選映象

更換完系統進行確認訂單，接下來會跳轉到管理後臺，這時稍等會，伺服器會進行啟動。

4. 配置並登入寶塔

遠端登入

這一步我們直接在網頁上登入了，你也可以使用 xshell 登入公網IP

初始化寶塔

命令：[root@CodeGuide ~]# bt default

配置安全組

寶塔的訪問要配置 8888 埠，否則是不能訪問到的，這個在伺服器的安全組中開放即可。
這裡我們為了方便就直接開啟全部的了，如果你是實際使用，可不能這樣操作，否則很不安全！

登入寶塔

地址：http://39.96.73.xxx:8888/ - 換成你的地址
賬號：使用者名稱和密碼已經在控制檯列印，你可以複製自己的，登入寶塔後可以修改這個預設的密碼

5. 安裝阿帕奇和FTP

接下來我們在寶塔中安裝一個阿帕奇伺服器和FTP，這樣就可以部署和訪問我們的靜態部落格了，也就是一個html，如下:

安裝 Apache

安裝過程中會自動的執行一些命令，這個你不用管，只要默默看著就行了。

安裝 FTP

安裝 FTP 主要是為了通過本地可以把檔案傳送到伺服器上，比如你的一個靜態部落格是 html，就可以通過 FTP 傳到伺服器上。

6. 網站配置

安裝了阿帕奇和FTP我們就可以簡單的配置一個站點了，有了這個站點就可以訪問到我們自己的部落格！

建立站點

建立站點的適合如果你還沒有申請域名，或者域名還沒有備案呢，那麼就可以直接把公網IP填寫進來。

訪問站點

地址：http://39.96.73.167/　在訪問的時候，你換成自己的ＩＰ即可

7. 網站內容

在寶塔的檔案裡，你可以選擇第6步驟中新增的站點，在裡面找到你的檔案，做一些修改動作。這個時候在訪問網站，就會發現內容已經是你新的內容了。

8. 域名配置

如果你有域名並已經備案好了，那麼在建立站點的時候就可以直接把域名配置上，在訪問你的網站的時候就可以通過域名訪問了。

新增域名：這個裡面小傅哥配置的是已經申請好並備案了的域名，你配置成你的就可以。記得配置好域名後，需要在你的域名服務裡，通過A記錄把伺服器IP對映配置上去。
FTP 配置：為了更加方便的上傳你的檔案，你可以把FTP開啟，這樣就可以通過FTP傳輸配置了。
訪問地址：http://blog.itedus.cn - 由於域名不是在阿里雲，可能http會監測為未備案，拒絕訪問

9. SSL 配置

關於 SSL 的申請可以有很多免費網站提供，也可以在寶塔中申請，如果你是用阿里雲服務，可以免費申請20個 SSL 證照，另外如果你的域名和服務都是在阿里雲，那麼在申請 SSL 可以直接走 DNS 認證，否則你需要把 DNS 資訊手動配置到你自己的域名上去。放心這個在申請的時候都有提示，按照說明配置即可

下載證照

因為我們需要把 ssl 配置到寶塔上，所以這裡需要把 SSL 下載下來，選擇 Apache 格式下載。

配置證照

配置後點選儲存即可，另外需要強制開啟 HTTPS，否則你的網站訪問 http 也能繼續訪問，就沒有意義了。
現在你就可以通過 https，訪問自己的部落格或者網站了，是不看上去高大上了不少！

10. 其他說明

可能你還希望配置 jdk、tomcat，沒關係，在寶塔裡你都可以安裝，也可以安裝 mysql，有了這些入門的內容，剩下的就可以搜尋一些通用配置的內容，也可以在阿里雲中搜尋。

五、嗯，總結一下

講道理，我希望你遇到我，因為總有一些熱情於技術的男人，會帶著你搞點啥，搞著搞著你的薪資就上去了！
做技術號主的兩年多，我把自己定位成37開，70%開源貢獻社群，沉澱、分享，幫助有需要的技術同號。30%做付費內容用於支撐起可以繼續完成70%的事情！
我見過自己的粉絲夥伴應屆生拿到總包50的，也見過清北出國的，也有高考失利又不斷學習考證拿下研究生學位進入大廠管培職位的。但無一例外，這些人從不會給自己設限，甚至是非常自律，很難看到這樣的夥伴會去胡扯、瞎聊、當別人的分母，而是不斷的“折騰”，折騰學習、折騰感興趣的事情、折騰自己的愛好，而高薪職位也只不過是過路的風景。
趁著年輕：承遇朝霞、年少正恰，整裝戎馬、刻印風華！