使用vuepress搭建個人博客必備指南

vuepress官網

• https://www.vuepress.cn/

基本構建

安裝

• yarn global add vuepress 或者：npm install -g vuepress

新建README.md文件

• 在根目錄下新建一個markdown 文件

開發環境編譯

• vuepress dev .

構建打包發佈

• vuepress build .

評論系統

• https://valine.js.org/
• Valine - 一款快速、簡潔且高效的無後端評論系統。

準備工作

1. 進入https://leancloud.cn/註冊
2. 創建應用：填寫應用名稱，選擇 開發版
3. 然後點擊設置 —> 應用 Keys —> 獲取AppID和AppKeys

組件化使用

• 在.vuepress/components/Valine.vue新建Valine組件

  <template>
      <div id="vcomments">
          <h2>awqerqwer</h2>
      </div>
  </template>
  
  <script>
  import Valine from 'valine'
  export default {
      name: 'Valine',
      mounted() {
          if (typeof window !== 'undefined') {
              this.window = window;
              window.AV = require('leancloud-storage')
          }
          new Valine({
              el: '#vcomments',
              appId: 'wMBbidT7ISeJL******lLwg7-gzGzoHsz',
              appKey: '9j2BKgX6us8******f4J81SIm',
              notify: false,
              verify: false,
              avatar: 'yw00yw',
              placeholder: '請輸入留言內容'
          })
      }
  }
  </script>
  
  <style lang="scss">
      #vcomments {
          margin-top: 60px;
      }
  </style>
  

• 在需要的.vue或者.md文件中使用即可

  <Valine />

全局使用

• 在theme/themeReco.js中添加如下配置即可：

  valineConfig: {
  	appId:"wMBbidT7ISeJL******lLwg7-gzGzoHsz",
  	appKey: "9j2BKgX6us8******f4J81SIm"
  },
  

vuepress-theme-reco

• https://vuepress-theme-reco.recoluan.com/
• 一款簡潔而優雅的 vuepress 博客 & 文檔 主題。

使用

• 安裝腳手架：yarn global add @vuepress-reco/theme-cli
• 初始化：theme-cli init my-blog
• 進入目錄：cd my-blog
• 安裝依賴：yarn install
• 運行：yarn dev
• 打包：yarn build

最終效果

• http://meiyangyang.3vhost.net/