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>
複製代碼