都說搭博客簡單，鬼知道後端程序員要經歷什麼！

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

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

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

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

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

四、卷，咱搞起來！

1. 先neng個服務器

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

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

購買鏈接：//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 端口，否則是不能訪問到的，這個在服務器的安全組中開放即可。
這裡我們為了方便就直接開啟全部的了，如果你是實際使用，可不能這樣操作，否則很不安全！

登錄寶塔

地址：//39.96.73.xxx:8888/ – 換成你的地址
賬號：用戶名和密碼已經在控制台打印，你可以複製自己的，登錄寶塔後可以修改這個默認的密碼

5. 安裝阿帕奇和FTP

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

安裝 Apache

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

安裝 FTP

安裝 FTP 主要是為了通過本地可以把文件傳送到服務器上，比如你的一個靜態博客是 html，就可以通過 FTP 傳到服務器上。

6. 網站配置

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

創建站點

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

訪問站點

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

7. 網站內容

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

8. 域名配置

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

添加域名：這個裏面小傅哥配置的是已經申請好並備案了的域名，你配置成你的就可以。記得配置好域名後，需要在你的域名服務里，通過A記錄把服務器IP映射配置上去。
FTP 配置：為了更加方便的上傳你的文件，你可以把FTP打開，這樣就可以通過FTP傳輸配置了。
訪問地址：//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的，也見過清北出國的，也有高考失利又不斷學習考證拿下研究生學位進入大廠管培職位的。但無一例外，這些人從不會給自己設限，甚至是非常自律，很難看到這樣的夥伴會去胡扯、瞎聊、當別人的分母，而是不斷的「折騰」，折騰學習、折騰感興趣的事情、折騰自己的愛好，而高薪職位也只不過是過路的風景。
趁着年輕：承遇朝霞、年少正恰，整裝戎馬、刻印風華！

Tags: CodeGuide | 程序員編碼指南 JAVA vuepress

都說搭博客簡單，鬼知道後端程序員要經歷什麼！

一、我，多能折騰！