前言
VuePress官方表示：VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。
流程
简单记录一下如何使用 官方表示：VuePress 搭建一个拥有独立服务器和数据库的个人博客。
我的准备工作
- 上阿里云购买一个ECS服务器，月费在几十元，
- 上阿里云域名页购买一个域名，年费在几十元至几百元不等。
操作流程
参照官方文档进行操作。
从上图可知，这里需要对如何安装服务器软件nginx，VuePress，以及使用markdown有一定的了解。
VuePress的基础配置
VuePress 提供了一个默认主题，官方文档网站就是使用的这个默认主题。
不同的主题提供了不同的网站外观。不同的主题实际上就是不同的网站。
使用不同的主题的方式不是安装什么插件，而是从头创建一个使用该主题的网站。
这里选择使用VuePress Theme Hope 项目（主题）。
对博客（网页）进行配置的方式有俩种。
一是在VuePress项目的配置文件中进行配置。二是在markdown文件中对当前网页进行单独的配置。
博客配置文件
VuePress项目中.vuepress/config.ts (或 .vuepress/config.js) 就是博客的配置文件。
config.ts 内容示例：
import { defineUserConfig } from "vuepress";
import theme from "./theme.js";
export default defineUserConfig({
base: "/",
lang: "en-US",
title: "走俩步，退一步",//网站标题，默认显示在主页左上角
description: "A blog demo for vuepress-theme-hope",
theme,//主题配置，内容参见 theme.js文件
});config.ts文件导入了 theme.js的内容，其中对博客的导航栏，侧面栏等内容进行了配置。
theme.js 部分内容示例：
import { hopeTheme } from "vuepress-theme-hope";
import navbar from "./navbar.js";
import sidebar from "./sidebar.js";
export default hopeTheme({
// 网站部署域名，用于生成正确的页面链接
hostname: "https://jty.life",
author: {
name: "Jty_", // 作者名称
url: "https://jty.life" // 作者个人主页链接
},
// 站点Logo路径配置,基于 .vuepress/public 文件夹的绝对路径
logo: "avatar_jty.png",
// 文档源码目录位置
docsDir: "src",
// 导航栏配置（引用外部navbar.js文件）
navbar,
// 侧边栏配置（引用外部sidebar.js文件）
sidebar,
// 页脚内容配置
footer: "Default footer",
// 是否显示页脚
displayFooter: true,
// 页脚内容配置---备案信息设置
copyright: `
<div style="text-align: center; padding: 20px 0;">
<span>© 2023 走俩步，退一步</span>
<br>
<a href="http://beian.miit.gov.cn/" target="_blank" style="margin-right: 15px;">
ICP 备案号：浙ICP备2025xxxx号
</a>
<img src="/ga.png" alt="公安备案图标">
<a href="https://beian.mps.gov.cn/" target="_blank">
公安备案号：3307830200000
</a>
</div>
`,
blog: {
description: "A programmer",
intro: "/intro.html",
medias: {
Baidu: "https://example.com",
BiliBili: "https://example.com",
QQ: "https://example.com",
Reddit: "https://example.com",
Twitter: "https://example.com",
Wechat: "https://example.com",
Weibo: "https://example.com",
},
},
plugins: {
blog: true, // 启用博客功能（文章列表、分类、标签等）
components: { // 注册全局组件
components: ["Badge", "VPCard"],
},
icon: { //设置 FontAwesome 6 的默认图标前缀（如：`<i class="fa6-solid:home"></i>`）
prefix: "fa6-solid:",
},
},
});博客主页的文件
博客主页的markdown文件
---
home: true
layout: BlogHome
icon: house
title: Jty_ Home
heroText: 走俩步，退一步
heroFullScreen: false
bgImage: /jtybackground/pexels-ekamelev.jpg
projects:
- icon: folder-open
name: project name
desc: 我的工作内容
- icon: link
name: link name
desc: 我的分享
- icon: book
name: book name
desc: 我的文字
---
This is a blog home page demo.
To use this layout, you should set both `layout: BlogHome` and `home: true` in the page front matter.
For related configuration docs, please see [blog homepage](https://blog/home.html).开始第一篇blog
你需要一个Markdown文件来写一篇blog。Markdown的语法就不说了。
Markdown 文件可以包含一个YAML格式的 Frontmatter来对页面内容进行一些特殊的设置 。
Frontmatter 必须在 Markdown 文件的顶部，并且被包裹在一对三短划线中间。
下面是一个基本的示例：
lang: zh-CN
title: 页面的标题
description: 页面的描述你可以通过 Frontmatter 来覆盖当前页面的 lang, title, description 等属性。
因此，你可以把 Frontmatter 当作页面级作用域的配置。
VuePress 有一些内置支持的 Frontmatter 字段，而你使用的主题也可能有它自己的特殊 Frontmatter 。
比如，theme-hope主题 Frontmatter 配置
这里给出一篇关于自我介绍的markdown文章：
markdown文件的内容如下：
---
#通用配置
title: 关于我
description: 页面的描述
data: 2025-04-08
lang: zh-CN
icon: circle-info
cover: /assets/images/cover3.jpg
category:
- me
tag:
- life
---
# Intro Page
### **个人介绍**
#### **基本信息**
- **姓名**：JTY_
- **职业**：全栈开发工程师
- **工作年限**：5年
- **技术栈**：JavaScript, TypeScript, Vue.js, Node.js, Python
- **联系方式**：994371870@qq.com | [GitHub](https://github.com/xxx)
#### **技术背景**
我是一名热爱技术的全栈开发工程师，专注于构建高效、可扩展的Web应用。 有人说我是“前端的美容师，后端的搬运工”，其实我更愿意称自己为“代码界的魔术师”——毕竟，把一堆bug变成功能，也是一种艺术，对吧？
---
#### **个人特点**
- 别人追剧，我追技术更新；别人刷抖音，我刷GitHub。
- 和产品经理的对话通常是：“这个需求能做吗？”“能，但得加钱。”
- 我的座右铭是：“没有bug是解决不了的，如果有，那就重启。”
---
### **结语**
我始终相信技术的力量可以改变世界，期待与志同道合的伙伴一起，用代码创造更多可能性。如果你对我的经历感兴趣，欢迎联系我！
当然，如果你只是想找我修电脑，那还是算了吧，我是程序员，不是修电脑的。
---