从头到尾搭建一个带评论功能的VuePress博客

2023-11-07 23:32:35

前言

近年来，随着博客平台的兴起，越来越多的人开始使用博客来分享自己的想法和经验。如果您也想搭建一个属于自己的博客，那么VuePress是一个非常不错的选择。VuePress是一个基于Vue.js的静态站点生成器，它简单易用，功能强大，非常适合用来搭建博客。

安装

在开始搭建博客之前，我们需要先安装必要的软件。

Node.js
VuePress
Valine

您可以通过以下命令来安装这些软件：

npm install -g vuepress valine

创建博客

安装好必要软件后，就可以开始创建博客了。

首先，我们需要创建一个博客文件夹。该文件夹适用于编写文档用的，其中的每一个 markdown 文件（.md）都是可以看做一篇博客。当然最好在 docs 下面为各主题都创建一个单独的目录。每一个路径中默认的访问文件都是 README.md，后面对于 README.md 文件的路径配置可以省略文件名。

mkdir my-blog
cd my-blog

然后，我们需要初始化一个 VuePress 项目。

vuepress init my-blog

选择主题

VuePress提供了很多好看的主题，您可以根据自己的喜好选择一个。

cd my-blog
npm install vuepress-theme-xxx

配置修改

选择好主题后，我们需要对配置文件进行一些修改。

cd my-blog
vim .vuepress/config.js

在配置文件中，我们需要修改以下几项：

theme：设置主题
title：设置博客标题
description：设置博客
plugins：添加评论系统插件

module.exports = {
  theme: 'xxx',
  title: '我的博客',
  description: '这是我的博客',
  plugins: [
    '@vuepress/plugin-back-to-top',
    '@vuepress/plugin-medium-zoom',
    'vuepress-plugin-valine'
  ]
}

评论系统接入

为了让博客支持评论功能，我们需要接入评论系统。这里我们使用 Valine 作为评论系统。

首先，我们需要注册一个 Valine 账号，然后创建一个新的应用。

npm install valine

module.exports = {
  plugins: [
    '@vuepress/plugin-back-to-top',
    '@vuepress/plugin-medium-zoom',
    [
      'valine',
      {
        appId: 'xxx',
        appKey: 'xxx'
      }
    ]
  ]
}