使用vuepress搭建静态博客的示例代码

下面是使用vuepress搭建静态博客的完整攻略及两条示例说明：

总体步骤

安装Node.js（v8.0以上）
全局安装vuepress：npm install -g vuepress
创建一个新的博客目录：在终端中执行mkdir my-blog，切换到目录中：cd my-blog
创建 vuepress 的配置目录和文件： mkdir .vuepress && touch .vuepress/config.js
编辑 config.js 文件，配置博客信息、页面路由、主题等
编写 Markdown 格式的博客文章，存放在对应的目录中（比如 docs 目录）
本地运行博客：执行 vuepress dev docs 命令，在浏览器访问 http://localhost:8080 就可以看到博客页面了
构建静态博客：执行 vuepress build docs 命令，会在 .vuepress/dist 目录生成静态博客文件

配置说明

在 config.js 文件中，我们可以配置以下几个选项：

module.exports = {
  title: 'My Blog', // 网站标题
  description: '我的博客', // 网站描述
  base: '/', // 网站根目录

  themeConfig: {
    nav: [ // 导航栏链接
      { text: '首页', link: '/' },
      { text: '文章', link: '/articles/' },
      { text: '关于我', link: '/about/' },
    ],

    sidebar: { // 侧边栏
      '/articles/': [
        '',
        'vuepress',
        'md',
        'deploy'
      ],
    },

    // 主题配置
    sidebarDepth: 2,
    lastUpdated: '上次更新',
    smoothScroll: true
  },
}

示例1：创建首页

要想创建首页，我们需要创建一个名为 README.md 的 Markdown 文件，存放在项目的根目录下。在该文件中，我们可以编写页面内容，比如：

---
home: true
heroText: Welcome to My Blog
tagline: You can learn many things from here
actionText: 开始阅读
actionLink: /articles/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

- title: Vue驱动
  details: 享受 Vue 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。

- title: 高性能
  details: VuePress 会在构建时预编译 Markdown 中的所有代码块，所以它非常快速且具有非常高的性能。
---

在以上代码中，我们使用了 vuepress 提供的 hero 样式，并将页面标题、副标题、按钮链接等信息添加到页面。这样，我们创建了一个有吸引力的首页。

示例2：创建文章页面

在默认情况下，VuePress 会自动为每篇 Markdown 文件创建路由页面。该功能让我们能够轻松地编写文章。

例如，我们创建一个名为 docs/articles/vuepress.md 的 Markdown 文件，那么访问该链接时，路由会自动为我们创建页面：http://localhost:8080/articles/vuepress.html。

在该页面中，我们可以编写文章内容，例如：

---
title: VuePress Quickstart
---

# VuePress 快速上手

VuePress 是一个简洁易用的静态网站生成器。它的设计灵感来源于 Nuxt.js ，并在其基础上进行了修改和扩展。

VuePress 只有两个命令，即 `vuepress dev` 和 `vuepress build`，这两个命令通过 webpack 将您的 Markdown 文件转换成网站。

## 安装和使用

### 安装 Node.js

VuePress 需要 Node.js 版本 8.0 或更高版本。安装可以从官网直接下载，也可以使用 nvm 工具来安装。

### 安装 VuePress

下载安装包的方式：

```bash
# 安装全局依赖
npm install -g vuepress

# 创建新的文件夹
mkdir my-blog && cd my-blog

# 初始化项目
npm init -y

# 创建网站配置
mkdir .vuepress && touch .vuepress/config.js

# 编辑网站配置
echo 'module.exports = {}' > .vuepress/config.js

# 开始写作
echo '# Hello VuePress' > README.md

# 本地预览网站
vuepress dev docs

在以上代码中，我提供了 VuePress 的安装与使用方法。您也可以加上自己的内容。

部署网站

GitHub Pages

使用 GitHub Pages 来部署您的网站，可以获得相对较快的访问速度和稳定的可靠性。

创建一个名为 username.github.io 的公共仓库。
将生成的网站文件上传到 username.github.io 的主分枝中
访问 username.github.io 就可以看到您的网站了。
```

编写完成后，我们在侧边栏中可以看到生成相应的链接。我们访问路由：http://localhost:8080/articles/vuepress.html，就可以看到我们刚才编写的文章了。

以上是使用 VuePress 搭建静态博客的攻略和示例说明。祝您写得愉快。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用vuepress搭建静态博客的示例代码 - Python技术站