使用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 class="comment">
          <span class="leancloud-visitors" data-flag-title="Your Article Title">
              <em class="post-meta-item-text">阅读量： </em>
              <i class="leancloud-visitors-count"></i>
          </span>
          <div id="vcomments"></div>
      </div>
  </template>
  
  <script>
  import Valine from 'valine'
  export default {
      name: 'Valine',
      mounted() {
          if (typeof window !== 'undefined') {
          	document.getElementsByClassName('leancloud-visitors')[0].id = window.location.pathname;
              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: '请输入留言内容',
              visitor: true // 开启阅读量
          })
      }
  }
  </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/