返回

VuePress 快速入门：让你的个人博客光速起航

前端

快速搭建个人博客指南：使用 VuePress

何为 VuePress？

VuePress 是一个以 Vue.js 为驱动的静态博客框架，可帮助您轻松创建个人博客。其优势在于简单易用，上手快，并且可生成静态网站，实现快速加载和无需服务器端渲染。

安装 VuePress

第一步是安装 VuePress，通过以下命令即可完成：

npm install -g vuepress

创建您的博客

创建一个新文件夹并运行以下命令：

vuepress init my-blog

这将创建一个 VuePress 项目，包含以下文件：

  • package.json：配置文件
  • README.md：博客首页
  • .vuepress：配置文件夹

配置您的博客

编辑 .vuepress/config.js 文件以配置博客标题、和主题等信息。

选择主题

VuePress 提供多种主题，可通过以下命令安装：

npm install --save-dev @vuepress/theme-default

配置主题：

module.exports = {
  theme: '@vuepress/theme-default',
}

撰写博客文章

使用 Markdown 撰写博客文章，在 .vuepress/docs 文件夹中创建新的 Markdown 文件。

预览您的博客

使用以下命令预览博客：

vuepress dev

这将在本地启动服务器，您可在浏览器中访问博客。

发布您的博客

生成静态网站，以便在任何地方部署：

vuepress build

结论

本指南提供了使用 VuePress 快速搭建个人博客的详细步骤。如果您有任何疑问，请随时留言。

常见问题解答

1. 如何使用自定义域名？

在 .vuepress/config.js 中设置 base 选项，例如：

module.exports = {
  base: '/my-custom-domain/',
}

2. 如何添加评论？

集成 Disqus 或 Isso 等评论系统。有关详细信息，请参阅 VuePress 文档。

3. 如何部署到 GitHub Pages？

在 .vuepress/config.js 中设置 deploy 选项，例如：

module.exports = {
  deploy: {
    type: 'git',
    repo: 'https://github.com/your-username/your-repo.git',
    branch: 'gh-pages',
  },
}

4. 如何添加社交媒体链接？

在 .vuepress/config.js 中设置 head 选项，例如：

module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }],
    ['meta', { name: 'twitter:card', content: 'summary' }],
  ],
}

5. 如何使用代码高亮显示？

安装 vuepress-plugin-prismjs 插件并配置：

module.exports = {
  plugins: [
    ['vuepress-plugin-prismjs', {
      theme: 'prism-coy',
    }],
  ],
}