VuePress 部落格搭建系列 33 篇正式完結!

冴羽發表於2022-03-30

前言

VuePress 部落格搭建系列是我寫的第 6 個系列文章,前 5 個系列分別是 JavaScript 深入系列JavaScript 專題系列underscore 系列ES6 系列TypeScript 系列

VuePress 部落格搭建系列共計 33 篇,講解使用 VuePress 搭建部落格,進行各種優化,為部落格增添各種功能,並部署到 GitHub、Gitee、個人伺服器平臺的全過程。

這個系列從 2021年12月13日開始釋出第一篇,到 2022 年 3 月 10 日釋出最後一篇,感謝各位朋友的收藏、點贊,鼓勵、指正。

順便宣傳一下該部落格的 GitHub 倉庫:https://github.com/mqyqingfeng/Blog,歡迎 star,鼓勵一下作者。

本篇聊一聊我為什麼會寫這個系列,以及寫作這個系列中的一些感悟。

起因

之所以會開始寫這個系列,也是無心插柳,我在翻譯完 TypeScript 官方手冊之後,突然想到做個站點,或許更方便大家閱讀,於是便做了這樣一個站點: TypeScript 中文文件

之所以選擇用 VuePress,並不是因為我擅長 Vue,恰恰我從來沒有用過 Vue,之所以用 VuePress,更多是因為 Vue 的受眾甚廣,使用 Vue 風格的文件大家會更有熟悉感。

在我準備搭建這個站點的時候,VuePress 2.x 還在 beta 中,VitePress 也有少量應用,考慮到我想快速搭建一個站點,由於 VitePress 不相容當前的 VuePress 生態,所以我就選擇了 VuePress,至於為什麼沒有選擇 beta 測試版,是因為很多生態中的主題和外掛還沒有升級,於是我就用了最為穩定的 VuePress 1.x,所以這個系列文章也是基於 VuePress 1.x 寫的,像個別函式名和使用方式,到了 VuePress 2.x 中就變了,如果是使用 VuePress 2.x 的同學請千萬注意。

剛開始我是使用 GitHub Pages 搭建的,因為 GitHub 的遮蔽原因,我又用 Gitee Pages 搭建了一份,後來一想,為啥不自己搞個域名和伺服器呢,於是我就自己買了域名和伺服器,最終做了這個站點。

邊做我邊寫文章分享,一開始預計寫 8 篇左右,結果寫起來一發不可收拾,各種要做的事情一研究,都可以單獨成文了,隨著站點的不斷優化,我也將自己的實現分享出來,最終如你所見,寫了 33 篇,其實縱觀每一篇都是一個非常小的知識點,但綜合起來,卻又橫跨了不少知識領域。

希望這個系列的讀者能有所收穫,不僅僅是搭建成功自己的站點,更是能在這個過程中對很多東西的原理有所理解,這樣再處理相似的問題時,才能舉一反三。

感慨

更新這個系列文章我最大的感受或許就是:這種文章真好寫……

像我往常寫的文章都是原理類的,寫一篇文章往往要通讀很多文章、書籍,然後再根據自己的思路寫出來,但這種實踐類的文章,記錄遇到的問題,寫下解決問題的方式即可,一天一篇簡直是太簡單了……

雖然我也希望寫的有點深度,像 VuePress 的原始碼、主題的原始碼、markdown-it 的原始碼,很多外掛的原始碼我都翻過並寫了解析,但由於我本身並不想在這方面花費太多時間,畢竟只是順手寫的文章,花大量時間研究透原理,正事卻沒幹,實在是撿了芝麻漏了西瓜,所以更多是大致的梳理,很多時候,問題解決了,哪怕解決的方式不優雅不完美也都算了,或許這跟很多做業務的同學很像,只求解決問題,但卻不花時間優化問題的解決方式。

由此我也依據自己的親身經歷,得出結論:那些日更作者,寫的文章一定不怎麼樣!

當然這句我也說了我自己,一個人沒有大量的輸入,就在瘋狂的輸出,寫出的文章要不然就是簡單,一天就可以學會解決的內容,要不然就是徹頭徹尾的水文。我希望我至少是屬於前者。

所以不要敬佩那些日更的作者,他們日更寫的章一定不怎麼樣,作者的水平在日更的過程中,只能保證下限,卻提高不了上限。

當然這樣說,並不是在說這個系列文章的品質不好,畢竟作者是我,只是很多細節上我個人感覺依然有優化和完善的空間,而且寫了 33 篇,我覺得這可能是業界關於 VuePress 部落格搭建最完善系統的教程了。

實際上,在我更新這個系列文章的過程中,有很多同學跟著系列教程建立了自己的站點,在我的群裡就有同學分享跟著我的文章《一篇教你部落格如何部署到自己的伺服器》 1 個小時就部署了 vuepress 部落格,但我自己一個人在做的時候,自己裝先花了一天,為了寫這篇文章,重置了伺服器,邊裝邊寫又花了一天。雖然不像一些作者十天半月打磨一篇文章,但也在力所能及的範圍內儘可能完善的寫文了。

全目錄

  1. 一篇帶你用 VuePress + GitHub Pages 搭建部落格
  2. 一篇教你程式碼同步 GitHub 和 Gitee
  3. 還不會用 GitHub Actions ?看看這篇
  4. Gitee 如何自動部署 Pages?還是用 GitHub Actions!
  5. 一份前端夠用的 Linux 命令
  6. 一份簡單夠用的 Nginx Location 配置講解
  7. 一篇教你部落格如何部署到自己的伺服器
  8. 一篇域名從購買到備案到解析的詳細教程
  9. VuePress 部落格優化之 last updated 最後更新時間如何設定
  10. VuePress 部落格優化之新增資料統計功能
  11. VuePress 部落格優化之開啟 HTTPS
  12. VuePress 部落格優化之開啟 Gzip 壓縮
  13. 從零實現一個 VuePress 外掛
  14. VuePress 部落格優化之擴充 Markdown 語法
  15. markdown-it 原理解析
  16. markdown-it 外掛如何寫(一)
  17. markdown-it 外掛如何寫(二)
  18. markdown-it 外掛如何寫(三)
  19. 有的時候我覺得我不會 Markdown
  20. VuePress 部落格優化之中文錨點跳轉問題
  21. 搭建 VuePress 部落格,你可能會用到的一些外掛
  22. VuePress 部落格如何開啟本地 HTTPS 訪問
  23. VuePress 部落格優化之相容 PWA
  24. VuePress 部落格優化之開啟 Algolia 全文搜尋
  25. VuePress 部落格優化之增加 Valine 評論功能
  26. VuePress 部落格優化之增加 Vssue 評論功能
  27. VuePress 部落格之 SEO 優化(一)sitemap 與搜尋引擎收錄
  28. VuePress 部落格之 SEO 優化(二)重定向
  29. VuePress 部落格之 SEO 優化(三)標題、連結優化
  30. VuePress 部落格之 SEO 優化(四) Open Graph protocol
  31. VuePress 部落格之 SEO 優化(五)新增 JSON-LD 資料
  32. VuePress 部落格之 SEO 優化(六)站長工具
  33. 搭建 VuePress 站點必做的 10 個優化

下期預告

原本預計更新完部落格搭建系列,將回歸到 TypeScript 系列的寫作中。

TypeScript 系列是一個由官方文件翻譯、重難點解析、實踐技巧與總結三個部分組成的系列文章,全系列預計 40 篇左右。目前已完成了官方文件 Handbooks 的翻譯,接下來就準備寫重難點解析部分。

但時值金三銀四,在我讀者群裡的同學也經常討論面試相關的內容,所以我想在三月的時候,專門整理面試相關的內容,寫一份前端面試手冊,幫助更多的同學。

但與講解單獨的前端面試題不同,我認為,對於面試,面試前的長時間準備,寫簡歷,找公司,找內推,面試技巧都很重要,而這些方面。很多人經驗太不足了,也沒有意識學習和優化,所以我想寫一份完整的從技術準備,到簡歷,到找公司,到面試技巧的系列文,講其中的道和法,而不是執著於器和具體的面試題目。

感謝大家的閱讀和支援,我是冴羽,下個系列再見啦![]~( ̄▽ ̄)~**

相關文章