NYQX

# 1、工具准备

  • （1）nodejs安装
  • （2）git安装

# 2、快速上手

# （1）新建文件夹，初始化项目

# 生成 package.json 文件
npm init -y

# （2）安装vuePress

npm install -D vuepress # 或者：yarn add -D vuepress

# （3）添加运行语句

# package.json文件
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

# （4）新建文章

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo # Hello VuePress! > docs/README.md

# 开始运行
npm run docs:dev

此时，在浏览器中访问 http://localhost:8080 即可预览效果。

# （5）配置文件

# 新建 .vuepress 文件夹
mkdir docs\.vuepress

# 新建 config.js 文件
module.exports = {
  base: '/',
  title: 'blog-demo',
  description: 'Vuepress blog demo'
}

base：站点的基础路径，以斜杠开始，并以斜杠结束 ，例 /blog-demo/ title：网站的标题
description：网站的描述

# （6）配置主题

默认的主题提供了一个首页（Homepage）的布局。想要使用它，需要在你的根级即 docs/README.md 的 YAML front matter 指定 home: true 。同时，你也可以设置一些默认的布局属性。

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /blog/hello/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

静态资源目录 docs/.vuepress/public

# （7）导航栏配置

# .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

# （8）新建文章

在 docs 目录下新建 blog 文件夹，创建 hello.md：

# hello

重新运行即可。

# （9）Github Pages部署

# 条件

文档放置在项目的 docs 目录中
使用的是默认的构建输出位置
VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的 npm scripts：

{
  "scripts": {
    "docs:build": "vuepress build docs"
  }
}
  1. 在 docs/.vuepress/config.js 中设置正确的 base。
    如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 /。
    如果你打算发布到 https://<USERNAME>.github.io/<REPO>/，则将 base 设置为 /<REPO>/。
  2. 在你的项目中，创建一个如下的 deploy.sh 文件：
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
  1. 添加npm scripts：
{
    "scripts": {
        "deploy": "deploy.sh"
      },
}

运行 npm run deploy 或 sh deploy.sh 即可自动构建部署到github上。将GitHub Pages设置为对应分支 gh-pages ： 1.png 部署效果预览：https://nyqx.github.io/nyqx/

# 能仔镇楼！

能仔