手把手教你用vuepress搭建網(wǎng)站(1)

時間：2023-07-25 00:21:01 | 來源：網(wǎng)站運營

時間：2023-07-25 00:21:01 來源：網(wǎng)站運營

手把手教你用vuepress搭建網(wǎng)站(1)：

前言

如果說閱讀是知識的輸入,那么寫作就是知識的輸出,輸出是一個內(nèi)化知識理解的過程,有些知識,一問,知道,一動手,不會,看似簡單,一看就會,一做就廢,凡是不被自己吸收,為自己所用的,都只能稱作為做信息,而不能視作為知識.

記錄就像是復(fù)盤,迭代自己,不斷試錯,反饋. 無論是前端還是后端,甚至是其他,多動手,多實踐才是真理

幾大建站技術(shù)比較

每一個技術(shù)的涌現(xiàn),受人追捧,必然有著它令人著迷之處,相比于jekyll,Hexo,GitBook,Nuxt,Docsify/Docute,以及現(xiàn)在的vuepress,而不久前尤大又多了個兄弟vitePress,它們都是一種靜態(tài)網(wǎng)站生成器,各有特點,沒有好壞,都有自己適宜的應(yīng)用場景

技術(shù)永遠都是在不斷更新迭代,越來越進步

簡單做一下對比

Jekyll

特點:Github 自帶的,您不用部署靜態(tài)頁面,您只要往 GitHub 上推 md文件就能產(chǎn)生 blog

問題:

• 當(dāng) md 文件多了之后,排序是一個很頭疼的問題,純體力手工勞動,無法實現(xiàn)自動化,速度很是極具考驗
• 后端基于 Ruby 語言
• 我早期的博客就是用 jekyll 搭建的,但是后來因為管理確實麻煩,就沒打理了的 f="http://jekyllcn.com/">Jekyll 官方文檔

Hexo

特點:比Jekyll要先進一點,先生成文件,在部署

• 基于Node.js的靜態(tài)網(wǎng)站生成器
• 主題很豐富,在vuepress之前很多博客,文檔網(wǎng)站都是基于Hexo搭建的,是用jekyll還是Hexo搭建的,基本上做 IT 的小伙伴,也能辨別出來

問題:

每次都需要把生成的靜態(tài)頁面推上去,md 若出現(xiàn)錯誤,編譯會出錯,配置的不是特別靈活 ref="https://hexo.io/">Hexo 官方文檔

GitBook

問題

默認主題有限制,隨著文檔的增加,每次加載的時間會很長,也不是 Vue 驅(qū)動的 官方團隊專注于打造一個商業(yè)產(chǎn)品,而并非開源工具

• GitBook 官方文檔

Docsify-Docute

• 兩者都是基于Vue,在運行時驅(qū)動
• Docsify由于只用于解析Markdown文件并生成網(wǎng)站,不會生成靜態(tài) html 文件,所以它是不利于搜索引擎,百度,谷歌等是難以被收錄的,即使做了網(wǎng)站統(tǒng)計,也很爬取到你的內(nèi)容,但是簡單,你只需專注 md 編寫就可以
• Docute,是Docsify的升級,沒有構(gòu)建過程,將 md文件呈現(xiàn)為單頁面應(yīng)用程序,會生成靜態(tài)HTML,對 SEO很友好,利于百度蜘蛛的抓取
• Docsify官方文檔,
• Docute 官方文檔

Nuxt

更偏向于構(gòu)建應(yīng)用程序,SSR 服務(wù)端渲染框架,適合構(gòu)建復(fù)雜的系統(tǒng)應(yīng)用程序,對于開發(fā)人員要求是有門檻的,如果自己只專注于內(nèi)容創(chuàng)作,而耗費精力去搭建一個靜態(tài)博客,個人覺得,有種大材小用

• Nuxt官方文檔

比較

• 閱讀體驗上:gitBook > Docsify/Docute = vuepress = HEXO > Jekyll
• 配置上:Jekyll == Docsify< Docute < Hexo < vuepress,其中Jekyll 和 Docsify配置是最簡單的,如果只用于專注內(nèi)容創(chuàng)作,挺合適的,但是功能很弱,拓展性差
• 性能/seo 上:VuePress是最好的,雖然 docsify,docute都是基于 vue,但是他們是在運行時解析,而 vuepress是預(yù)先解析 HTML,體驗上會更好,而用Docsify搭建的網(wǎng)站,是很難被瀏覽器,搜索引擎錄取的,百度,谷歌抓取不到,無人問津狀況
• 靈活上: Vuepress更加靈活,可實現(xiàn)定制化,網(wǎng)站風(fēng)格并非千篇一律,熟悉Vue組件化開發(fā)的,上手也不難
• 代碼上: 文件結(jié)構(gòu)非常清晰,可維護性,可拓展性好

為什么推薦選擇-VuePress

VuePress

• Vue 驅(qū)動,強大的插件生態(tài)系統(tǒng),官方文檔詳細
• 支持搜索引擎優(yōu)化(SEO),單頁面應(yīng)用,按需加載,支持 PWA(無網(wǎng)絡(luò)情況下照樣能訪問)
• 為技術(shù)文檔而優(yōu)化內(nèi)置 markdown 拓展
• 在md(Markdown)`` 中可以寫vue組件,甚至寫原生JS,Ts,HTML,CSS`,無任何壓力阻礙,更加的靈活,可定制化
• 可以自定義開發(fā)主題,任意修改,網(wǎng)站風(fēng)格不在千篇一律
• 支持 PWA(自動生成 Service Worker),像 app 應(yīng)用一樣添加到手機桌面上
• 集成了 Google Analytics 集成,也支持百度統(tǒng)計
• 基于 git 的最后上傳更新時間
• 支持國際化,多語言,只需配置一下就好
• 響應(yīng)式布局,手機端,PC 端網(wǎng)站友好的用戶體驗

遠不止于用來搭建博客,可以開發(fā)公司企業(yè)官網(wǎng)等網(wǎng)站應(yīng)用,也可結(jié)合boostrap,Element UI等技術(shù)進行二次開發(fā),構(gòu)建更復(fù)雜的應(yīng)用 ....

vuepress 官方文檔

注意

1. 目前VuePress版本并沒有支持 typescript，并且沒有提供類型定義,但如果想要用TS,可以安裝vuepress-plugin-typescript插件,它提供了在 VuePress中使用 typescript 的部分能力。如果你想獲取到正確的類型定義，你可以配合 vuepress-types一起使用
2. vuepress-types作為VuePress的類型定義包，還處于實驗階段
3. 具體使用,可參考文檔vuepress-plugin-typescript 使用文檔,可以去嘗試一下,這個不僅僅可以寫Ts,在md也可以寫TypeScript

在自己用 VuePress搭建網(wǎng)站的過程中,從零開始,一行行代碼的配置,編寫,以及考慮代碼模塊化的拆分,維護性,可實現(xiàn)按需定制化,到最終部署上線,自定義域名等,在這個過程中,踩了很多坑

當(dāng)然,也借鑒了不少網(wǎng)上的博客,但很多不是把配置寫死,就是代碼拓展性極其受限,而且每個人遇到的問題都是不一樣的,而官方文檔 VuePress的 API琳郎滿目,對于新手小白,的確眼花繚亂,不知從何看起,配著配著就暈了的

而很多博客,大佬,基本上都是基于一個模板,有很多坑并沒有提及

官方文檔只適合查閱,也并不適合從頭看到尾,不用每個 API 都熟記于心,你只需要知道怎么去查,在哪個地方找就可以了的

VuePress 的配置的確復(fù)雜,比較零散,但并非令人望而卻步,一旦你掌握了套路后,就會欣賞它的獨特,配置選項雖然多,但是它的結(jié)構(gòu)非常清晰

本篇文章有些長,建議一步步的按階段完成,有些配置你不必知道原因,你只需要知道按照官方文檔那么配置,能出來,達到你想要的效果就可以了,至于內(nèi)部原理,富有閑于時,可自行探索,不必深究

也不要一上來,就去折騰自定義主題,看到酷炫花銷的博客,就立馬想搞一個出來

一個能吸引到你的網(wǎng)站,讓你停留片刻,收藏,點贊,轉(zhuǎn)發(fā),三連擊的,起決定性作用,并非是你的 UI,而是你網(wǎng)站所提供的內(nèi)容服務(wù),如果一味的追求 UI 效果,卻忽略建站的初衷,就有些本末倒置了

先把官方默認的主題,玩熟悉了,在去玩自定義主題,以及進行二次開發(fā),都是可以的

口說無憑,話說多了,都是故事,下面一步步帶你從零開始,到域名部署等,搭建屬于自己的網(wǎng)站,開始自己的記錄之旅.

前提準備

安裝NodeJs

• 下載NodeJs,并安裝到本地,下一步,下一步,即可安裝
• 檢測 NodeJs 是否安裝成功,可在命令行終端輸入node -v,同時查看一下 npm 的版本npm -v(在安裝 Node 完后,npm 是自動就安裝上了的,集成在了Node運行壞境里)

C:/Users/itclancoder>node -vv12.18.0C:/Users/itclancoder>npm -v6.14.4警告

請確保你的 Node.js 版本 >= 8

NodeJs 下載地址:(NodeJS-長期支持版下載)

• 安裝git bash:用于向 github 提交代碼,雖然cmd或者power Shell都可以,但還是建議使用git bash
• git bash 下載地址:git bash
• 熟悉下markdwon語法,不熟悉也沒有關(guān)系,后續(xù)都是用它來寫文檔,五分鐘立馬就可以上手,可前往ef="https://markdown-it.github.io/">在線練習(xí) markdonw 語法
• vscode 插件商店里安裝markdown,markdown Preview插件,也可下載安裝Typora軟件到本地編寫md

項目搭建

全局安裝-vuepress

• 命令行(cmd/git bash)終端下全局安裝vuepress

yarn global add vuepress # 或者:npm install -g vuepress 或者cnpm install -g vuepress警告

• 若是使用 yarn 安裝,需要先全局安裝 yarn(npm install -g yarn),yarn 使用官方文檔
• 若是使用 npm 全局安裝,請確保你的 Node.js 版本 >= 8
• 如果你的現(xiàn)有項目依賴了 webpack 3.x，推薦使用 Yarn而不是npm 來安裝VuePress。因為在這種情形下，npm會生成錯誤的依賴樹

初始化項目

在你的電腦某個磁盤下創(chuàng)建一個項目目錄:mkdir itclan,這個是文件夾名字是任意的

mkdir itclancd itclan進入itclan 文件夾后,在cmd或git bash終端下,使用npm init -y,或yarn init -y初始化,會自動生成一個package.json文件

yarn init -y 或 npm init -y經(jīng)過yarn init -y后,會生成一個package.json文件,內(nèi)容如下所示

{ "name": "itclan", "version": "1.0.0", "main": "index.js", "license": "MIT",}緊接著，在 package.json里加一些腳本,配置啟動命令

"scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }警告

當(dāng) package.json 配置成這種格式時,在當(dāng)前文件下,啟動時使用npm run docs:dev,啟動項目,而打包構(gòu)建時,使用npm run docs:build

這個也可以簡化成

"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }警告

當(dāng)package.json配置成這種格式時,在當(dāng)前文件下,啟動時可以使用npm run dev,啟動項目,而打包構(gòu)建時,使用npm run build如果是使用 yarn 方式啟動和構(gòu)建項目:可以使用yarn dev啟動項目,而使用yarn build構(gòu)建項目

• 啟動項目: npm run docs:dev這條命令相當(dāng)于vuepress dev docs
  
• 打包項目: npm run build這條命令相當(dāng)于 vuepress build docs
  

在接著,創(chuàng)建docs目錄, 這個docs文件夾主要用于放置我們寫的.md類型的文章以及.vuepress相關(guān)的配置,這個文件夾的名字你可以任意,與你啟動項目和構(gòu)建項目時的配置保持一致就可以了的

mkdir docs進入docs文件夾中使用mkdir命令創(chuàng)建.vuepress文件夾,注意這個文件夾的名字時固定的,不要隨便改變

cd docsmkdir .vuepress這個.vuepress主要就是我們用于存放全局的配置、組件、靜態(tài)資源等與VuePress相關(guān)的文件配置都將會放在這里

具體更詳細配置說明可見官網(wǎng):基本配置 具體更詳細的目錄樹結(jié)構(gòu)說明:目錄結(jié)構(gòu) 至此,項目大體已經(jīng)搭建完成了,接下來,主要就是一些配置

限于篇幅所致,更多配置可見下文...