0费用使用vite搭建个人博客网站---1

你不会困
684 阅读4分钟

搭建个人博客网站，可以使用vitepress去生成，

VitePress 是一款由 Vite 支持的轻量级文档框架，它灵感来源于 VuePress，与 VuePress 类似，使用 Vue 和 Markdown 来写博客或者文档。VitePress 具有快速热重载、快速冷启动、且支持 Vue 3.0 的特性等优势。

要使用 VitePress 搭建你的个人网站，你可以按照以下步骤进行：

1. 安装 VitePress

  • 创建一个新的项目目录，在命令行中输入以下命令：
mkdir my-website
cd my-website
  • 在项目目录中初始化一个新的npm项目，并安装 VitePress：
npm init -y
npm install -D vitepress

2. 添加你的第一个页面

在 my-website 目录中，创建一个 docs 文件夹。这将会是你网站的内容目录。然后，添加index.md

这里建议使用模板去搭建，从0搭建比较费时费力，当然也可以从github去拉取一个开源的帮你配置好的

这个是拉取别人的项目试着修改配置然后进行打包

https://gitee.com/lihuikun1/lhk---personal-blog

主要看vitepress的配置

下面是如何使用 VitePress 的 .vitepress/config.js 文件来为您的个人站点提供基本配置：

  • logo: 网站 Logo 的路径。它可以是站点根目录下的相对路径，或是一个完整的 URL。

  • navbar: 一个对象数组，用于定义导航栏链接。每个对象可以包括 text（显示的文本）和 link（链接指向的路径）属性。

  • sidebar: 侧边导航的配置。它可以是一个数组，定义全局的侧边导航结构，或是一个对象，根据不同的路径指定不同的侧边导航。

  • outline: 控制右侧大纲的显示。可以设置为 false 来完全禁用，或者提供一个含有 level 和 label 的对象来自定义。

更多配置

  • lastUpdated: 布尔值，控制是否在页面底部显示最后更新时间。
  • footer: 页脚的配置。可以包括自定义的版权声明或任意 HTML。
  • algolia: 用于配置 Algolia 搜索的选项。
  • editLink: 提供在页脚显示“编辑此页”链接的配置，通常包括要跳转的 Git 仓库链接模板。
  • socialLinks: 社交链接配置，用于在导航栏或页脚显示社交媒体链接。
  • head: 用于自定义页面 <head> 标签的内容，例如添加自定义的 <meta> 标签，<link> 标签等。
// .vitepress/config.js

import { defineConfig } from 'vitepress'

export default defineConfig({
  base: '/', // 如果你的站点是部署到非根URL，你需要设置这里
  lang: 'en-US', // 网站语言
  title: 'My VitePress Site', // 网站标题
  description: 'Just playing around.', // 网站描述
  lastUpdated: true, // 显示文件最后更新时间
  themeConfig: {
    // 网站 logo
    logo: '/path-to-your-logo.png',
    // 导航栏配置
    nav: [
      { text: 'Home', link: '/' },
      { text: 'About', link: '/about/' },
      { text: 'Contact', link: '/contact/' }
      // 更多导航项
    ],
    // 侧边栏配置
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          children: [
            '/guide/introduction.md',
            '/guide/installation.md'
            // 更多文档页
          ]
        }
      ],
      '/reference/': [
        {
          text: 'Reference',
          children: [
            '/reference/cli.md',
            '/reference/config.md'
            // 更多参考页
          ]
        }
      ],
      // 侧边栏可以被禁用
      '/': false
    },
    // 页脚
    footer: {
      message: 'Released under the MIT License.',
      // 版权声明
      copyright: `Copyright © ${new Date().getFullYear()} Your Name`
    },
    // 开启页面编辑链接
    editLink: {
      pattern: 'https://github.com/username/repo/edit/main/docs/:path',
      text: 'Edit this page on GitHub'
    },
    // Algolia 搜索配置
    algolia: {
      apiKey: 'your_api_key',
      indexName: 'your_index_name'
    },
    // 自定义元数据
    head: [
      // 添加自定义图标
      ['link', { rel: 'icon', href: '/favicon.ico' }],
      // 更多 head 标签配置
    ],
    lastUpdatedText: 'Last Updated', // 最后更新时间文本
    docFooter: {
      prev: 'Previous Page',
      next: 'Next Page'
    },
    // 社交链接配置
    socialLinks: [
      { icon: 'github', link: 'https://github.com/username' },
      { icon: 'twitter', link: 'https://twitter.com/username' }
      // 更多社交图标和链接
    ]
  }
})

请注意，这仅是配置的示例和部分，实际上 VitePress 配置非常灵活，您可以根据自己的实际需求添加或修改配置项。

另外，配置中的每一个部分例如 nav, sidebar, footer, algolia, head 都是可选的。你可以根据你的需求增加或减少配置。

在部署时，确保你的 base 配置与部署路径一致。例如，如果你的项目被部署在子路径下，如 https://www.example.com/project/，那么你的 base 应该是 '/project/'。如果项目部署在根路径，则可以是 '/'。

这个配置文件需要以 CommonJS 格式编写，因为 VitePress 在构建时会直接使用 Node.js 来处理它。更新后，你可以运行 npx vitepress dev 来启动本地服务器并查看更改效果，或者运行 npx vitepress build 来构建静态文件以供部署。

avatar
文章
阅读
粉丝