Vuepress 搭建带评论功能的静态博客

vuepress 是 Vue 驱动的静态站点生成工具

• 本文仅介绍，搭建静态博客的过程，具体教程及文档请点击进入 vuepress中文网

• 点击进入使用 vuepress 部署到 github 的博客

• 点击查看项目代码

vuepress初始化

下面初始化

# 将 github 新建立的仓库克隆到本地
git clone git@github.com:zhb333/readme-blog.git

# 进入项目
cd readme-blog

# 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 脚本

而后，给 package.json 添加一些 scripts 脚本：

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

运行本地开发环境

运行 vurepress 的本地开发环境

npm run dev
复制代码

访问 localhost:8080 ， 已经成功开启

基础配置

生成静态资源

执行下面的命令，生成静态资源

npm run build
复制代码

默认状况下，构建的文件会位于 docs/.vuepress/dist 中，该文件能够经过 docs/.vuepress/config.js 中的 dest 字段进行配置。

配置

建立 docs/.vuepress/config.js， 并进行简单配置

var config = {

  // 静态网站部署的目录
  base: '/readme-blog/',

  // 网站标题
  title: '标 の 博客',

  // <meta name="description" content="...">
  description: '种一棵树最好的时间是十年前，其次是如今', 

  markdown: {
    
    // 显示代码行号
    lineNumbers: true
  }
}

module.exports = config
复制代码

博客首页

公共文件

建立 docs/.vuepress/public 用于存放公共文件

我在 public/ , 存在了 favicon.ico 图标， 以及 zlx.jpg 首页的头像图片

简单的首页编写

将 docs/README.md设置为首页， 修改代码为：

---
home: true
heroImage: /zlx.jpg
footer: MIT Licensed | Copyright © 2018 ZhangHuanbiao ---
复制代码

设置网站 ico 图标

配置网站的 ico 图标， 修改 .vuepress/config.js：

const config = {
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }]
  ]
}
复制代码

导航栏

配置导航栏

使用 vuepress 的默认主题配置导航栏 .vuepress/config.js：

const nav = [
  {
    text: '前端栈',
    items: [
      { text: 'Vue', link: '/WEB/Vue/vuepress-blog' },
      { text: 'React', link: '/WEB/React/react-router' }
    ]
  }
]

const config = {
  themeConfig: {

    // 项目的 github 地址
    repo: 'zhb333/readme-blog',

    // github 地址的连接名
    repoLabel: '代码',

    // 配置导航栏
    nav,
  },
}
复制代码

建立有效的导航资源

为了使得导航栏的连接点击有效， 咱们建立两个文件：

docs/WEB/Vue/vuepress-blog.md

# 使用`vuepress`搭建静态博客

## vuepress初始化

## 基础配置

## 博客首页

## 导航栏
复制代码

docs/WEB/React/react-router.md

# react-router
复制代码

侧边栏

侧边栏配置

使用 vuepress 的默认主题配置侧边栏 .vuepress/config.js：

const sidebar = {
  '/WEB/': [
    {
      title: 'Vue',
      children: [
        'Vue/vuepress-blog'
      ]
    },

    {
      title: 'React',
      children: [
        'React/react-router'
      ]
    }
  ]
}

const nav = [
  {
    text: '前端栈',
    items: [
      { text: 'Vue', link: '/WEB/' + sidebar['/WEB/'][0]['children'][0] },
      { text: 'React', link: '/WEB/' + sidebar['/WEB/'][1]['children'][0] }
    ]
  }
]

var config = {
  themeConfig: {

    // 当前 markdown 的 github 代码连接
    editLinks: true,

    // 连接显示的文本
    editLinkText: '查看原文|编辑此页',

    nav,
    sidebar,
  },
}
复制代码

侧边栏效果

访问： http://localhost:8080/readme-blog/WEB/Vue/vuepress-blog.html， 能够看到侧边栏已经生成

将静态博客网站部署到外网

使用 gh-pages 进行项目部署

npm run deploy
复制代码

过几分钟后，访问 zhb333.github.io/readme-blog…， 即可以看到在外网成功部署的静态博客

评论功能

咱们使用 valine 来实现评论功能：

Valine - 一款快速、简洁且高效的无后端评论系统。

点击进入 Valine官网 ，须要先注册才能食用

安装 Valine

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

# Install valine
npm install valine --save
复制代码

注册 vuepress 全局组件

建立 .vuepress/components/Valine.vue

<template>
  <div id="vcomments"></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: 'just go go' }); }, } </script>
复制代码

使用 Valine

只须要在 markdown 中调用便可

<Valine></Valine>
复制代码