小編給大家分享一下如何使用vuepress搭建靜態(tài)博客,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
10多年的江城網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整江城建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“江城網(wǎng)站設(shè)計(jì)”,“江城網(wǎng)站推廣”以來(lái),每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
什么是vuePress
vuePress是以vue驅(qū)動(dòng)的主題系統(tǒng)的簡(jiǎn)約靜態(tài)網(wǎng)站生成工具(擁有自己的默認(rèn)主題)。
veuPress由vue,vue-router,webpack驅(qū)動(dòng)的單頁(yè)面應(yīng)用,每個(gè)markdonw文件都使用markdonw-it編譯為html文件,然后作為vue組件的模板來(lái)處理。
中文官網(wǎng)
VuePress倉(cāng)庫(kù)
項(xiàng)目地址
VuePress 有很多優(yōu)點(diǎn):
界面簡(jiǎn)潔優(yōu)雅(個(gè)人感覺(jué)比 HEXO 好看)
容易上手(半小時(shí)能搭好整個(gè)項(xiàng)目)
更好的兼容、擴(kuò)展 Markdown 語(yǔ)法
響應(yīng)式布局,PC端、手機(jī)端
Google Analytics 集成
支持 PWA
安裝vuePress
全局安裝
在此方式中,只是要項(xiàng)目根目錄創(chuàng)建了一個(gè)README.md文件,直接執(zhí)行訪問(wèn)的就是此文件
npm install -g vuepress # 創(chuàng)建一個(gè) markdown 文件 echo '# Hello VuePress' > README.md # 開(kāi)始編寫(xiě)文檔 vuepress dev # 構(gòu)建 vuepress build
在已有項(xiàng)目中安裝
# 安裝為本地依賴項(xiàng) npm install -D vuepress # 創(chuàng)建一個(gè) docs 目錄 mkdir docs # 創(chuàng)建一個(gè) markdown 文件 echo '# Hello VuePress' > docs/README.md # 開(kāi)始編寫(xiě)文檔 npx vuepress dev docs
還可以在package.json中添加js腳本,官網(wǎng)方式不好寫(xiě),我們直接用常用的方式
{ "scripts": { "start": "vuepress dev docs",//運(yùn)行 "build": "vuepress build docs"//打包 } }
使用vuePress搭建靜態(tài)博客
接下來(lái)就是配置了,我會(huì)直接把我的配置文件貼上來(lái),我們先看結(jié)構(gòu)
博客結(jié)構(gòu)
博客結(jié)構(gòu)分為主頁(yè),導(dǎo)航欄,側(cè)邊欄
在.docs目錄下新建一個(gè).vuePress文件,在此注意,搭建博客過(guò)程中所有的配置文件以及內(nèi)容文件、主題等都放在此目錄中
在.vuePress文件夾下新建三個(gè)文件,public用來(lái)放圖片等靜態(tài)文件,theme中放到博客用到的主題,config.js中存放所有的配置
.vuePress ---public ---theme ---config.js
在.docs文件夾下新建幾個(gè)模塊文件夾,比如我的就分為學(xué)習(xí)筆記、問(wèn)題記錄、關(guān)于我等,每個(gè)文件夾下再新建md文件
vuePress會(huì)自動(dòng)把README.md設(shè)置為導(dǎo)航的主頁(yè),所以如果我們需要主頁(yè)就先建README.md,再新建first.md,seconde.md等文件作為側(cè)邊欄要顯示的文件
.docs ---.vuePress ---about ---README.md ---first.md ---seconde.md ---study ---problem
具體配置
最重要的config.js配置
在此值得注意的是,主題配置不只是簡(jiǎn)單的樣式配置等,其中包括導(dǎo)航與側(cè)邊欄部分的配置,此處配置參見(jiàn)官網(wǎng)導(dǎo)航欄”默認(rèn)主題配置“
module.exports = { //網(wǎng)站標(biāo)題 title: '霍夢(mèng)林的個(gè)人博客', // 主頁(yè)描述 description: 'Just playing around', // 要部署的倉(cāng)庫(kù)名字 base: '/', dest: './docs/.vuepress/dist', // 主題配置 themeConfig: { // 導(dǎo)航配置 nav: [ // text為導(dǎo)航欄顯示文字,link為路徑,即文件夾名字,注意不要丟了名字前后的'/' {text: 'Home', link: '/'}, {text: 'About', link: '/about/'}, {text: 'Problem', link: '/problem/'}, {text: 'Study', link: '/study/'}, {text: 'CSDN', link: 'http://blog.csdn.net/weixin_38318244/'}, {text: 'Github', link: 'https://github.com/momo-0902'} ], // 側(cè)邊欄配置,側(cè)邊欄組,不同(導(dǎo)航)頁(yè)面對(duì)應(yīng)不同的側(cè)邊欄 // 以對(duì)象形式配置,前邊的key為nav處的路徑,后邊提供一個(gè)數(shù)組作為此側(cè)邊欄中的子標(biāo)題 sidebar: { '/problem/': [ // ''空字符串代表主頁(yè),顯示README.md中的內(nèi)容 '', ['201709', '201709'],//使用數(shù)組為側(cè)邊欄起別名,前邊是md名稱,后邊是鏈接顯示的文字 ['201710', '201710'], ], '/study/': [ '', ['axios', '1.axios'], ['document', '2.document'], ] }, // 這是嵌套標(biāo)題鏈接,自動(dòng)顯示當(dāng)前激活(導(dǎo)航)頁(yè)面標(biāo)題的鏈接,即顯示深度(h2-h7的深度) sidebarDepth: 1 } }
網(wǎng)站主頁(yè)配置,即.docs下README.md的配置
--- // 使用默認(rèn)主題 home: true // 主頁(yè)頭像 heroImage: /me.jpg // '開(kāi)始學(xué)習(xí)'快捷按鈕 actionText: Get Started → // 快捷按鈕跳轉(zhuǎn)路徑 actionLink: /about/ features: - title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing. - title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. - title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. footer: MIT Licensed | Copyright © 2018-present momo --- [[toc]] :tada: :100: 啦啦啦德瑪西亞 啦啦啦啦擼啊擼啊 <!-- ![aaa](~@alias/me.jpg) --> 這里使用了 markdown 的拓展 `[[toc]]` ## 這里是momo的博客 ### 項(xiàng)目中遇到的問(wèn)題 ### 學(xué)習(xí)筆記 ### csdn ### github [關(guān)于我](/about/)
theme主題配置
項(xiàng)目中只是把vuePress所有的主題配置都拷貝到了本項(xiàng)目中,項(xiàng)目結(jié)構(gòu)如下:
theme ---styles ---theme.styl ---code.styl ---Home.vue ---Layout.vue ---until.js
打包部署
構(gòu)建
// 此處構(gòu)建生成路徑為./docs/.vuepress/dist,由config.js中配置: dest: ‘./docs/.vuepress/dist', vuepress build docs
導(dǎo)航到構(gòu)建輸出目錄
// config.js中dest配置的輸出目錄是哪此處就cd進(jìn)入哪,所有的git操作(包含初始,添加,提交等)都在此目錄下 cd docs/.vuepress/dist git init git add -A git commit -m ‘deploy'
推到你的倉(cāng)庫(kù)
如果是部署到<username>
.github.io的主頁(yè)上
git push origin master
這時(shí)可能出現(xiàn)問(wèn)題
fatal: ‘origin' does not appear to be a git repository
以及fatal: Could not read from remote repository.
解決辦法: 執(zhí)行git remote add origin git@github.com:<USERNAME>/<REPO>.git
如果是部署到分支上
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages (git push -f git@github.com:momo-0902/wiki.git master:gh-pages)
可在package.json中配置腳本運(yùn)行
npm start
運(yùn)行項(xiàng)目
npm run build
打包
npm run deploy
部署
以上是“如何使用vuepress搭建靜態(tài)博客”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享標(biāo)題:如何使用vuepress搭建靜態(tài)博客
分享網(wǎng)址:http://vcdvsql.cn/article0/iijgio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開(kāi)發(fā)、、Google、小程序開(kāi)發(fā)、建站公司、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)