壹米阳光の档案馆

# 简言

手把手教程参考：itclanCoder大佬 (opens new window)

# 安装环境准备

# Windows 系统中安装 Yarn

官网 (opens new window)提供了三种安装方法。下面记录我选择第一种方法安装的步骤：

下载安装程序

这将为您提供一个.msi文件，该文件在运行时将引导您完成在Windows上安装Yarn的操作。

如果使用安装该程序，您首先需要安装 Node.js (opens new window)。

下载安装程序 (opens new window)

# 检查安装

将yarn-1.22.5.msi下载后直接点击安装，自动会将yarn命令对应的路径添加至path所在的环境变量中。然后打开CMD命令行窗口，输入yarn -v可以查看到当前安装的yarn的版本：

yarn --version

# 开始项目

创建并进入一个新目录：

mkdir vuepress && cd vuepress

在创建的vuepress文件夹下打开Git终端(win下为命令行):

# 初始化项目，请根据实际情况自行填写相应提示内容，或者简单的一路回车就行，以后也是可以修改的
yarn init

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress

# 新建一个 docs 文件夹
mkdir docs

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

此时项目的目录结构如下：

.
├─ docs
│  └─ README.md
├─ node_modules
├─ package.json
└─ yarn.lock

接着，在 package.json 里添加如下脚本:

{
  "name": "KingPan",
  "version": "1.0.0",
  "main": "index.js",
  "author": "KingPan",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.8.2"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

然后在本地启动服务器：

yarn docs:dev

终端输出：> VuePress dev server listening at http://localhost:8080/就说明运行成功了，这时在浏览里访问终端输出的地址 http://localhost:8080 (opens new window)就可以看到“Hello VuePress!”了。

进入docs文件夹中使用mkdir命令创建.vuepress文件夹,注意这个文件夹的名字时固定的,不要随便改变：

cd docs
mkdir .vuepress

# vuepress 热更新失效解决

由于接下来配置config.js和md文件较为频繁，不可能每次修改都要 yarn dev重新启动服务器吧。所以提前把依赖安装配置好，方便后面能够实时编译。

# 提供两种方案修改

第一种 安装依赖 watchpack

npm install -D watchpack

这种方法 不能更新config.js 的一些配置和首页的README.md文件，如果修改后，还是必须重新运行才能更新。

第二种 修改package.json中的配置 官网上是这样的

"dev": "vuepress dev docs"

改为这样的

 "dev": "vuepress dev docs --temp .temp"

这种方法是通过在编译的时候生成一个临时的 .temp, 唯一的缺点，在目录下会多一个文件夹，如果使用git，可以在.gitignore种加入

...
.temp

这样就可以排除了。

# 页面具体内容配置

# 基本配置

要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js，它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范。

进入.vuepress文件夹,创建config.js文件：

cd .vuepress
touch config.js

config.js最基础的配置文件内容如下所示：

module.exports = {
  title: 'itclanCoder网站',
  description: 'itclanCoder的网站,专注前端技术栈分享'
}

# 设置封面启动页

有时候,当别人进入您的网站时,设置一个启动页,这样显得挺友好,而不是一上来,就放一堆的内容,看得令人眼花缭乱

在vuepress默认的主题中提供了一个首页（Homepage）的布局 (用于您网站的主页)。如果您想要使用它，需要在您项目docs/README.md中的YAML front matter指定 home: true,如下所示：

home: true
heroImage: /images/itclancoder.jpeg
heroText: 向阳榆木の阅览室
tagline: 书以启智,技于谋生,活出斜杠
actionText: 快速开始吧 →
actionLink: /latestarticle/
features:
  - title: 读书
    details: 随笔川迹,文以载道,虚心学习,自省自知,多读一页书,就少一分无知,多一分智慧
  - title: 技术
    details: 用心记录技术,走心分享,始于前端,不止于前端,励志成为一名优秀的全栈工程师,真正的实现码中致富
  - title: 生活
    details: 无分享,不生活,一个具有情怀的技匠,路上正追逐斜杠青年的践行者
footer: MIT Licensed | Copyright © 2020-present KingPan

当然,您现在看到,网站上有图片没有正常的显示,那是因为没有添加图片造成的,网站上一些图片,logo 等静态资源可以放到.vuepress目录下的一个public目录下的

这个public是自己创建的,vuepress并不会自动帮你生成,在/.vuepress/public/images中放入您想要的图片就可以了的

警告

⒈ 这个 public 目录文件夹的名称是固定的,就像docs目录下的config.js一样,名称是固定的

⒉ 在引入图片时,直接/所要引入的图片路径目录就行,不用带public,它会自动的去找public下的静态资源文件

⒊ vuepress中所有的图片文件名,以及目录名不要带有中文,应该使用英文状态下的格式,否则编译就报错,在您以后用 md 写文章时,同样引入图片时,图片的后缀名都不能带有中文字符

# 配置导航栏

导航栏中有页面标题、搜索框、 导航栏链接、多语言切换、仓库链接，它们都是可以直接通过配置出来的,在 config.js 中添加如下配置

// .vuepress/config.js
module.exports = {
  title: '向阳榆木の阅览室',
  description: '欢迎来到我的博客家园',
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '前端', link: '/fontend/' },
      { text: '后端', link: '/rearend/' },
      {
        text: '友情链接',
        items: [
          { text: '向阳榆木', link: 'https://www.xyym.cf' },
          { text: '偏偏💖雨季', link: 'https://lllzxqq.gitee.io' },
          { text: '浪子游方', link: 'https://yumuxy.gitee.io' }
        ]
      },
      { text: '面试', link: '/interview/' },
      { text: '关于', link: '/about/' },
      { text: 'Github', link: 'https://github.com/dldgpc' }
    ]
  }
}

警告

路由后面的/fontend/后面的反斜杠不能少,否则依旧会是 404 的

  • 导航栏配置nav，此配置主要用于配置导航栏的链接，例如以上首页的link为"/"，默认是根目录(docs目录)下的README.md。
  • "/fontend/"链接到根目录docs下的fontend文件夹下的README.md文件。
  • "/rearend/"链接到根目录docs下的rearend文件夹下的README.md文件。
  • "/interview/"链接到根目录docs下的interview文件夹下的README.md文件。
  • "/about/"链接到根目录docs下的about文件夹下的README.md文件。

在docs目录下新建fontend,rearend,interview,about等文件夹，并在各文件夹下面创建README.md文件,批量创建命令如下：

mkdir -p ./{fontend,rearend,interview,about}
echo "# fontend Docs" > fontend/README.md
echo "# rearend Docs" > rearend/README.md
echo "# interview Docs" > interview/README.md
echo "# about Docs" > about/README.md

以上首先创建几个子文件夹，然后在各目录中创建README.md文件。

# 了解目录结构

此时的目录树结构如下：

├─package.json
├─docs
|  ├─README.md
|  ├─rearend        // 与.vuepress同级的每一个文件夹都是一个nav,以后写文章都是在这里里面写
|  |     └README.md
|  ├─interview
|  |     └README.md
|  ├─fontend
|  |    └README.md
|  ├─about
|  |   └README.md
|  ├─.vuepress           // 所有与导航侧边栏vuepress相关配置都会在这个文件夹里面
|  |     ├─config.js
|  |     ├─public        // 公共静态资源,logo,自定义样式等
|  |     |   ├─img
|  |     |   |   ├─psb.jpg
|  |     |   |   └logo.png

请留意目录名的大写。

  • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
  • docs/.vuepress/theme: 用于存放本地主题。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
  • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
  • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/templates: 存储 HTML 模板文件。
  • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
  • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
  • docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
  • docs/.vuepress/enhanceApp.js: 客户端应用的增强。

注意：当你想要去自定义 templates/ssr.html 或 templates/dev.html 时，最好基于 默认的模板文件 (opens new window) 来修改，否则可能会导致构建出错。

其中导航栏的链接分为三种:

  • 一级 nav,链接
  • 二级下拉菜单
  • 带标题的多级分类菜单

一级 nav,直接带路由即可：

themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '前端', link: '/fontend/' },
      { text: '后端', link: '/rearend/' },
     ]
   }

如果想 nav 二级下拉菜单,如下配置,link的属性值带有链接,会直接是链接,若不是那就是路由,在vuepress中提供了一个items属性,配置二级导航如下所示:

themeConfig:{
  nav: [{text: "主页", link: "/"      },
      { text: "前端",
        items: [
          { text: "html", link:"/fontend/html/"},
          { text: "css", link:"/font/css/"},
          ]
      }
    ],
}

如果想要二级菜单带有标题,分类的菜单形式,如下配置:

themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '前端', link: '/fontend/' },
      { text: '后端', link: '/rearend/' },
      {
        text: '超级入口',
        items: [
          {
            text:"个人主题",
            items:[
              { text: '向阳榆木', link: 'https://www.xyym.cf' },
              { text: '偏偏💖雨季', link: 'https://lllzxqq.gitee.io' },
              { text: '浪子游方', link: 'https://yumuxy.gitee.io' }
            ]
          },
          {
            text:"大佬博客",
            items:[
              { text: 'Java 全栈知识体系', link: 'https://www.pdai.tech' },
              { text: 'itclanCoder', link: 'https://coder.itclan.cn' },
              { text: '小弋の阅览室', link: 'https://lovelijunyi.gitee.io/blog' }
            ]
          }
        ]
      },
      { text: '面试', link: '/interview/' },
      {
        text: "工具",
        items: [
          {
            text: "思维导图",
            items: [
              { text: "百度脑图", link: "https://naotu.baidu.com/" },
              { text: "ProcessOn", link: "https://www.processon.com/" },
              { text: "GitMind", link: "https://gitmind.cn/" }
            ]
          },

          {
            text: "文档管理",
            items: [
              { text: "语雀", link: "https://www.yuque.com/dashboard" },
              { text: "腾讯文档", link: "https://docs.qq.com/desktop" }
            ]
          },

          {
            text: "平台管理",
            items: [
              { text: "聚合图床", link: "https://www.superbed.cn/" },
              { text: "音乐后台", link: "https://myhkw.cn/admin/user/login/" }
            ]
          }
        ]
      },
      { text: '关于', link: '/about/' },
      { text: 'Github', link: 'https://github.com/dldgpc' }
    ]
  }

可以按照这个类似的结构,无限制的配置下去

光有 nav 导航是不够的,下面来配置一下侧边栏,怎么配置侧边栏才是重中之重

# 配置侧边栏-slider

# 自动获取侧边栏内容

如果你希望自动生成当前页面标题的侧边栏, 可以在 config.js 中配置来进行配置启动

module.exports = {
  themeConfig: {
    sidebar: 'auto',
  },
};

警告

默认情况下，侧边栏会自动地显示由当前页面的标题（headers）组成的链接，并按照页面本身的结构进行嵌套，您可以通过 themeConfig.sidebarDepth 来修改它的行为。

默认的深度是 1，它将提取到 h2 的标题，设置成 0 将会禁用标题（headers）链接，同时，最大的深度为 2，它将同时提取 h2 和 h3 标题,如果想要额外拓展,支持 h1~h6,在 markdown 配置拓展中markdown.extractHeaders,如下所示

module.exports = {
  markdown: {
    extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6'],
  },
};

# 侧边栏分组配置

在docs根目录下面有 fontend文件夹，frontend文件夹又分为framework和Technology文件夹，各组下面有多个md文件，这时的配置应该为如下：

module.exports = {
  themeConfig:{
    sidebar:{
      // docs文件夹下面的frontend文件夹 文档中md文件 书写的位置(命名随意)
      '/frontend/': [
        {
          title: '前端框架',
          collapsable: false, // 可选的, 默认值是 true,表示是可折叠的
          children: [
            ['/frontend/framework/BootStrap', 'BootStrap框架'],// 以docs为根目录来查找文件
            // 上面地址查找的是：docs>frontend>framework>BootStrap.md 文件
            ['/frontend/framework/VueJs框架','VueJs框架'],
          ]
        },
        {
          title: '前端技术',
          collapsable: true,
          children: [
            ['/frontend/Technology/NodeJs', 'NodeJs'],
            ['/frontend/Technology/前端理论','前端理论'],
          ]
        },
        ['/frontend/Web网页优化','Web网页优化'],
        ['/','返回首页'],
      ],
    }
  }
}

效果如图所示：

此时相关的目录结构如下：

├─package.json
├─docs
|  ├─README.md
|  ├─fontend    
|  |     ├─framework
|  |     ├─Technology
|  |     └README.md
|  |     └Web网页优化.md

# 侧边栏层级深度

默认情况下，层级深度只展示到二级标题，但是你可通过themeConfig.sidebarDepth属性修改默认行为。

0：禁用标题链接，只提取h1的标题；

1：默认值，他将提取到h1、h2的标题；

2：最大值，将提取h1、h2、h3的标题。

设置方式有两种：

  1. 在themeConfig.sidebarDepth设置，他将影响所有页面的侧边栏层级。

    themeConfig: {
sidebarDepth: 2,
}

  2. 在文件中使用YAML格式设置，将单独影响当前页面：

    ---
sidebarDepth: 2
---

# 拆分-config

在拆分之前,需要了解CommonjS中模块化导入导出的规则,在一个文件中导入一个文件使用require方式；而导出一个对象或变量,使用的是module.exports。

拆分后的目录变化如下：

├─config.js         // 主要入口配置文件
├─config
	├─nav.js            // 导航栏配置
	├─sidebar.js       // 侧边栏配置
	├─plugin.js   // 默认主题相关配置
├─public
|   ├─img
|   |   ├─psb.jpg
|   └favicon.ico

nav.js具体如下：

const navs= [
  { text: '首页', link: '/' },
  { text: '前端', link: '/frontend/'},
  { text: '后端',
    items: [
      {text: '后端框架',link:'/rearend/framework/Mybaits学习总结'},
      {text: '后端技术', link: '/rearend/Technology/后端理论' },
    ]
  },
  { text: '公众号',
    items: [
      {text: '订阅号',link:'/'},
      {text: '服务号', link: '/' },
      {text: '小程序', link: '/' },
    ]
  },
  {
    text: '超级入口',
    items: [
      {
        text:"个人博客",
        items:[
          { text: '向阳榆木', link: 'https://www.xyym.cf' },
          { text: '偏偏💖雨季', link: 'https://lllzxqq.gitee.io' },
          { text: '浪子游方', link: 'https://yumuxy.gitee.io' }
        ]
      },
      {
        text:"大佬博客",
        items:[
          { text: 'Java 全栈知识体系', link: 'https://www.pdai.tech' },
          { text: 'itclanCoder', link: 'https://coder.itclan.cn' },
          { text: '小弋の阅览室', link: 'https://lovelijunyi.gitee.io/blog' }
        ]
      }
    ]
  },
  { text: '面试', link: '/interview/' },
  {
    text: "工具",
    items: [
      {
        text: "思维导图",
        items: [
          { text: "百度脑图", link: "https://naotu.baidu.com/" },
          { text: "ProcessOn", link: "https://www.processon.com/" },
          { text: "GitMind", link: "https://gitmind.cn/" }
        ]
      },

      {
        text: "文档管理",
        items: [
          { text: "语雀", link: "https://www.yuque.com/dashboard" },
          { text: "腾讯文档", link: "https://docs.qq.com/desktop" }
        ]
      },

      {
        text: "平台管理",
        items: [
          { text: "聚合图床", link: "https://www.superbed.cn/" },
          { text: "音乐后台", link: "https://myhkw.cn/admin/user/login/" }
        ]
      }
    ]
  },
  { text: '关于', link: '/about/' },
  { text: 'Github', link: 'https://github.com/dldgpc' }
];

module.exports = navs;

sidebar.js具体如下：

const sidebar= {
      // docs文件夹下面的frontend文件夹 文档中md文件 书写的位置(命名随意)
      '/frontend/': [
        {
          title: '前端框架',
          collapsable: false, // 可选的, 默认值是 true,表示是可折叠的
          children: [
            ['/frontend/framework/BootStrap', 'BootStrap框架'],// 以docs为根目录来查找文件
            // 上面地址查找的是：docs>frontend>framework>BootStrap.md 文件
            ['/frontend/framework/VueJs框架','VueJs框架'],
          ]
        },
        {
          title: '前端技术',
          collapsable: true,
          children: [
            ['/frontend/Technology/NodeJs', 'NodeJs'],
            ['/frontend/Technology/前端理论','前端理论'],
          ]
        },
        ['/frontend/Web网页优化','Web网页优化'],
        ['/','返回首页'],
      ],
      //后端配置

	};

module.exports = sidebar;

而在config.js中,通过require的方式引入即可,如下所示

const nav = require('./config/nav'); //导入导航栏nav 后缀名xx.js可以省略
const sidebar = require('./config/sidebar'); //导入侧边栏sidebar 
module.exports = {
  themeConfig:{
  	nav,
    sidebar:sidebar // 也可以直接就写sidebar,Es6中的简写,当键与键值同名时,可直接写一个,如nav同样生效
}

其他head,sidebar和plugin等配置也是如此,代码与之前是没有任何改变的,只不过是对config.js进行了分割,将导航栏、侧边栏、插件等配置分离出去，避免全部写在config.js显得很杂乱。

注意事项

每尝试配置一个 API,记得在命令行终端就重新启动npm run docs:dev一下,并且清理一下浏览器缓存，再从浏览器查看一下配置效果,目前 vuepress 的热更新存在一些问题，官方以后肯定会修复的。

# 配置插件

有时候,我们想让我们的网站博客更加顺畅,用户体验更好,可以结合一些第三方的插件,开箱即用

配置内置的全局 UI,首先需要在当前项目下使用npm或者yarn安装插件

// 回到顶部插件,推荐使用yarn安装插件,它安装比npm更快,不熟悉的,可以去了解下yarn的,包管理工具
yarn add -D @vuepress/plugin-back-to-top

然后在,config.js 中进行配置:

module.exports = {
  plugins: ['@vuepress/back-to-top'],
};

警告

⒈ 安装插件的版本需要与 vuepress 的版本保持一致,如果低版本的back-to-top,会出现不了,其他插件配置也是如此

⒉ 凡是带有@开头的插件,都是官方维护的插件,需要与当前项目的 vuepress 版本保持一致

⒊ 非@开头的插件,则是社区或者个人开发的插件,vuepress 版本每个一段时间,或许都会升级,以你自己的为准

 // 在package.json中就可以看到安装过的一些插件版本情况
 "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.8.2",
    "vuepress": "^1.8.2",
    "watchpack": "^2.1.1"
  }

# 支持-PWA

vuepress有一个比较好的优势, 就是它是支持 PWA,也是支持响应式的,无论是在 pc 端浏览还是在手机端浏览器浏览,显示都很友好,而当用户没有网的情况下,一样能继续的访问我们的网站

安装-pwa

yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa

在 config.js 中进行配置:

module.exports = {
  plugins: [
    [
      '@vuepress/pwa',
      {
        serviceWorker: true,
        updatePopup: true,
      },
    ],
  ],
};

注意

为了让你的网站完全地兼容 PWA，你需要提供 manifest文件和在头部 head 进行引用:

在.vuepress/public 提供 Manifest 和 icons 在 .vuepress/config.js添加正确的 head links

在config.js的head配置项中

// 配置
module.exports = {
  head: [
    ['link', { rel: 'icon', href: `/icons/favicon.ico` }],
    //增加manifest.json
    ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
};

manifest.json文件

{
  "name": "KingPan",
  "short_name": "KingPan",
  "version": "1.0.0",
  "description": "KingPan,壹米阳光博主, 壹米阳光の档案馆",
  "manifest_version": 2,
  "icons": [
    {
      "src": "/icons/apple-touch-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3eaf7c"
}

生成 favicon 图标 (opens new window) Manifest 各个字段含义 (opens new window)

此时public目录结构变化：

├─public
|   ├─img
|   |   ├─psb.jpg
|   ├─icons
|   |   ├─apple-touch-icon.png
|   |   ├─android-chrome-512x512.png
|   |	└favicon.ico

# 配置评论插件

vssue (opens new window)是官方推出的,也有专门的团队在维护,也很强大,支持多个平台，但由于用惯了valine评论插件,就继续使用了。

# 插件 Valine

1 一款快速、简洁且高效的无后端评论系统

2 官方文档:valine (opens new window)

在使用 valine 之前,先前往leancloud 注册账号 (opens new window)

然后创建应用, 获取APP ID和APP KEY。

# 安装-vuepress-plugin-comment

yarn add -D  vuepress-plugin-comment

# 快速使用

在.vuepress下的config.js的plugin插件选项中进行配置

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'valine',
        // options选项中的所有参数，会传给Valine的配置
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey',
        },
      },
    ],
  ],
};

其中appid和appkey为你创建的应用的APP ID 和APP Key，把刚才获取到的秘钥复制过来即可,经过配置之后重新运行测试一下。

# 自动生成侧边栏

有时候,你会发现,每次管理侧边栏,都需要手动去创建管理侧边栏的,虽然已经对 slidbar 以及 nav 做了拆分,但是依旧不完美,可以 借助vuepress-plugin-auto-sidebar,这个插件,自动去配置管理我们的侧边栏的

vuepress-plugin-auto-sidebar 仓库 (opens new window)

vuepress-plugin-auto-sidebar 使用文档 (opens new window)

目前,只需知道怎么配置,怎么修改配置能达到自己的效果就可以了,后面更换主题后自带的自动生成侧边栏功能，会发现比自己写的好太多了，而且更注重在写作上面，不用那么多麻烦的配置。处于学习阶段，还是需要了解如何配置就行。

存在问题：

  1. 由于做了插件分离出去，但该插件分离后无法生效，如果配置在config.js里面，需要把自己写的侧边栏sidebar给注释掉，否则也无反应。总之对此插件采取冷处理方式，最好先不用它。

  2. 若发现先前的返回置顶和评论系统不见了，有可能是插件莫名其妙被删除了，重新下载后在node_modules中找到，再重新运行就可以了。

# 部署到-github 平台

# 配置自动化部署脚本

在vuepress(以你自己的为准)根目录下,创建一个如下的脚本文件deploy.sh:


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

# 生成静态文件
npm run build

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

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

git init
git add -A
git commit -m '部署项目'

# 如果发布到 https://<USERNAME>.github.io,把下面一行注释掉,替换username即可,注意以下这是ssh的方式
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# git push -f git@github.com:dldgpc/dldgpc.github.io.git master


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

cd -

此时目录结构变化如下：


├─docs
|  └README.md
├─deploy.sh
├─package.json

# 启动-deploy.sh-脚本

当你在git bash命令行终端执行bash deploy,注意在DOS命令行终端下,不支持这个bash命令,或者双击deploy.sh这个脚本 就会自动的执行这个脚本,分别完成构建和向远端指定的仓库提交代码

有时候,我们希望执行一行命令就可以完成自动化部署，那么您需要在package.json中的scripts中添加deploy:bash deploy.sh就可以了的,往后在命令行终端执行npm run deploy或者yarn deploy就可以自动执行该deploy.sh脚本了。

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },

提示

如果自动部署脚本不成功,可以尝试如下操作

⒈ npm run docs:build,手动构建

⒉ git push -f git@github.com:dldgpc/dldgpc.github.io.git master

问题记录：

Github从2020年10月份开始，新建仓库从原来默认的master变成了main，由于不注意就提交到master了，导致部署的博客无法显示，显示的是另外的分支master。

解决办法：

首先打开xxxx.github.io仓库，点击顺序为：Settings》Branches,将默认分支main修改为master,然后点击Update更新保存，然后再点击Options按钮，往下拉找到GitHub Pages,将Branch:main同样修改为master,然后点击Save按钮保存，这时候重新打开网站xxxx.github.io就能正常显示上传的博客内容了。至于提交命令尝试过将git push -f master修改为git push -f main,但提示报错行不通，后面有时间再研究一下命令的改法。因为以后默认都是main为主分支了。

# 更换主题