小編給大家分享一下如何使用vuepress搭建靜態(tài)博客，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名申請、虛擬主機、營銷軟件、網(wǎng)站建設、無錫網(wǎng)站維護、網(wǎng)站推廣。

什么是vuePress

vuePress是以vue驅(qū)動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具（擁有自己的默認主題）。

veuPress由vue,vue-router,webpack驅(qū)動的單頁面應用，每個markdonw文件都使用markdonw-it編譯為html文件，然后作為vue組件的模板來處理。

中文官網(wǎng)
VuePress倉庫
項目地址

VuePress 有很多優(yōu)點：

• 界面簡潔優(yōu)雅（個人感覺比 HEXO 好看）

• 容易上手（半小時能搭好整個項目）

• 更好的兼容、擴展 Markdown 語法

• 響應式布局，PC端、手機端

• Google Analytics 集成

• 支持 PWA

安裝vuePress

全局安裝

在此方式中，只是要項目根目錄創(chuàng)建了一個README.md文件，直接執(zhí)行訪問的就是此文件

npm install -g vuepress

# 創(chuàng)建一個 markdown 文件
echo '# Hello VuePress' > README.md

# 開始編寫文檔
vuepress dev

# 構建
vuepress build

在已有項目中安裝

# 安裝為本地依賴項
npm install -D vuepress

# 創(chuàng)建一個 docs 目錄
mkdir docs
# 創(chuàng)建一個 markdown 文件
echo '# Hello VuePress' > docs/README.md

# 開始編寫文檔
npx vuepress dev docs

還可以在package.json中添加js腳本，官網(wǎng)方式不好寫，我們直接用常用的方式

{
 "scripts": {
  "start": "vuepress dev docs",//運行
  "build": "vuepress build docs"//打包
 }
}

使用vuePress搭建靜態(tài)博客

接下來就是配置了，我會直接把我的配置文件貼上來，我們先看結構

博客結構

博客結構分為主頁，導航欄，側邊欄

在.docs目錄下新建一個.vuePress文件，在此注意，搭建博客過程中所有的配置文件以及內(nèi)容文件、主題等都放在此目錄中
在.vuePress文件夾下新建三個文件,public用來放圖片等靜態(tài)文件，theme中放到博客用到的主題，config.js中存放所有的配置

.vuePress
 ---public
 ---theme
 ---config.js

在.docs文件夾下新建幾個模塊文件夾，比如我的就分為學習筆記、問題記錄、關于我等,每個文件夾下再新建md文件

vuePress會自動把README.md設置為導航的主頁，所以如果我們需要主頁就先建README.md,再新建first.md,seconde.md等文件作為側邊欄要顯示的文件

.docs
 ---.vuePress
 ---about
  ---README.md
  ---first.md
  ---seconde.md
 ---study
 ---problem

具體配置

最重要的config.js配置

在此值得注意的是，主題配置不只是簡單的樣式配置等，其中包括導航與側邊欄部分的配置，此處配置參見官網(wǎng)導航欄”默認主題配置“

module.exports = {
 //網(wǎng)站標題
 title: '霍夢林的個人博客',
 // 主頁描述
 description: 'Just playing around',
 // 要部署的倉庫名字
 base: '/',
 dest: './docs/.vuepress/dist',
 // 主題配置
 themeConfig: {
  // 導航配置
  nav: [
   // text為導航欄顯示文字，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'}
  ],
  // 側邊欄配置,側邊欄組，不同（導航）頁面對應不同的側邊欄
  // 以對象形式配置，前邊的key為nav處的路徑,后邊提供一個數(shù)組作為此側邊欄中的子標題
  sidebar: {
   '/problem/': [
    // ''空字符串代表主頁，顯示README.md中的內(nèi)容
    '',
    ['201709', '201709'],//使用數(shù)組為側邊欄起別名，前邊是md名稱，后邊是鏈接顯示的文字
    ['201710', '201710'],
    ],
   '/study/': [
    '',
    ['axios', '1.axios'],
    ['document', '2.document'],
    ]
  },
  // 這是嵌套標題鏈接，自動顯示當前激活（導航）頁面標題的鏈接，即顯示深度（h2-h7的深度）
  sidebarDepth: 1
 }
}

網(wǎng)站主頁配置，即.docs下README.md的配置

---
// 使用默認主題
home: true 
// 主頁頭像
heroImage: /me.jpg
// '開始學習'快捷按鈕
actionText: Get Started →
// 快捷按鈕跳轉路徑
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的博客
### 項目中遇到的問題
### 學習筆記
### csdn
### github

[關于我](/about/)

theme主題配置

項目中只是把vuePress所有的主題配置都拷貝到了本項目中，項目結構如下：

theme
 ---styles
  ---theme.styl
  ---code.styl

 ---Home.vue
 ---Layout.vue

 ---until.js

打包部署

構建

// 此處構建生成路徑為./docs/.vuepress/dist,由config.js中配置： dest: ‘./docs/.vuepress/dist', 
vuepress build docs

導航到構建輸出目錄

// config.js中dest配置的輸出目錄是哪此處就cd進入哪，所有的git操作（包含初始，添加，提交等）都在此目錄下 
cd docs/.vuepress/dist

git init 
git add -A 
git commit -m ‘deploy'

推到你的倉庫

如果是部署到<username>.github.io的主頁上

git push origin master

這時可能出現(xià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中配置腳本運行

npm start 運行項目

npm run build 打包

npm run deploy 部署

以上是“如何使用vuepress搭建靜態(tài)博客”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：如何使用vuepress搭建靜態(tài)博客-創(chuàng)新互聯(lián)
鏈接分享：http://vcdvsql.cn/article38/ddggsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、企業(yè)建站、品牌網(wǎng)站建設、企業(yè)網(wǎng)站制作、面包屑導航、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)