# 学习笔记
每天学一点，日积月累
# VuePress+GitHub Pages搭建博客
# 1.本地环境需要安装的工具
Git
https://git-scm.com/ (opens new window)
Node.js
https://nodejs.org/zh-cn/ (opens new window)
Visual Studio Code
https://code.visualstudio.com/ (opens new window)
下载上面3个工具后，完成安装 。
（以下2个为非必需工具）
yarn
https://yarn.bootcss.com/ (opens new window)
cmder
https://cmder.net/ (opens new window)
# 2.VuePress 搭建网站网站
https://vuepress.vuejs.org/zh/ (opens new window)
# 3.VuePress搭建网站记录
# 新建一个 myblog文件夹，作为网站的项目文件夹。
# 快速上手
注意
请确保你的 Node.js 版本 >= 8。
# 全局安装
如果你只是想尝试一下 VuePress，你可以全局安装它：
# 安装
yarn global add vuepress # 或者：npm install -g vuepress
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
#开始写作
vuepress dev .
#构建静态文件
vuepress build .
2
3
4
5
6
7
8
# 现有项目
如果你想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。作为本地依赖安装让你可以使用持续集成工具，或者一些其他服务（比如 Netlify）来帮助你在每次提交代码时自动部署。
# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 开始写作
npx vuepress dev docs
2
3
4
5
6
7
8
# 基本配置
# 配置文件
如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
2
3
4
5
6
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
2
3
4
进入blog目录，右击菜单，选中弹出菜单中的Git Bash Here，进入Git命令终端：
mkdir docs //新建docs文件夹
cd docs/
echo '# Hello vuepress' > README.md
vuepress dev
mkdir .vuepress
cd .vuepress/
touch config.js //新建config.js文件
cd ../
cd ../
npm init -y //初始化，自动生成package.json文件。
code .
2
3
4
5
6
7
8
9
10
11
选中blog文件夹，右击菜单 
点击Open with Code即打开Visual Studio Code。
打开Visual Studio Code界面后，在终端录入命令：
即在blog文件夹生成package.json文件，接着，在 package.json 里加一些脚本:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
2
3
4
5
6
# 部署(发布博客)
git add -A
git commit -m '博客更新2019-04-20'
bash deploy.sh
2
3
4