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

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