正文

Vue3+VuePress快速搭建个人博客全攻略，从零开始到发布上线

/0 浏览量
1025

前言

在这个信息爆炸的时代，拥有一个个人博客可以帮助你记录学习心得、分享技术见解，甚至成为个人品牌的一部分。Vue3 和 VuePress 是目前流行的前端技术和静态站点生成器，结合两者可以快速搭建一个功能丰富、响应式的个人博客。本文将带你从零开始，一步步搭建并发布你的个人博客。

环境准备

1. 安装 Node.js

VuePress 需要 Node.js 环境，首先确保你的计算机上安装了 Node.js。你可以从 Node.js 官网 下载并安装。

2. 安装 Vue CLI

Vue CLI 是一个官方提供的前端项目脚手架，用于快速搭建 Vue 项目。通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

创建 VuePress 项目

1. 初始化项目

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

vue create my-blog

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

2. 进入项目目录

进入项目目录：

cd my-blog

3. 安装 VuePress

在项目目录下安装 VuePress：

npm install -D vuepress@next

配置 VuePress

1. 创建配置文件

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

2. 配置基本参数

在 config.js 中配置你的博客基本参数，例如：

module.exports = {
  title: '我的博客',
  description: '一个关于前端技术的个人博客',
  base: '/my-blog/',
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
  ],
};

3. 配置主题

VuePress 支持多种主题，你可以选择一个喜欢的主题，例如 VuePress Theme Hope。安装主题并配置：

npm install -D vuepress-theme-hope

在 config.js 中配置主题：

module.exports = {
  // ...其他配置
  theme: 'hope',
};

添加博客内容

1. 创建文章

在项目根目录下创建一个名为 docs 的文件夹，用于存放博客文章。在 docs 文件夹下创建一个名为 README.md 的文件，作为你的首页。

---
title: 首页
---

这里是你的博客首页。

2. 编写文章

在 docs 文件夹下创建新的 Markdown 文件，例如 first-article.md，用于编写你的第一篇文章。

---
title: 第一篇文章
date: 2023-04-01
---

这里是你的第一篇文章内容。

预览博客

1. 本地预览

在项目目录下运行以下命令预览博客：

npm run dev

打开浏览器访问 http://localhost:8080，即可看到你的博客。

2. 修改配置

根据你的需求修改 config.js 和文章配置，调整博客布局和样式。

发布博客

1. 构建静态站点

在项目目录下运行以下命令构建静态站点：

npm run build

构建完成后，会在项目根目录下生成一个名为 .vuepress/dist 的文件夹，其中包含了你的博客静态文件。

2. 选择托管平台

选择一个合适的托管平台，例如 GitHub Pages、GitLab Pages 或 Vercel。以 GitHub Pages 为例，你需要创建一个名为 your-github-username.github.io 的仓库，并将 .vuepress/dist 文件夹中的内容上传到该仓库。

3. 配置域名

如果你有自己的域名，可以将其解析到托管平台的域名。

总结

通过以上步骤，你已经成功搭建并发布了你的个人博客。在这个过程中，你不仅学习了 Vue3 和 VuePress，还了解了静态站点生成器的使用方法。希望这篇文章能帮助你快速上手，打造一个属于自己的博客。

-- 展开阅读全文 --