手把手带你用 VuePress + Github Pages 搭建博客，web前端开发现状

博客地址：

• Github https://mqyqingfeng.github.io/learn-typescript/

• Gitee http://mqyqingfeng.gitee.io/learn-typescript/

点击 「阅读原文」，可直接访问，接下来我们看下具体搭建的步骤：

0. VuePress

---

VuePress 自然不用多说，基于 Vue 的静态网站生成器，风格简约，配置也比较简单。之所以不使用 VitePress，是因为想使用现有的主题， 而 VitePress 不兼容当前 VuePress 的生态系统，至于为什么不选择 VuePress@next，考虑到还处于 Beta 阶段，等稳定后再开始迁移。

1. 本地搭建

---

快速开始同 VuePress 官网：

1. 创建并进入一个新目录

// 文件名自定义

mkdir vuepress-starter && cd vuepress-starter

1. 使用你喜欢的包管理器进行初始化

yarn init # npm init

1. 将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

1. 创建你的第一篇文档，VuePress 会以 docs 为文档根目录，所以这个 README.md 相当于主页：

mkdir docs && echo ‘# Hello VuePress’ > docs/README.md

1. 在 package.json 中添加一些 scripts

{

“scripts”: {

“docs:dev”: “vuepress dev docs”,

“docs:build”: “vuepress build docs”

}

}

1. 在本地启动服务器

yarn docs:dev # npm run docs:dev

VuePress 会在 http://localhost:8080 (opens new window) 启动一个热重载的开发服务器。

2. 基础配置

---

在文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都会被放在这里。此时你的项目结构可能是这样：

.

├─ docs

│  ├─ README.md

│  └─ .vuepress

│     └─ config.js

└─ package.json

在 .vuepress 文件夹下添加 config.js，配置网站的标题和描述，方便 SEO：

module.exports = {

title: ‘TypeScript4 文档’,

description: ‘TypeS