返回

Vitepress + Github Pages 搭建博客网站

前端

VitePress:新一代静态网站生成器

VitePress 是一个由 Vue 团队创建的静态网站生成器。它以 Vue 3 为基础,并提供了一些开箱即用的功能,例如路由、主题支持和 Markdown 支持。VitePress 旨在使您能够轻松地创建和维护一个现代化的、响应迅速的网站。

Github Pages:免费且易用的静态网站托管服务

Github Pages 是一个免费的静态网站托管服务,允许您将您的网站托管在 Github 上。Github Pages 使用 Jekyll 来生成您的网站,Jekyll 是一个流行的静态网站生成器。Github Pages 非常易于使用,您只需要创建一个 Github 仓库,然后将您的网站代码推送到仓库中,您的网站就会自动生成并发布。

如何使用 VitePress + Github Pages 搭建博客网站

  1. 安装 VitePress

首先,您需要安装 VitePress。您可以通过以下命令来安装 VitePress:

npm install -g vitepress
  1. 创建一个 VitePress 项目

安装 VitePress 后,您就可以创建一个 VitePress 项目了。您可以通过以下命令来创建一个 VitePress 项目:

mkdir my-blog
cd my-blog
vitepress init
  1. 配置 VitePress 项目

VitePress 项目创建完成后,您需要对它进行一些配置。您可以通过编辑 vitepress.config.js 文件来配置 VitePress 项目。在 vitepress.config.js 文件中,您可以配置网站的标题、、主题和插件等。

  1. 编写博客文章

配置好 VitePress 项目后,您就可以开始编写博客文章了。您可以使用 Markdown 来编写博客文章,也可以使用 Vue 组件来编写博客文章。

  1. 将博客网站部署到 Github Pages

编写好博客文章后,您就可以将博客网站部署到 Github Pages 了。您可以通过以下步骤来将博客网站部署到 Github Pages:

  1. 在 Github 上创建一个仓库。
  2. 将您的博客网站代码推送到仓库中。
  3. 在 Github Pages 中启用您的仓库。

结论

使用 VitePress + Github Pages 搭建博客网站是一个很好的选择。VitePress 是一个现代的博客框架,它基于 Vue 3,Github Pages 是一个免费的静态网站托管服务。本教程指导您逐步完成使用 VitePress + Github Pages 搭建博客网站的过程。