VuePress-基於vue-ssr的靜態網站生器初體驗

狗子略略略發表於2018-04-16
Vue網站

VuePress

昨天在微博上看到尤大神新發布的基於vue-ssr靜態網站生成器VuePress，剛剛通過Hexo搭建部落格的我又忍不住去嘗試了下。。

參考官方文件可知該專案有一下特點：

  • 內建markdown（基礎功能）
  • 支援PWA
  • 整合了Google Analytics
  • 擁有一套預設主題（風格與(官方文件)[https://vuepress.vuejs.org]一致）
  • 自動生成的GitHub連結和頁面編輯連結

快速上手

安裝

初始化專案

npm init -y
複製程式碼

安裝 vuepress，也可以全域性安裝

npm install -D vuepress
複製程式碼

建立文章資料夾

mkdir docs
複製程式碼

配置package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
複製程式碼

書寫

直接在docs資料夾下新建markdown檔案即可編輯書寫文章

預覽

npm run docs:dev
複製程式碼

開啟 http://localhost:8080/

構建

npm run docs:build
複製程式碼

生成的檔案預設會在 .vuepress/dist 資料夾下

自定義配置

可以將配置檔案寫到 .vuepress/config.js 中

新增頂部導航

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}
複製程式碼

新增側邊欄

module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}
複製程式碼

同時支援分組新增側邊欄 eg:

module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',
        collapsable: false,
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}
複製程式碼

自定義主題

可以在github上覆制官方的主題原始碼到.vuepress/theme中，然後使用

vuepress eject 目標路徑
複製程式碼

命令自定義主題

部署到github上，生成專屬部落格

在 .vuepress/config.js 中設定基礎路徑

即如果你的github連線為：https://github.com/foo/bar

你的主頁為: https://foo.github.io/bar/

那麼你的基礎路徑設定為：bar即可

最後構建檔案之後，進入到生成檔案路徑

cd docs/.vuepress/dist
複製程式碼

將dist資料夾中的程式碼提交到對應的git倉庫就好

下面訪問你的地址就好了：https://xxx.github.io

相關文章