每天学一点,日积月累

用 GitHub Pages 和 VuePress 搭建网站

1、本地环境搭建需要安装的工具

Git
https://git-scm.com/
Node.js
https://nodejs.org/zh-cn/
Visual Studio Code
https://code.visualstudio.com/
下载上面3个工具后,完成安装 。
(以下2个为非必需工具)
yarn
https://yarn.bootcss.com/
cmder
https://cmder.net/

2、VuePress 搭建网站官方网站

https://vuepress.vuejs.org/zh/

3、搭建VuePress网站过程记录

新建一个blog文件夹,作为网站的项目文件夹。

快速上手

注意

请确保你的 Node.js 版本 >= 8。

全局安装

如果你只是想尝试一下 VuePress,你可以全局安装它:

# 安装
yarn global add vuepress # 或者:npm install -g vuepress
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
#开始写作
vuepress dev .
#构建静态文件
vuepress build .

现有项目

如果你想在一个现有项目中使用 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

基本配置

配置文件

如果没有任何配置,这个网站将会是非常局限的,用户也无法在你的网站上自由导航。为了更好地自定义你的网站,让我们首先在你的文档目录下创建一个 .vuepress 目录,所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样:

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象:

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

进入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 .

选中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"
  }
}

部署(发布博客)

git add -A
git commit -m '博客更新2019-04-20'
bash deploy.sh

视频学习

更新时间: 2019-6-30 09:37:33