手把手教你用vuepress搭建自己的网站(2)

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

页面具体内容配置

基本配置

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

提示

vuepress 依赖于 NodeJS服务启动,因为 NodeJs 现不支持模块化,所以在 vuepress 中,是无法使用 import 与 export 语法的

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

cd .vuepress
touch config.js

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

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

如果这时在itclan根目录下的终端下,运行npm run docs:dev或者yarn docs:dev,会出现页面404 页面,如下所示

这是因为vuepress默认打开的是docs 下的README.md文件, 由于你没有创建,所以找到的是vuepress 默认提供的404页面

文件的相对路径	页面路由地址
/README.md	/
/guide/README.	/guide/
/config.md	/config.html

在VuePress中README.md文件,你可以把它视为xxx.vue文件,md 文件中既可以写js,css,html,如果你发现页面 404,排除下路由下是不是没有添加README.md文件的 

在docs目录下创建README.md文件, 再次npm run dev,就可以看到运行起来的效果, 如下图所示

当然,您现在看到的页面是一片空白,那是因为docs根目录下的README.md中没有任何内容,但现在至少不是 404 了,离曙光又近了一步

设置封面启动页

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

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

---
home: true
heroImage: /images/itclancoder.jpeg
heroText: itclanCoder
tagline: 书以启智,技于谋生,活出斜杠
actionText: 开始阅读 →
actionLink: /latestarticle/
features:
  - title: 读书
    details: 随笔川迹,文以载道,虚心学习,自省自知,多读一页书,就少一分