很多人只聽過vue，沒聽過vuepress？它可是新的vue全家桶成員之一，尤雨溪大神于2018年發(fā)布。vuepress項目在github上的star數(shù)截止發(fā)文已經(jīng)是18.6K了。很多前端程序員困" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 手把手教你用VuePress如何快速搭建個人免費網(wǎng)站？

手把手教你用VuePress如何快速搭建個人免費網(wǎng)站？

時間：2023-07-02 11:54:01 | 來源：網(wǎng)站運營

時間：2023-07-02 11:54:01 來源：網(wǎng)站運營

手把手教你用VuePress如何快速搭建個人免費網(wǎng)站？：前言

很多人只聽過vue，沒聽過vuepress？它可是新的vue全家桶成員之一，尤雨溪大神于2018年發(fā)布。vuepress項目在github上的star數(shù)截止發(fā)文已經(jīng)是18.6K了。很多前端程序員困擾沒有自己的個人免費小網(wǎng)站，今天投資小達(dá)人手把手教你用vuepress快速創(chuàng)建自己的個人小網(wǎng)站，首先簡單介紹一下vuepress是用于迅速搭建技術(shù)文檔網(wǎng)站與個人博客，簡單快捷，下面我們一起開啟學(xué)習(xí)vuepress的學(xué)習(xí)之旅吧！在開啟vuepress搭建網(wǎng)站之前，首先上鏈接：前端投資小達(dá)人
一、模塊概述
1. 定義
Vue 驅(qū)動的靜態(tài)網(wǎng)站生成器
2. 亮點



自己總結(jié)的vuepress優(yōu)點



3. 同類模塊橫向?qū)Ρ?br>①. Nuxt:


②. Docsify / Docute:
同樣都是基于 Vue，然而它們都是完全的運行時驅(qū)動，因此對 SEO 不夠友好
③. Hexo:
主題系統(tǒng)太過于靜態(tài)以及過度地依賴純字符串, 而不是基于Vue。同時，Hexo 的 Markdown 渲染的配置也不是最靈活的
④. GitBook：


二、成品展示
1. 技術(shù)文檔網(wǎng)站：
vue全家桶官網(wǎng)：vue、vuex、vue-cli、vue-router以及vuepress本身
2. 個人博客：
博客1（默認(rèn)主題）、博客2（自定義主題）
三、開始搭建
coding之前，建議大家先了解markdown語法，為之后的文檔撰寫做鋪墊：傳送門
1. 全局安裝 VuePress
npm install /-g vuepress
2. 創(chuàng)建并進(jìn)入項目
mkdir vuepress-demo && cd vuepress-demo
3. 初始化項目
npm init /-y // 默認(rèn)配置yes
在生成的package.json中，添加如下兩個啟動命令：
"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }
4. 創(chuàng)建基本項目結(jié)構(gòu)
官方只有推薦目錄結(jié)構(gòu)，并沒有現(xiàn)成的cli，所以需要通過命令行或手動創(chuàng)建如下結(jié)構(gòu)：
vuepress-demo ├─package.json ├─docs | ├─README.md | ├─.vuepress | | ├─config.js | | ├─public | | | └avatar.png | | | └spider.png
其中有后綴的是文件，沒后綴的是文件夾
5. 配置config.js
該文件為項目最重要的配置文件，幾乎所有配置項都是在此進(jìn)行。
我們先來一個最簡單的配置看看效果：
module.exports = { title: '前端投資小達(dá)人', head: [ // 注入到當(dāng)前頁面的 HTML <head> 中的標(biāo)簽 ['link', { rel: 'icon', href: '/avatar.png' }], // 增加一個自定義的 favicon(網(wǎng)頁標(biāo)簽的圖標(biāo)) ], themeConfig: { logo: '/avatar.png', // 左上角logo nav:[ // 導(dǎo)航欄配置 {text: 'tigger', link: 'https://www.laohu8.com/personal/3444504177139447' }, {text: '投資見解', link: 'https://www.yuque.com/nieyulin/ahod2h' }, {text: '投資文章', link: 'https://www.yuque.com/invest/gi5ot6'}, {text: '前端面試題', link: 'https://www.yuque.com/nieyulin/lunpyu'}, {text: 'github', link: 'https://github.com/nieyulin112/'} ], sidebar: 'auto', // 側(cè)邊欄配置 } };
想看詳細(xì)配置的同學(xué)可直接查詢官網(wǎng)-config配置。
注意：路由根路徑為docs文件夾，靜態(tài)資源（圖片）根路徑為public文件夾
6. 啟動項目
npm run dev
默認(rèn)服務(wù)啟動在了http://localhost:8080/，效果如下：



demo第一版
我們配置的title、nav、sidebar、logo全都生效了！
恭喜，你完成了第一個極簡版demo！
這里使用的官方默認(rèn)主題：


注意：項目自帶熱更新; 但config.js有時可能會熱更新失敗，需要重啟項目
7. 配置首頁（可選）：
一般的技術(shù)文檔網(wǎng)站都需要一個首頁作為該技術(shù)的簡介，個人博客也需要這樣的歡迎頁。vuepress提供了一個默認(rèn)格式的簡潔首頁，需要在你的根級（docs下）README.md添加home: true，格式如下：
--- home: true heroImage: /avatar.png heroText: 我的主頁 tagline: 我的主頁 actionText: 高頻前端面試題 → actionLink: https://www.yuque.com/nieyulin/lunpyu features: - title: 簡潔至上 details: 以 Markdown 為中心的項目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。 - title: Vue驅(qū)動 details: 享受 Vue + webpack 的開發(fā)體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發(fā)自定義主題。 - title: 高性能 details: VuePress 為每個頁面預(yù)渲染生成靜態(tài)的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。 footer: 前端投資小達(dá)人的個人博客 ---
效果如下：



8. 變更主題（可選）
① 更換主題：
對默認(rèn)主題不滿意，想換個別的主題？安排！
在config.js中設(shè)置：
module.exports = { theme: 'vuepress-theme-xx' }
可以在npm中尋找自己喜歡的主題，其中以 @vuepress/theme- 開頭的主題是官方維護(hù)的主題：



② 開發(fā)主題：
npm上也沒有合適的主題？安排！
那咱們就自己開發(fā)一個主題，篇幅原因就不介紹細(xì)節(jié)了，感興趣的同學(xué)可以自行查看官方文檔-開發(fā)主題
③ 修改默認(rèn)主題：
不想那么麻煩，但默認(rèn)主題又不滿足需求？安排！
那就在默認(rèn)主題基礎(chǔ)上做一些修改，以滿足需求。
執(zhí)行如下命令，可將默認(rèn)主題的各功能組件釋放出來：
vuepress eject docs
你會發(fā)現(xiàn)，在根目錄下，多了一個theme文件夾，如下：



上圖列出了主要的布局組件，只需在其中做適量修改以滿足業(yè)務(wù)需求即可。
9. md文件中使用vue組件（可選）
vuepress項目中的md文件，可以直接使用vue組件。
我們可以在.vuepress文件夾下新建一個components文件夾，其中的vue組件會自動注冊到全局，如下：



頁面效果如下：



10. 客戶端增強(qiáng)（可選）
如果你想對自己的應(yīng)用做一些優(yōu)化，比如使用router做登錄攔截、給vue實例掛載全局變量或注冊其他組件等，可以在.vuepress下新建文件enhanceApp.js：
export default ({ Vue, // VuePress 正在使用的 Vue 構(gòu)造函數(shù) options, // 附加到根實例的一些選項 router, // 當(dāng)前應(yīng)用的路由實例 siteData // 站點元數(shù)據(jù) }) => { // ...做一些其他的應(yīng)用級別的優(yōu)化 }
這個文件類似于vue-cli腳手架中的main.js文件
四、部署上線
通過上面的工作，我們已經(jīng)掌握了vuepress的基本用法，大家可以填充更多的md文件去豐富你的網(wǎng)頁。
但這些都還只是跑在本地，想要所有人都能通過互聯(lián)網(wǎng)訪問你的網(wǎng)站，需要申請一個域名以及服務(wù)器，并將你的項目部署上去：
1. 選擇你的服務(wù)器
服務(wù)器有免費和收費兩種，各有優(yōu)劣：
① 免費：
使用 Github Pages 。即 Github 提供的、用于搭建個人網(wǎng)站的靜態(tài)站點托管服務(wù)。很多人用它搭建個人博客。這種方式的好處是免費、方便，壞處是速度可能會有些慢、不能被國內(nèi)的搜索引擎收錄。
② 收費：
國內(nèi)做的比較好的云服務(wù)有阿里云、騰訊云，好處是速度有保證、可以被搜索引擎收錄，壞處是要花錢，土豪請無視。
這里我們選擇方案①
2. github創(chuàng)建倉庫
① 登錄 github
② 新建倉庫一：http://username.github.io
（必須為你的github賬戶的username，而不是昵稱啥的）
③ 新建倉庫二，名稱隨意如vuepress-demo
二者的關(guān)系是：倉庫一負(fù)責(zé)顯示網(wǎng)站內(nèi)容，我們不需要改動它；日常開發(fā)和新增內(nèi)容，都在倉庫二中，并通過 npm run deploy 命令，將代碼發(fā)布到倉庫一
3. 關(guān)聯(lián)本地項目與github倉庫
// 先cd到你的demo cd vuepress-demo // git初始化 git init // 關(guān)聯(lián)github倉庫 git remote add origin https://github.com/nieyulin112/vuepress-blog.git
4. 新建部署文件
①根目錄下新建deploy.sh:
#!/usr/bin/env sh # 確保腳本拋出遇到的錯誤 set -e # 生成靜態(tài)文件 npm run build # 進(jìn)入生成的文件夾 cd docs/.vuepress/dist # 如果是發(fā)布到自定義域名 # echo 'www.yourwebsite.com' > CNAME git init git add -A git commit -m 'deploy' # 如果你想要部署到 https://USERNAME.github.io git push -f https://github.com/nieyulin112/nieyulin112.github.io.git master # 如果發(fā)布到 https://USERNAME.github.io/<REPO> REPO=github上的項目 # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages cd -
② 根目錄新建README.md
此文件為你的項目描述或用法，一般的git項目都會有此文件，和項目中的md文件無關(guān)。
5. git提交
git提交前，先確保你的本地登錄了git賬號，否則沒有權(quán)限提交到遠(yuǎn)端。
如果本地未登錄，可參考git初次登錄教程。
另外，可以在根目錄下添加.gitignore文件，以防止不必要的提交：



// 提交到暫存區(qū) git add . // 提交到本地倉庫 git commit -m '基本搭建完畢' // push到github倉庫 git push --set-upstream origin master
檢查你的github倉庫，看看代碼發(fā)布上去了沒有



6. 新建deploy指令并執(zhí)行
package.json 文件夾中添加發(fā)布命令：
"scripts": { "deploy": "bash deploy.sh" }
npm run deploy
7. 發(fā)布成功！
查看自己的博客域名：https://nieyulin112.github.io/
這樣所有的人都能訪問到你的博客了！
8. PWA（可選）
PWA，即progressive web apps，以web的形式給你原生app的體驗。
VuePress 默認(rèn)支持 PWA，配置方法如下：
① config.js添加配置：
head: [ // 注入到當(dāng)前頁面的 HTML <head> 中的標(biāo)簽 ['link', { rel: 'manifest', href: '/photo.jpg' }], ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }], ], serviceWorker: true // 是否開啟 PWA
② public 文件夾下新建 manifest.json 文件，添加：
{ "name": "前端投資小達(dá)人", "short_name": "前端投資小達(dá)人", "start_url": "index.html", "display": "standalone", "background_color": "#2196f3", "description": "前端投資小達(dá)人的個人主頁", "theme_color": "blue", "icons": [ { "src": "./avatar.png", "sizes": "144x144", "type": "image/png" } ], "related_applications": [ { "platform": "web" }, { "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" } ] }
③ 重新部署：npm run deploy

今天就和大家分享到這里，大家可以自己手動搭建一個屬于自己的個人blog，不用去買域名服務(wù)就可以擁有屬于自己的blog。

前端投資小達(dá)人

關(guān)鍵詞：免費,把手

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉