默认的主题提供了一个首页(Homepage)的布局 (用于 这个网站的主页)。想要使用它,需要在你的根级 README.md
的 YAML front matter 指定 home: true
。以下是一个如何使用的例子:
--- home: true heroImage: /hero.png heroText: Hero 标题 tagline: Hero 副标题 actionText: 快速上手 → actionLink: /zh/guide/ 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 ---
设置完后,可以看到出现了我们想要的页面。
其他设置可参考其他帮助页面:https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E9%A6%96%E9%A1%B5
3. 发布到GitHub Pages
下一步就是将生成的网页发布到GitHub。直观的想法就是把项目build后的文件push到上文创建的Repository。实际上的做法却可以更“巧妙”一些。
将源文件提交到main分支。
通过GitHub的Actions,在上一步完成之后,自动build,并将结果提交到另一个分支(gh-pages)。
GitHub Pages指向gh-pages分支。
3.1 创建gh-pages分支
如下图,在下拉菜单中输入gh-pages,并点击下面的Create branch提示,会创建gh-pages分支。
3.2 将GitHub Pages指向gh-pages分支
如下图方式修改:
3.3 设置自动发布的Token
因为需要自动发布,设置用于发布的Token。
首先创建Token,依照下图逐步创建即可。
点击右上角的头像,选择Setting:
在打开的页面中点击Developer setting
选择Personal access tokens, 点击Generate token按钮创建一个新的Token