用Vuepress在Github Pgae上快速建立一个博客

实现效果

LVXY的个人博客

依赖环境

Node.js v12+

Yarn v1 classic

安装

• 步骤1：创建一个新目录

mkdir vuepress-starter
cd vuepress-starter

• 步骤2：初始化项目

yarn init  // 弹出的选项不停回车即可

• 步骤3：在该文件夹环境内安装 VuePress

yarn add -D vuepress

• 步骤4： 在 package.json 中添加一些 scripts

// vuepress-starter/package.json
{
  ...

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

• 步骤5：创建你的第一篇文档

mkdir docs
echo # Hello VuePress!  > docs/README.md

• 步骤6：在本地启动服务器来开发你的文档网站

yarn docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

修改主题

• 步骤1：在该文件夹环境内安装 vuePress-theme-reco

yarn add -D vuepress-theme-reco

• 步骤2：在 docs 文件夹内新建一个 .vuepress 文件夹，并在里面创建一个 config.js 文件

• 步骤3：在 docs/.vuepress/config.js 填入以下内容

// vuepress-starter/docs/.vuepress/config.js

module.exports = {
  title: 'vuepress',   // 网页标题
  locales: {
    '/': {
      lang: 'zh-CN'  // 修改网页的语言为中文
    }
  },  
  theme: 'reco',
  themeConfig: {
    type: 'blog'
  }
}

• 步骤4： 重新执行 yarn docs:dev，然后打开 http://localhost:8080