整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
blog-engine-01-常見博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比[1]
blog-engine-02-通過博客引擎 jekyll 構建 github pages 博客實戰筆記[2]
blog-engine-02-博客引擎jekyll-jekyll 博客引擎介紹[3]
blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 環境安裝，官方文檔[4]
blog-engine-02-博客引擎jekyll-jekyll SEO[5]
blog-engine-04-博客引擎 hugo intro 入門介紹+安裝筆記[6]
blog-engine-05-博客引擎 Hexo 入門介紹+安裝筆記[7]
blog-engine-06-pelican 靜態網站生成 官方文檔[8]
blog-engine-06-pelican 靜態網站生成 windows 安裝實戰[9]
blog-engine-07-gatsby 建極速網站和應用程序 基于React的最佳框架，具備性能、可擴展性和安全性[10]
blog-engine-08-vuepress 以 Markdown 為中心的靜態網站生成器[11]
blog-engine-09-nuxt 構建快速、SEO友好和可擴展的Web應用程序變得輕松[12]
blog-engine-10-middleman 靜態站點生成器，利用了現代 Web 開發中的所有快捷方式和工具[13]
由于個人一直喜歡使用 markdown 來寫 個人博客[14]，最近就整理了一下有哪些博客引擎。
感興趣的小伙伴也可以選擇自己合適的。
Pelican[15] 是一個靜態網站生成器，用Python編寫，它允許您通過編寫Markdown、reStructuredText和HTML等格式的文本文件來創建網站。
使用Pelican，您可以創建網站而無需擔心數據庫或服務器端編程。Pelican生成可以通過任何網絡服務器或托管服務提供的靜態站點。
您可以使用Pelican執行以下功能：
?
使用您選擇的編輯器在Markdown或reStructuredText中編寫內容
?
簡單的命令行工具重新生成HTML、CSS和JS源內容
?
易于與版本控制系統和Web掛鉤進行接口
?
完全靜態的輸出可以簡單地托管在任何地方
Pelican的功能亮點包括：
?
時間排序的內容（例如，文章、博客文章）以及靜態頁面
?
與外部服務的集成
?
站點主題（使用Jinja2模板創建）
?
在多種語言中發布文章
?
生成Atom和RSS訂閱源
?
通過Pygments進行代碼語法高亮顯示
?
從WordPress、Dotclear或RSS訂閱源導入現有內容
?
由于內容緩存和選擇性輸出編寫，重建速度快
?
可通過豐富的插件生態系統進行擴展：Pelican插件
查看 Pelican 文檔[16] 以獲取更多信息。
“Pelican”是“calepin”的一個變位詞，法語中意為“筆記本”。
該存儲庫包含了用于Pelican的主題。請隨意克隆、添加您自己的主題，并提交拉取請求。這是由社區管理的！
您可以在 http://www.pelicanthemes.com 查看實時版本。
以下說明假定您已經閱讀了所有Pelican文檔，有一個工作站點，并且現在想要應用一個非默認主題。
首先，選擇一個位置來存放您的主題。對于這個示例，我們將使用目錄~/pelican-themes，但您的目錄可能不同。
在您的本地機器上將pelican-themes存儲庫克隆到該位置：
git clone --recursive https://github.com/getpelican/pelican-themes ~/pelican-themes現在您應該在 ~/pelican-themes/ 下存儲您的 pelican-themes 存儲庫。
要使用其中一個主題，請編輯您的Pelican設置文件以包含以下行：
THEME="/home/user/pelican-themes/theme-name"所以，例如，要使用mnmlist主題，您將編輯您的設置文件以包含：
THEME="/home/user/pelican-themes/mnmlist"保存對設置文件的更改，然后使用您已經設置的 pelican-quickstart Makefile 重新生成您的站點：
make html也可以通過-pelican命令的 -t ~/pelican-themes/theme-name 參數直接指定主題。
如果您想要編輯您的主題，請確保您所做的任何編輯都是針對存儲在~/pelican-themes/theme-name中的副本進行的。
對于存儲在站點輸出目錄中的文件所做的任何更改都將在下次生成站點時被刪除。
重要提示：我們正在將插件從這個單一的存儲庫遷移到它們自己的獨立存儲庫，這些存儲庫位于新的Pelican插件組織下，這是一個供插件作者與Pelican維護者和社區其他成員更廣泛合作的地方。我們的意圖是讓所有新組織下的插件都采用新的“命名空間插件”格式，這意味著這些插件可以輕松地通過Pip安裝，并且Pelican 4.5+可以立即識別它們——而不必顯式啟用它們。
這個過渡過程需要一些時間，因此我們感謝您在此期間的耐心等待。如果您想幫助加速這個過渡，以下內容將非常有幫助：
?如果您在這里找到一個尚未遷移到新組織的插件，請在這個存儲庫下創建一個新的問題，并說明您想要幫助遷移的插件，之后Pelican維護者將指導您完成此過程。?如果您來到這里提交一個拉取請求以添加您的插件，請考慮將您的插件移動到Pelican插件組織下。要開始，請在這個存儲庫下創建一個新的問題，提供您插件的詳細信息，之后Pelican維護者將指導您完成此過程。?無論您是創建新插件還是遷移現有插件，請使用提供的Cookiecutter模板生成符合社區約定的腳手架命名空間插件。查看Simple Footnotes存儲庫，以查看一個已遷移插件的示例。
以下其余信息與傳統插件相關，但不適用于Pelican插件組織中的新命名空間插件。
安裝和使用這些插件的最簡單方法是克隆這個存儲庫：
git clone --recursive https://github.com/getpelican/pelican-plugins并在您的設置文件中激活您想要的插件：
PLUGIN_PATHS=['path/to/pelican-plugins']
PLUGINS=['assets', 'sitemap', 'gravatar']PLUGIN_PATHS可以是相對于您的設置文件的路徑，也可以是絕對路徑。
或者，如果插件位于可導入的路徑中，您可以省略PLUGIN_PATHS并列出它們：
PLUGINS=['assets', 'sitemap', 'gravatar']或者您可以直接導入插件并給出：
import my_plugin
PLUGINS=[my_plugin, 'assets']遷移狀態：
(blank)：本地托管插件仍在等待遷移工作。
??：已棄用。可以安全地從此存儲庫中刪除。
?：由外部維護的插件，不需要從單一存儲庫顯式遷移。遷移工作需要在原始所有者的存儲庫中進行。
??：存儲庫已遷移到Pelican插件組織。
插件 | 狀態 | 描述 |
Ace Editor | ? | 將默認的替換為在pelicanconf.py上配置的Ace代碼編輯器。 |
Always modified | 將創建日期元數據復制到修改日期，以便在“最新更新”索引中輕松查找。 | |
AsciiDoc reader | 使用AsciiDoc編寫您的帖子。 | |
Asset management | ? | 使用Webassets模塊管理資產，如CSS和JS文件。 |
Author images | 添加對作者圖片和頭像的支持。 | |
Auto Pages | 為生成的作者、分類和標簽頁面生成自定義內容（例如作者傳記）。 | |
Backref Translate | ? | 為每篇文章/頁面（作為翻譯的一部分）添加一個新屬性（is_translation_of），指向原始文章/頁面。 |
Better code samples | ? | 使用div > .hilitewrapper > .codehilitetable類屬性包裝表格塊，允許滾動代碼塊。 |
Better code line numbers | 允許帶有行號的代碼塊換行。 | |
Better figures/samples | 為內容中的任何標簽添加style="width: ???px; height: auto;"屬性。 | |
Better tables | 刪除reST生成的HTML表中的多余屬性和元素。 | |
bootstrap-rst | 提供大多數（盡管不是全部）Bootstrap的rst指令。 | |
bootstrapify | ? | 自動將bootstrap的默認類添加到您的內容中。 |
Category meta | 從該類別目錄中的索引文件讀取每個類別的元數據。 | |
Category Order | ? | 按照該類別（或標簽）中的文章數量對類別（或標簽）進行排序。 |
CJK auto spacing | ? | 在中文/日文/韓文字符和英文單詞之間插入空格。 |
Clean summary | 清除摘要中多余的圖像。 | |
Code include | 在reStructuredText中包含Pygments突出顯示的代碼。 | |
Collate content | 將內容的類別作為列表通過collations屬性提供給模板。 | |
Creole reader | 使用wikicreole語法編寫您的帖子。 | |
CSS HTML JS Minify | 在站點生成后，對所有CSS、HTML和JavaScript文件進行最小化。 | |
CTags generator | 生成一個“tags”文件，按照“content/”目錄中的CTags，以提供對支持它的代碼編輯器的自動完成。 | |
Custom article URLs | 支持為不同的類別定義不同的默認URL。 | |
Dateish | 將任意元數據字段視為datetime對象。 | |
Dead Links | ? | 管理失效的鏈接（網站不可用，錯誤如403、404）。 |
Disqus static comments | 向所有文章添加disqus_comments屬性。評論在生成時使用disqus API獲取。 | |
Encrypt content | ? | 為頁面和文章設置密碼保護。 |
Events | 將事件開始、持續時間和位置信息添加到帖子元數據中，以生成iCalendar文件。 | |
Extract table of content | 從文章內容中提取目錄（ToC）。 | |
Feed summary | ?? | 允許將文章摘要用于ATOM和RSS訂閱源，而不是整篇文章。 |
Figure References | ? | 提供一個系統來編號和引用圖像。 |
Filetime from Git | 使用Git提交確定頁面日期。 | |
Filetime from Hg | 使用Mercurial提交確定頁面日期。 | |
Footer Insert | 在每篇文章的末尾添加標準化的頁腳（例如作者信息）。 | |
GA Page View | ? | 在個別文章和頁面上顯示Google Analytics頁面視圖。 |
Gallery | 允許一篇文章包含一個相冊。 | |
Gist directive | 此插件添加了一個gist reStructuredText指令。 | |
GitHub wiki | 將平面的github wiki轉換為結構化的只讀wiki，放在您的站點上。 | |
GitHub activity | 在模板方面，您只需迭代github_activity變量。 | |
Global license | 允許您定義一個LICENSE設置，并將該許可變量的內容添加到文章的上下文中。 | |
Glossary | 添加包含從文章和頁面中的定義列表中提取的定義的變量。此變量對所有頁面模板可見。 | |
Goodreads activity | 列出您的Goodreads書架上的書籍。 | |
GooglePlus comments | 向Pelican添加GooglePlus評論。 | |
Gravatar | ? | 此插件的功能已由更新的Avatar插件取代。 |
Gzip cache | 啟用某些網絡服務器（例如Nginx）使用gzip壓縮文件的靜態緩存，以防止在HTTP調用期間服務器對文件進行壓縮。 | |
Headerid | 此插件為每個標題添加一個錨點，以便您可以在reStructuredText文章中進行深度鏈接。 | |
HTML entities | 允許您在RST文檔中內聯輸入HTML實體，如?、<、?。 | |
HTML tags for rST | 允許您在reST文檔中使用HTML標簽。 | |
I18N Sub-sites | 通過為默認站點創建國際化子站點來擴展翻 |
[1] blog-engine-01-常見博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比: https://houbb.github.io/2016/04/13/blog-engine-01-overview
[2] blog-engine-02-通過博客引擎 jekyll 構建 github pages 博客實戰筆記: https://houbb.github.io/2016/04/13/blog-engine-02-jekyll-01-install
[3] blog-engine-02-博客引擎jekyll-jekyll 博客引擎介紹: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-02-intro
[4] blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 環境安裝，官方文檔: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-03-install-on-windows-doc
[5] blog-engine-02-博客引擎jekyll-jekyll SEO: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-04-seo
[6] blog-engine-04-博客引擎 hugo intro 入門介紹+安裝筆記: https://houbb.github.io/2016/04/13/blog-engine-04-hugo-intro
[7] blog-engine-05-博客引擎 Hexo 入門介紹+安裝筆記: https://houbb.github.io/2017/03/29/blog-engine-05-hexo
[8] blog-engine-06-pelican 靜態網站生成 官方文檔: https://houbb.github.io/2016/04/13/blog-engine-06-pelican-01-intro
[9] blog-engine-06-pelican 靜態網站生成 windows 安裝實戰: https://houbb.github.io/2016/04/13/blog-engine-06-pelican-02-quick-start
[10] blog-engine-07-gatsby 建極速網站和應用程序 基于React的最佳框架，具備性能、可擴展性和安全性: https://houbb.github.io/2016/04/13/blog-engine-07-gatsby-01-intro
[11] blog-engine-08-vuepress 以 Markdown 為中心的靜態網站生成器: https://houbb.github.io/2016/04/13/blog-engine-08-vuepress-01-intro
[12] blog-engine-09-nuxt 構建快速、SEO友好和可擴展的Web應用程序變得輕松: https://houbb.github.io/2016/04/13/blog-engine-09-nuxt-01-intro
[13] blog-engine-10-middleman 靜態站點生成器，利用了現代 Web 開發中的所有快捷方式和工具: https://houbb.github.io/2016/04/13/blog-engine-10-middleman-01-intro
[14] 個人博客: https://houbb.github.io/
[15] Pelican: https://github.com/getpelican/pelican
[16] Pelican 文檔: https://docs.getpelican.com/en/latest/
2021 年元旦 Vite 發布 2.0 Beta 版就一直在關注 Vite 的動態，借著春節放假有時間，而且 Vue 3.0 和 Vite 2.0 都才大版本更新上線不久，預感后面會火，先開荒嘗試一波，也當給以后工作上的業務先提前踩踩坑，對博客做了第三次重構，這一次把客戶端和服務端都重新寫了，由 PHP 的 LNMP 全家桶全部換成了前端側的技術棧。
在經歷了春節假期每天大概花 2 ~ 3 小時的投入，終于如期上線，第一個版本是發布于 2 月 14 日情人節 ，算是給自己的情人節禮物，當時是先部署在我閑置的香港服務器做了一波測試服調試，期間做了一些體驗上的優化，然后 2 月 18 日 在休假的最后一天，部署到我正式服務器上了。
而且特別巧的是，這一天也是 Vite 2.0 正式版發布的日子：Vite 2.0 發布了 - 尤雨溪[1]，同一天上線，就感覺特別美好，值得紀念。
LightHouse 的打分
本次重構后，從開發到部署更新的運作流程圖如下，日常只需要維護 GitHub 倉庫的代碼，其他的都是自動化完成。
博客運作流程
這次重構，并非是因為放假有空就找點事情做，而是帶著幾個目的來的：
更多的更多，盡在未來，這肯定不是最后的一個版本，還有非常大的優化空間。
其實去年就有想法要對博客做一波改版，但有幾個原因導致一拖再拖，一個是因為業務比較忙（這個沒辦法，工作為重），一個是懶（主要是懶得去思考怎么設計，當然期間有在考慮一些不同的落地方案），還有一個主要的原因是當時 Vue 3.0 剛發布，我當時主要的精力放在踩坑體驗 3.0，那段時間，大部分的時間和精力都放在撰寫 Vue3.0 學習教程與實戰案例[9] 上面去了，休息時間有限，能夠閑下來的時間也只有下班回來和周末，除掉一些自己的事情外，留下來搗鼓新東西的時間并不算很多，只能先押后了。
相比 2018 年那次改版，當時只是單純想重新弄一個干凈的博客寫東西，這一次的目標是比較明確了，就是從基于 PHP 的 WordPress，用前端的技術棧全部重構一遍，做一個純前端的博客出來，當然還要保留 SEO ，就要求還要上 SSR（Server Side Render） 或者 SSG（Server Side Generation） 。
由于開工前已經是 2021 年了，因為有前面幾個月玩 Vue 3.0 的基礎打底，非常想用 3.0 來重構博客，加上元旦期間 Vite 2.0 Beta 版剛好發布（就很突然），注意力完全放在了 Vue3 和 Vite2 上面，非常想跑一下兩者結合有多爽。
由于重構的最終目標還是要保持網站的 SEO 能力，所以肯定不能使用默認的 SPA 應用模式，要走服務端渲染，所以技術棧方面只需要考慮兩條線：
雖然在此之前考慮過幾個方案，最開始是優先考慮做 SSR ，考慮過 Nuxt[10] 、Vapper[11] 等一些比較流行的開箱即用的 SSR 框架，但這些框架目前都還在弄 Vue 2.0，甚至部分框架看起來有點 “棄坑” 的趨勢（背靠字節大廠的 Vapper 居然一年多沒更新了 emm…… ）。
加上搞 SSR 的話，服務器成本比較高，我的低配 ECS 可能 Hold 不住，好好玩一玩的話還要投點錢，想了想先算了，那么退而求次就是上 SSG 。
玩轉 SSG 也是有考慮過一些開箱即用的 SSG 框架，比如用的人最多的 Hexo[12]，但我本身一直對 Hexo 不太感興趣，而且似乎滿大街隨便找一個獨立博客都是基于 Hexo 的，模板也千篇一律，缺乏個人特色。
好友小毅 @chawyehsu[13] 安利的 Saber[14]，跑了個 demo 玩了一下，覺得真的蠻不錯的，原本打算就直接用 Saber 的，不過目前 Saber 還是以 Vue 2.0 為主（聽說下個版本會支持 3.0 ，不過也不知道什么時候會發布），由于內心實在是非常想用 Vue3 ，所以這個方案最終作為備選。
好吧，對 3.0 的執念，還讓我想起兩個 Vue 官方的作品：VuePress[15]和它的弟弟 VitePress[16]，他們的新版本都是基于 Vue 3.0，而且已經可以用了，但一直以來我覺得它們都更適合用來寫項目文檔……
期間，Vite 官網在 2.0 Beta 版發布后，也新增了一 Part Server-Side Rendering | Vite[17] 指導如何實現 Vite SSR，我覺得可行。
加上有兩個開源項目讓我非常感興趣，一個是 vite-ssr[18]，一個是 vite-ssg[19]，我也分別對他們跑了 demo ，很給力，So，最后決定基于這兩個開源項目之一，選擇自己搭腳手架……
最終用到的核心技術是：
Vite 2.0 —— 超快的構建工具
Vue 3.0 —— 更強大更靈活的 Vue
SSG —— 服務端渲染方案，利于 SEO 進行內容收錄
PWA —— 構建離線應用
當然還要考慮的事情很多，每個環節還要用到不同的技術棧，具體我在下面逐個環節說明。
下面來說說決定重構之后，整個思考的過程順序，以及對每一個技術模塊的技術棧選型原因分析吧，希望對有計劃重構項目的朋友帶來一些幫助。
其實 Vue-CLI[20] 對 Vue 3.0 的支持已經非常好了，我的 Vue 3.0 教程[21] 也是基于 Vue-CLI 寫的。
之所以選擇 Vite，一方面是它的構建速度真的比 Webpack[22] 要快好多，另一方面是，自從 Vue 3.0 推出以來， Vue 官方團隊就一直在投入精力優化和宣傳 Vite，盡管 1.0 版本的功能和生態不如人意，但超快的構建速度已經體現了出來。
加上在我準備動手重構的時候官方剛好發布了 2.0 大更新，對比了 1.0 簡直是質的飛躍，讓我非常感興趣，而且按照目前官方團隊的態度，我覺得后面 Vite 會逐步代替 Vue-CLI ，提前了解，提前踩坑，對以后的工作也有幫助。
而且在生態方面，Vite 2.0 的各種支持都算很完善了，不得不說整個春節期間，Vue 團隊的人都在忙著給 Vite 2.0 干活，我在春節提的 Issue，基本上 2 ~ 3 小時就能給我回應，解決問題速度非常快（大過年的耶！），重構過程感覺自己擁有一個強大的技術支持團隊一樣!
開荒雖然辛苦，但也有另一番樂趣！
這是在選擇合適的構建工具之后，應該考慮的第二件事。
個人博客之前一直選擇用 WordPress ，一方面除了有 LNMP[23] 一鍵部署等快速搭建方案，和各種各樣的模板之外，主要也是歸功于 WP 對 SEO 的支持也是非常好，我這個博客的日常訪問都是來自于搜索引擎。
單純選擇用 Vue 3.0 重新開發 SPA 應用肯定會丟失 SEO，所以才有了前面的 技術棧的選擇[24]，本次是通過 SSG 方案來落地服務端渲染。
在開始動手之前，還要對網站架構做一波規劃，盲目動手只能給自己挖坑，自己的博客雖然說內容不多，但也有一些東西要考慮：
當然其他的如移動端適配啥的也要看情況顧及，之前博客還有一個小程序版本，不過因為沒人看（害，真的整整一年過去了，完全沒人看小程序版本…），所以小程序的依賴保留沒有在這次的重構兼容考慮范圍里，重構完畢后我就直接把原來的服務停了，回頭有空了再重新寫一版接口給小程序用。
基于 Vue 3.0 的項目，主要的模板肯定還是 Vue 文件，站點的主要結構、頁面的布局、美化等等都是基于 .vue 文件，只需要按照原來的習慣，路由頁面放在你的 src/views 文件夾下，組件模板放置于 src/components 下，就可以自動生成路由訪問。
同時也加入了 .md 文件的支持，用于書寫 Markdown 格式的內容，日常記錄博客會更方便，并且像 VuePress 那樣，同時支持在 Markdown 里嵌套 Vue，讓博客的定制更加靈活。
整個項目的路由頁面、組件結構，跟你平時開發 Vue 項目是完全一樣的，無縫切換。
src
├─components
│ ├─Footer.vue
│ └─Header.vue
└─views
│ ├─[page].vue
├─article
│ └─rewrite-in-vite.md
│ ├─about.md
└─index.vue
在這里推薦幾個非常方便的 Vite 插件：
vite-plugin-pages[25] ：能夠自動讀取指定目錄下的 Vue / Md 文件生成 Vue 路由，只需要管理好 views 文件夾的層級關系，無需再單獨維護路由配置
vite-plugin-md[26] ：一個能讓 Markdown 文件像 Vue 組件一樣導入使用的插件，它也基于 markdown-it，支持進行一系列 md 生態擴展
vite-plugin-components[27]：可以像 VuePress 一樣，無需 import，會自動根據組件的標簽名去 components 目錄下尋找組件
基本上你只需要按照開發 Vue 項目的習慣去開發就可以了，如果有一些思路被卡住不知道怎么下手，可以參考我倉庫源碼。
有設計稿的時候我更喜歡借助 CSS 預處理器（目前常用 Stylus[28]），借助他們的變量 、 嵌套書寫，以及 Mixin 、 Extend 等功能，避免寫原生 CSS 帶來的煩惱。
沒有設計稿的時候，會用上 Ant Design[29] 等 UI 框架來幫我減少頁面設計上的一些時間浪費，但這些框架通常更適合用在 B 端產品。
去年底在知乎刷到過一篇 如何評價 CSS 框架 TailwindCSS？[30] ，了解到一款全新的 CSS 框架 Tailwind CSS，乍一看很像是在開歷史的倒車，回歸原子類 className ，評價也是褒貶不一，自己光看文檔的時候也是想著這啥玩意…
但是考慮到如果真的是開倒車，憑什么可以拿到 3 萬的 Star，抱著試一下的心態在這次重構里面引入嘗試，確實真香！
目前感受到的好處就是：
延續 CSS 的屬性命名，你需要什么屬性自己放，也就是自己必須有一定的 CSS 基礎，特別是在多端適配方面，不用擔心框架用久了自己不會寫 CSS 的問題
比如，你要實現一個容器內完全居中，手寫 CSS 是：
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
}
用 Tailwind CSS 的寫法是：
<div class="flex justify-center items-center w-40 h-40"></div>
寫法跟你在 VSCode 里自動補全代碼時，敲入的命令非常接近，不像傳統的 UI 框架一樣，你寫個標簽就自動生成按鈕，都不知道它是怎么寫出來的（這也是我比較少想用 UI 框架的原因，我怕久了自己都不會寫了），實際上，使用 Tailwind 之后，你還是在自己寫 CSS， 只不過更方便了！
支持 CSS tree-shaking ，構建后的文件非常迷你
傳統的 Atom CSS ，引入了就得整包引入，而 Tailwind 可以借助 PostCSS ，可以在最終項目構建的時候，抽離出我們用到的樣式，用不到的會被直接扔掉。
我自己體驗了一下，核心樣式文件在配置 Purge 之前構建出來大概有 6M 多，Purge 之后只有 24K ！
可以組合使用，類似于 CSS 預處理器的 Extend
比如，我要寫一個通用的圖片樣式，讓圖片具備自適配不變型的效果，我只需要借助 @apply 像這樣子：
.img {
@apply w-full h-full object-cover;
}
編譯出來就是我想要的效果：
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
支持目前主流的暗黑模式，通過 dark:xxxxx 的前綴就可以輕松定制兩款皮膚
點一下切換皮膚：
用了 Tailwind 之后，你幾乎可以不用寫 Sass / Stylus 了，那么問題來了：如何彌補 CSS 預處理器提供的一些功能？
借助 PostCSS Language[31] 和 CSS Variable[32]，可以輕松的書寫像 CSS 預處理一樣的嵌套和變量。
a {
color: var(--fg-deeper);
text-decoration: none;
&:hover {
border-bottom: 1px solid var(--fg-light);
}
}
獨立的文件使用 .postcss 或者 .pcss 作為文件后綴，在 Vue 組件里則使用 <style lang="postcss"></style> 來指定 PostCSS Language 。
當然，說的再多也不如親手寫一寫，我之前在知乎也是看了好久始終不能決定用不用，之前趕業務也沒時間，這一次也終于動手體驗了一把，后悔，特別后悔，后悔怎么沒有早點用！！！
雖然前面的 服務端渲染[33] 幫我們解決了空 HTML 文檔的問題，但要更好的進行 SEO 優化，還需要落實到具體的頁面上去。
比如頁面的 title 、 description 、 keyword 等等，這里我是用到了以下兩個工具來幫我實現每個頁面的 TKD 定制。
gray-matter[34]：支持對 .md 文件的 TKD 優化，你可以在 Markdown 文件的最前面加入這樣的代碼，即可實現對頁面展示對應的 TKD 信息。
---
title: 這是頁面的標題
desc: 這是頁面的描述
keywords: 關鍵詞1,關鍵詞2,關鍵詞3
---
下面是要書寫的 Markdown 內容…
@vueuse/head[35]：可以讓你在 .vue 文件里實現優化，在 Vue 組件里的 script 部分，寫入以下的代碼，就可以實現 TKD 信息的配置。
import { useHead } from '@vueuse/head'
useHead({
meta: [
{
name: 'title',
content: '這是頁面的標題'
},
{
name: 'description',
content: '這是頁面的描述'
},
{
name: 'keywords',
content: '關鍵詞1,關鍵詞2,關鍵詞3'
}
]
})
你還可以擴展更多的信息上去，具體都在各自對應的 Github 倉庫的 README 里有詳細的說明。
當然，SEO 優化遠遠不止這一點，包括 robots 、 鏈接語義化 、減少死鏈 、 舊地址重定向等等，后面也會有說明。
靜態資源指 js 、 css 、 img 這些資源，放自己服務器也不是不好，我之前就是放自己服務器上，沒有去改，雖然 WordPress 雖然有配置 CDN 的插件，但是 CDN 平臺諸如七牛、又拍云，免費額度只針對 http , 都是需要付費才可以使用 https，總的來說還是要多出一筆錢來處理這塊服務，反正自己的博客訪問量不大，而且技術博客很少多媒體資源，日常使用的帶寬消耗很少，我三年前在阿里云充的 50 塊錢，三年過去了到現在還有 45.91 …
不過這次改版就不一樣了，后續我可能還會開辟一些圖片模塊，加上改版后是把項目托管到了 Github ，先天優勢存在，那么就要多考慮一下利用 Github 提供的免費服務了！
開發過 NPM 包的同學，或者日常使用 NPM 插件比較細心的同學，應該能夠發現發布在 NPM 上的包都自動部署到了 CDN 平臺，諸如 jsdelivr 、 unpkg 、cdnjs 等等，那么 Github 和這些 CDN 能關聯嗎？在此之前其實我也沒去關注能不能，但這一次我查了一下，確實可以，而且其中對國內訪問速度最友好的 jsdelivr ，支持度最高！超棒的！
關于 jsdelivr 的速度可以參考：國內有哪些靠譜的 Javascript 庫 CDN 可用？[36]，也可以測試下我的博客，我自己對測試結果還是挺滿意的。
測試我自己網站的速度
所以最后我是把所有靜態資源都指向了 jsdelivr CDN ，它無需你自己再做任何部署工作，只需要把代碼文件更新到你的 GitHub 倉庫里，就會自動同步到 jsdelivr 。
訪問格式為在 jsdelivr CDN 官網[37] 有案例說明，更多用法可以查看官網的文檔 Features - jsdelivr[38]，為了避免項目源碼過大，你可以像我一樣單獨創建一個類似 assets-storage[39] 這樣的倉庫用來存儲這些靜態資源，在倉庫的 README 也有簡單介紹下如何引用 CDN 地址和清除 CDN 緩存。
回到項目里，只需要在 vite.config.ts[40] 里修改 base 的路徑即可。
export default defineConfig({
base: isDev
? '/'
: 'https://cdn.jsdelivr.net/gh/chengpeiquan/chengpeiquan.com@gh-pages/'
})
詳細可以看官網的文檔 Configuring Vite | Vite[41]。
當然這種方式如果你用平時的命令行或者老烏龜界面工具來提交文件，始終還是比較麻煩，這里推薦一個現成的圖床工具 PicGo[42] ，支持多個平臺的 CDN 服務，其中就有 Github 。
PicGo 圖床界面
你可以在 Github 倉庫上的 Releases[43] 下載最新的客戶端版本，只是使用的話，可以單獨下載對應系統的安裝文件，不需要克隆整個倉庫下來自己構建。
本次的資源導出主要是指原來的那些圖片，前面有提到，我之前沒有啟動 CDN 服務，所以圖片資源都還在自己的服務器上。
WordPress 的上傳資源都存放在 /wp-content/uploads/ 目錄下，阿里云非常方便的就是，你可以連 SFTP 上去把這些文件直接拖下來就可以了。
重新傳到 Github 上又非常簡單，克隆你的倉庫下來后，放到指定的文件夾里，重新提交就可以了。
等未來某一次你不想繼續用 Github 托管了，只需要把倉庫拉下來，所有文件又都在了，都是非常方便和靈活。
這一部分主要針對原來的文章，雖然我之前的 WordPress 就開啟了 Markdown 編輯器支持，但如 SEO 優化[44] 里提到的，缺少很多 TKD 信息配置，而且里面的圖片地址也都要更換為 CDN 的路徑，所以就算用現成工具去處理 HTML / XML 轉 Markdown，都還要去補充這些信息，也比較繁瑣。
所以是借助了 Node 編寫了個靜態爬蟲，在爬取過程中對一些內容進行追加、轉換。
具體的實現可以參考我之前寫的 網站改版遷移經驗記錄：基于 node 的爬蟲編寫[45] ，這里就不重復贅述了。
既然是 Vue 項目，那么當然支持 Vue 系的統計插件，之前寫的兩個統計平臺插件，都是可以開箱即用的，均已支持 Vue 3.0 的使用。你可以在 main.ts[46] 里了解如何開啟流量的統計上報功能，如果你需要記錄埋點，也都有 API 可以輕松觸發數據的上報。
百度統計：vue-baidu-analytics[47]
友盟統計：vue-cnzz-analytics[48]
服務端之前是 WordPress 所依賴的 Nginx + PHP + MySQL ，這一次重構也把服務端直接換了，更換為 Node.JS + Express ，通過 PM2 守護進程來運行在阿里云。
對，這一次沒有數據庫，第一版暫時不打算做數據庫，暫時用不到，目前大部分數據都已經遷移到 Github 倉庫了，下個版本功能迭代用到了再考慮弄一下。
我的服務器系統是 CentOS 7，也就是 Linux 系統，關于 Linux 下如何安裝 Node ，搜素引擎很多方法，這里也不贅述了，放幾個自己用到的關鍵命令參考吧。
sudo yum clean all sudo yum makecache sudo yum update sudo yum upgrade -y
sudo yum install npm sudo npm install -g n sudo n stable
npm i -g yarn
yarn global add pm2
其他的步驟就不用說了，創建服務器的文件夾，初始化，安裝 express[52] 或者其他你更熟悉的服務程序，搞起吧！
有幾件事要特別叮囑一下：
1. 因為服務端變了，如果原來有開啟 HTTPS，記得重新配置你的 SSL 證書（我用的是阿里云的免費證書，只需要 1 年更換 1 次）
2. 域名也要重新做 301 重定向（HTTP 強切 HTTPS ， WWW 強切無 3W 等）
3. 檢查之前是否有在推廣的的鏈接掛掉了，也要重新 301 到新地址 （比如 RSS 源之前是 /feed/ ，現在是 /feed.xml）
4. 最重要的，配置上對路由 history 模式的支持
第一版其實不復雜，后面有需要會繼續迭代。
代碼托管在 GitHub 的好處就是 GitHub Actions 可以幫我們實現 CI / CD，通過配置分支的 push 或者 pull_request 等行為來實現自動觸發項目的構建打包，并實現一鍵部署到阿里云服務器。
具體的腳本可以參考我寫的 workflow[53] ，里面都提供了注釋。
workflow 里所有以 secrets.XXXXXX 的格式均為倉庫獨立配置的密鑰變量，在倉庫的 settings > Actions secrets 里添加。
其中一些關鍵環節說明如下：
如果其中有什么環節不清楚的，善用搜索引擎，或者到我博客倉庫給我提 issue 也可以。
如果你不是托管在 GitHub ，而是別的 Git 平臺諸如自建的 Gitlab ，你也可以通過 Jenkins[57] 去配置 CI / CD 的支持。
使用 Vue-CLI 創建新項目的時候，可以了解到有一個選項是關于 PWA 的，關于 PWA 的定義建議直接閱讀 漸進式 Web 應用（PWA） | MDN[58] 。
Vite 官方團隊也對 PWA 做了支持，通過 vite-plugin-pwa[59] 可以方便的實現一個離線應用的配置。
不過目前發現了一個問題就是，當 vite.config.ts 的 base 選項設置為 CDN 地址時，構建出來的 PWA manifest 資源路徑會讀取錯誤，原因是 manifest 不能走 CDN，要單獨從網站內讀取，雖然跟作者提了優化建議（詳見 #25[60]），不過還需要點時間去優化。
所以在原版進行版本更新之前，自己先發布了個私有調試包 fix 了這個問題，有遇到一樣情況的朋友可以先安裝 \@chengpeiquan/vite-plugin-pwa[61] 這個去用，不過最好還是留意原版的更新，這個私有包不會長期維護。
2021-02-22 更新：目前原版已更新，Fix 了我反饋的問題，請使用 v0.5.3 以后的版本可以避免該問題的產生，給作者點贊！
關于 PWA 的配置可以參考我的項目，這里單獨說一下需要特別注意的點：
其他的選項根據實際需要去處理就可以了。
因為網站的設計一向不是我的專長，加上不喜歡花里胡哨的東西，所以這一次重構后的 UI 設計還是基本繼承了原來的風格。
但也有一些新的迭代，比如加上了跟隨系統的暗黑風格（也可以通過導航右上角進行手動切換），還有首頁的變化，對于內容不多的博客來說，挺好的一個 idea，這是來自好友小毅 The Art of Chawye Hsu[62] 和 Vite 開發者 Antfu Anthony Fu[63] 的博客參考。
當然，整個項目的重構，更多的技術支持來自于 Anthony，他也是 Vue 和 Vite 官方團隊的開發者，他比我早幾天上線的 Rewrite in Vite[64] 給了我很多思路，很多基于 Vite 的插件也是他寫的，都是在這幾天發布和迭代，有那種瞌睡來了枕頭的感覺，美妙！
完整的項目依賴和配置請查看倉庫的 package.json[65] 和 vite.config.ts[66] ，整個項目也完全開源了，具體的實現可以查看 Github 倉庫[67] ，在這里就不贅述了，如果覺得對你有用，歡迎 Star 。
公眾號：小何成長，佛系更文，都是自己曾經踩過的坑或者是學到的東西
有興趣的小伙伴歡迎關注我哦，我是：何小玍。 大家一起進步鴨
為一個現代的代碼編輯器，Atom有著各種流行編輯器都有的特性，功能上非常豐富，支持各種編程語言的代碼高亮與大多數其他編輯器相比，Atom的語言支持已經算是覆蓋非常全面了。另外，它的代碼補全功能（也叫Snippets）也非常好用，你只需輸入幾個字符即可展開成各種常用代碼，可以極大提高編程效率。Atom預裝了四種UI和八種語法主題，包括深色和淺色。如果找不到您要查找的內容，您還可以安裝由Atom社區創建的主題或創建自己的主題。
Atom幫助您更快地編寫代碼。在一個窗口中輕松瀏覽和打開單個文件，整個項目或多個項目。
使用默認插件，從v1.5.1開始，在某些方面支持以下語言：HTML，CSS，Less，Sass，GitHub Flavored Markdown，C / C ++，C＃，Go，Java，Objective-C，JavaScript，JSON，CoffeeScript ，Python，PHP，Ruby，Ruby on Rails，shell腳本，Clojure，Perl，Git，Make，Property List（Apple），TOML，XML，YAML，Moustache，Julia和SQL。
Atom1.38.0顯著變化：
原子1.38.1的變化：
語言的JSON
原子1.38.2更改日志：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
