正文

从零开始，Vue3+Vuepress轻松搭建个人博客全攻略

/0 浏览量
0815

引言

在数字化时代，个人博客已经成为许多人展示自我、分享知识和交流思想的平台。Vue3和Vuepress作为当前流行的前端技术和静态站点生成器，为搭建个人博客提供了强大的工具支持。本文将从零开始，详细讲解如何使用Vue3和Vuepress搭建一个功能完善、风格独特的个人博客。

环境准备

安装Node.js

首先，确保你的电脑上安装了Node.js和npm（Node.js包管理器）。你可以从Node.js官网下载并安装。

安装Vue CLI

Vue CLI是一个官方命令行工具，用于快速搭建Vue.js项目。打开命令行工具，执行以下命令安装：

npm install -g @vue/cli

创建Vue3项目

初始化项目

使用Vue CLI创建一个新的Vue3项目：

vue create my-blog

选择默认配置或手动选择配置项。

配置项目

进入项目目录，修改vue.config.js文件，配置你的博客项目：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null
  }
}

安装Vuepress

安装Vuepress

在项目根目录下，安装Vuepress：

npm install -D vuepress@next

配置Vuepress

在项目根目录下，创建一个名为.vuepress的文件夹，并在其中创建一个名为config.js的配置文件：

module.exports = {
  base: '/',
  title: '我的博客',
  description: '一个Vue3+Vuepress搭建的个人博客',
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ],
  themeConfig: {
    logo: '/logo.png',
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: '/about/' }
    ],
    sidebar: [
      {
        title: '分类',
        children: [
          '/categories/前端开发/',
          '/categories/生活感悟/',
          '/categories/其他/'
        ]
      }
    ]
  }
}

搭建博客结构

创建博客文章

在项目根目录下，创建一个名为docs的文件夹，用于存放博客文章。例如，创建一个名为about.md的文件，用于展示博客简介：

---
title: 关于
date: 2021-09-01
---

这是一个关于我的个人博客的简介。

添加分类和标签

在.vuepress文件夹下创建一个名为categories的文件夹，用于存放分类页面。例如，创建一个名为前端开发.md的文件，用于展示前端开发分类下的文章：

---
title: 前端开发
date: 2021-09-01
---

这是一个关于前端开发分类的文章列表。

部署博客

本地预览

在项目根目录下，执行以下命令预览博客：

npm run serve

访问http://localhost:8080预览你的博客。

部署到GitHub Pages

  1. 在GitHub上创建一个新的仓库，仓库名为你的GitHub用户名.github.io。
  2. 将本地博客项目中的docs文件夹内容提交到GitHub仓库。
  3. 在GitHub仓库的设置中，将GitHub Pages设置为使用master分支。

总结

通过本文的讲解，相信你已经掌握了使用Vue3和Vuepress搭建个人博客的方法。现在，你可以开始创作你的博客文章，分享你的知识和见解。祝你搭建成功，创作愉快！

-- 展开阅读全文 --