都說搭博客簡單，鬼知道后端程式員要經歷什么

作者：小傅哥
博客：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，也并不清楚都是什么，這會有什么問題嗎，短時間不會有，甚至還會做的很開心，但時間長了需要你承擔更大的職責了呢，又或者需要你自己出去干點啥了呢，怎么在冷啟動階段讓自己把這些事拿捏呢？千萬別把補充自己的知識當做卷的借口，否則坑的是自己！

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

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

1. 搭博客：https://mp.weixin.qq.com/s/ZoQ0xAphJQkP_pb8H08BMg
2. 搞論壇：phpwind、Discuz、wordpress(有博客和論壇等模板)
3. 弄網盤：https://mp.weixin.qq.com/s/gzUrFexHcyCrw7XZ_L7N7w
4. 聊天室：https://mp.weixin.qq.com/s/OmXCY4fTfDpkvjlg5ME0ZA
5. 其他的：練習下自己的專案、搞個集群、玩玩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的，也見過清北出國的，也有高考失利又不斷學習考證拿下研究生學位進入大廠管培職位的，但無一例外，這些人從不會給自己設限，甚至是非常自律，很難看到這樣的伙伴會去胡扯、瞎聊、當別人的分母，而是不斷的“折騰”，折騰學習、折騰感興趣的事情、折騰自己的愛好，而高薪職位也只不過是過路的風景，
• 趁著年輕：承遇朝霞、年少正恰，整裝戎馬、刻印風華！