使用基于Vue.js驱动的Vuepress搭建静态博客

最新推荐文章于 2025-04-20 19:15:16 发布

原创最新推荐文章于 2025-04-20 19:15:16 发布 · 置顶 · 841 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#blog #vue #js #pwa #vuepress

blog 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用VuePress创建并部署个人技术博客，包括环境搭建、配置、主题定制及评论功能实现。

[github仓库地址](https://github.com/18518300669/JackTeslaBlog)

[博客demo地址](https://18518300669.github.io/JackTeslaBlog/)

介绍

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。

类似的生成框架

React驱动[GatsbyJs](https://www.gatsbyjs.org/)

Vue.js驱动[Gridsome](https://gridsome.org/)

开始

初始化

// 在github上新建一个仓库，并克隆到本地
git clone https://github.com/18518300669/JackTeslaBlog.git

// 进入项目
cd JackTeslaBlog

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

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

运行本地开发环境

npm run dev

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

生成静态资源

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

npm run build

默认情况下，构建的文件会位于 docs/.vuepress/dist 中，该文件可以通过 docs/.vuepress/config.js 中的 dest 字段进行配置。

公共文件

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

我放了一个首页的umbrella.jpeg

首页编写

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

---
home: true
heroImage: /umbrella.jpeg
footer: 世界再大，大不过你的好奇心呐～
---

目录结构

.
├─ docs
│ ├─ README.md     //主页
│ └─ .vuepress
│ │ └─ components //全局vue模版
│ │ └─ dist       //构建产生目录
│ │ └─ public     //存放静态文件
│ │ └─ config.js  //配置
│ └─ React         //一级目录
│ └─ Stack         //一级目录
│ └─ ...           //一级目录
└─ package.json

配置

基础配置

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

var config = {
    head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }]
    ],

    // 静态网站部署的目录
    base: '/JackTesla/',

    // 网站标题
    title: 'JackTesla 的博客',

    // <meta name="description" content="...">
    description: '最精彩的，其实就是世界本身！',

    markdown: {//markdown配置项
        // 显示代码行号
        lineNumbers: true
    },

    themeConfig: {
        // 项目的 github 地址
        repo: 'https://github.com/18518300669/JackTeslaBlog.git',
        // github 地址的链接名
        repoLabel: 'gitHub',
        // 配置导航栏
        nav,
        sidebar
    },
}

module.exports = config

[更多配置项](https://www.vuepress.cn/config/#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE-basic-config)

头部导航栏配置

使用默认主题配置导航栏

//.vuepress/config.js：

const nav = [
    {
        text: '技术篇',
        items: [
            { text: 'Blog', link: '/Stack/2019.1.2'},
            { text: 'React', link: '/React/router' },
        ]
    },
    {
        text: '关于作者',
        link: '/Readme/index'
    },
]

//在config的themeConfig中配置
const config = {
...
    themeConfig: {
      ...
    // 配置导航栏
    nav,
    },
}

module.exports = config

侧边导航栏配置

//.vuepress/config.js：

const sidebar = {
    '/Stack/': [
        {
            title: '博客',
            children: [
                '2019.1.2'
            ]
        },
    ],
    '/React/': [
        {
            title: 'React',
            children: [
                'router',
                'reactRedux',
            ]
        },
    ]
}

//在config的themeConfig中配置
const config = {
...
    themeConfig: {
      ...
      // 配置导航栏
      sidebar,
    },
}

module.exports = config

评论功能

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

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

请先登录官网[ Valine官网](https://valine.js.org/quickstart.html)，注册后食用。获取APP ID 和 APP Key

安装 Valine

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

//Install valine
npm install valine --save

注册 vuepress 全局组件

创建 .vuepress/components/Valine.vue

(在components下注册的vue可供全局使用，文件名为组件名）

<template>
    <div>
        <div id="vcomments"></div>
    </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: 'Please enter comments！' ,
            path:window.location.pathname,//配置path地址，否则评论混乱
        });
    },
}
</script>

<style>
    #vcomments{
        margin-top:100px;
    }
</style>