基於Vue.js驅動的Vuepress搭建靜態博客

github倉庫地址：https://github.com/18518300669/JackTeslaBlog

VuePress中文網：http://caibaojian.com/vuepress/guide/

介紹

VuePress 由兩部分組成：一個以Vue 驅動的主題系統的簡約靜態網站生成工具，和一個爲編寫技術文檔而優化的默認主題。它是爲了支持 Vue 子項目的文檔需求而創建的。

由 VuePress 生成的每個頁面，都具有相應的預渲染靜態 HTML，它們能提供出色的加載性能，並且對 SEO 友好。然而，頁面加載之後，Vue 就會將這些靜態內容，接管爲完整的單頁面應用程序(SPA)。當用戶在瀏覽站點時，可以按需加載其他頁面。

運行原理：VuePress 網站實際上是由 Vue, Vue Router 和 webpack 驅動的單頁面應用程序。

類似的生成框架

React驅動GatsbyJs

Vue.js驅動Gridsome

特性

• 內置 markdown 擴展，針對技術文檔進行了優化
• 能夠利用內嵌在 markdown 文件中的 Vue 代碼
• 以 Vue 驅動的自定義主題系統
• PWA 支持
• Google Analytics 集成
• 一個默認主題：
  • 響應式佈局
  • 可選的主頁
  • 簡單、開箱即用、基於標題的搜索功能
  • 可定製的導航欄和側邊欄
  • 自動生成的 GitHub 鏈接和頁面編輯鏈接

開始

#初始化

// 在github上新建一個倉庫，並克隆到本地
git clone https://github.com/18518300669/JackTeslaBlog.git

// 進入項目
cd JackTeslaBlog

//npm 初始化, 按照提示回車
npm init

//安裝 vuepress
npm i vuepress -D

//安裝 gh-pages
npm i gh-pages -D

//創建一個 docs 目錄
mkdir docs

//創建一個 markdown 文件
echo '# Hello VuePress' > docs/README.md

#npm 腳本

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
  }
}

#運行本地開發環境

npm run dev  //訪問 localhost:8080 ， 已經成功開啓

#生成靜態資源

//執行下面的命令，生成靜態資源.
npm run build

默認情況下，構建的文件會位於 docs/.vuepress/dist 中，該文件可以通過 docs/.vuepress/config.js 中的 dest 字段進行配置。

#公共文件

創建 docs/.vuepress/public 用於存放公共文件
我放了一個首頁的umbrella.jpeg

#首頁編寫

docs/README.md爲首頁， 修改代碼爲：

---
home: true
heroImage: /umbrella.jpeg
footer: 世界再大，大不過你的好奇心吶～
---

目錄結構

.
├─ docs
│  ├─ README.md	       //主頁
│  └─ .vuepress
│  │  └─ components    //全局vue模版
│  │  └─ dist          //構建產生目錄
│  │  └─ public        //存放靜態文件
│  │  └─ config.js	   //配置
│  └─ React            //一級目錄
│  └─ Stack            //一級目錄
│  └─ ...              //一級目錄
└─ package.json

配置

#基礎配置

創建 docs/.vuepress/config.js， 並進行簡單配置

var config = {
    head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }]
      ],
      
    // 靜態網站部署的目錄
    base: '/JackTesla/',
    
    // 網站標題
    title: 'JackTesla 的博客',
  
    // <meta name="description" content="...">
    description: '最精彩的，其實就是世界本身！', 
  
    markdown: {//markdown配置項
      
      // 顯示代碼行號
      lineNumbers: true
    },
    themeConfig: {

        // 項目的 github 地址
        repo: 'https://github.com/18518300669/JackTeslaBlog.git',
    
        // github 地址的鏈接名
        repoLabel: 'gitHub',
    
        // 配置導航欄
        nav,
        sidebar
      },
  }
  
  module.exports = config
  

​
var config = {
    head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }]
      ],
      
    // 靜態網站部署的目錄
    base: '/JackTesla/',
    
    // 網站標題
    title: 'Dr-博客',
  
    // <meta name="description" content="...">
    description: '最精彩的，其實就是世界本身！', 
  
    markdown: {//markdown配置項
      
      // 顯示代碼行號
      lineNumbers: true
    },
    themeConfig: {

        // 項目的 github 地址
        repo: 'https://github.com/18518300669/JackTeslaBlog.git',
    
        // github 地址的鏈接名
        repoLabel: 'gitHub',
    
        // 配置導航欄
        nav,
        sidebar
      },
  }
  
  module.exports = config
  

​

#頭部導航欄配置

使用默認主題配置導航欄

//.vuepress/config.js：
const nav = [
     {
        text: '技術篇',
        items: [
          { text: 'Blog', link: '/Stack/2019.1.2'},
          { text: 'React', link: '/React/router' },
        ]
      },
      {
        text: '關於作者',
        link: '/Readme/index'
      },
  ]
  
//在config的themeConfig中配置
const config = {
...
  themeConfig: {
	...
    // 配置導航欄
    nav,
  },
}

module.exports = config

#側邊導航欄配置

//.vuepress/config.js：
const sidebar = {
    '/Stack/': [
        {
            title: '博客',
            children: [
                '2019.1.2'
            ]
        },
       
    ],
    '/React/': [
        {
            title: 'React',
            children: [
                'router',
                'reactRedux',
            ]
        },
    ]
}
//在config的themeConfig中配置
const config = {
...
  themeConfig: {
	...
    // 配置導航欄
    sidebar,
  },
}

module.exports = config

#評論功能

我們使用 valine 來實現評論功能：

Valine
一款快速、簡潔且高效的無後端評論系統。

請先登錄官網 Valine官網，註冊後食用。獲取APP ID 和 APP Key

#安裝 Valine

//Install leancloud's js-sdk
npm install leancloud-storage --save

//Install valine
npm install valine --save

#註冊 vuepress 全局組件

創建 .vuepress/components/Valine.vue

(在components下注冊的vue可供全局使用，文件名爲組件名）

<template>
  <div> 
    <div id="vcomments"></div>
  </div>

</template>

<script>
export default {
  name: 'Valine',
  mounted: function(){
    // require window 
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      this.window = window
      window.AV = require('leancloud-storage')
      
    }
     
    new Valine({
      el: '#vcomments' ,
      appId: '',// your appId
      appKey: '', // your appKey
      notify:false, 
      verify:false, 
      avatar:'mm', 
      placeholder: 'Please enter comments！' ,
      path:window.location.pathname,//配置path地址，否則評論混亂
    });
  },
}
</script>
<style>
#vcomments{
  margin-top:100px;
}
</style>

#使用 Valine

在config.js配置

plugins: [
  [
    '@vuepress/register-components',
     {
       componentsDir: './components'
     }
  ]
]

只需要在 markdown 中調用即可

<Valine></Valine>

頁面展示：

#部署

使用 gh-pages 進行項目部署

npm run deploy

過幾分鐘後，訪問 https://18518300669.github.io/JackTeslaBlog/， 即看到在外網成功部署的靜態博客

VuePreaa官方提供的部署方法

---

Vuepress官網 Valine官網