step1 (初始化项目)
目前vuePress官方已经发布两个版本0.x and 1.x，在使用过程中发现1.x存在一些问题。例如:项目不能热更新config.js文件中的更改，navbar显示异常等问题，因此小弟建议使用0.x。
- 这部分可以按照官网的 快速上手 来初始化项目,我使用的是npm方式
1. npm install -g vuepress (全局安装vuePress)
2. mkdir 项目名称 (新建项目文件夹. 可以右键手动新建，也可以使用 mkdir 命令新建)
3. npm init -y (进入刚新建的项目文件夹,初始化项目)
4. 在项目文件夹根目录创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹,components 文件夹,override.styl文件,style.styl文件和 config.js 文件，初始项目结构如下所示：
vuepressBlog //项目文件夹
├─── docs
│ ├──── README.md //一般用来做首页
│ └──── .vuepress //用于存放全局的配置、组件、静态资源等
| ├── components //该目录中的 Vue 组件将会被自动注册为全局组件
│ ├── public // 静态资源目录
| ├── override.styl //用于重写默认颜色常量，或者设置新的 stylus 颜色常量。(定义的样式常量可以在vue组件中直接使用)
| ├── style.styl //会被自动应用的全局样式文件,具有比默认样式更高的优先级(需要覆盖的默认样式代码写在该文件里)
│ └── config.js //配置文件的入口文件(即配置性的东西基本在这配置)
└── package.json
复制代码至此,项目初始化工作就已完毕,包括上面的初始化项目结构目录,后面步骤中会对目录进行进一步完善,不过都是些按需配置的工作.
step2 (项目配置)
- 这部分工作我们在config.js文件中做,不要问我为神马,规定,规定,规定,重要的事情说三遍!!! 能用代码呈现的问题,我一般尽量不去bb,所以,直接贴config.js文件中的代码,直接可以复制去用的.
module.exports = {
title: 'Stone\'s blog', //博客标题
description: '我的个人博客', //个人描述
head: [ // 注入到当前页面的 HTML <head> 中的标签
['link', { // 增加一个自定义的 favicon(网页标签的图标)
rel: 'icon',
type: 'image/x-icon',
href: './favicon.ico'
}],
['link', { rel: 'apple-touch-icon', href: './favicon.ico' }], //适配移动端ico
],
base: '/', // 这是部署到github相关的配置
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
nav: [ // 导航栏配置
{
text: 'Home',
link: '/' // '/'默认为docs文件夹下的README.md文件
},
{
text: 'Blog',
link: '/blog/'
},
{
text: 'Space',
link: '/space/'
},
{
text: 'GitHub',
link: 'https://github.com/HUYIJUNCODING'
}
],
: {
'/blog/': [
{
title: '前端daily', /sidebar/ 侧边栏名称
collapsable: true, // 可折叠
children: [
'/blog/javaScript/one', //文章地址
'/blog/javaScript/two',
]
},
{
title: '框架相关',
collapsable: true,
children: [
'/blog/framework/vuepressBlog',
]
},
{
title: '工具收藏',
collapsable: true,
children: [
'/blog/tools/one',
'/blog/tools/two',
]
},
],
'/space/': [
{
title: '诗和远方',
collapsable: true,
children: [
'/space/poetryAndDistance/one',
]
},
{
title: '谝闲传',
collapsable: true,
children: [
'/space/talk/one',
]
},
]
}, // 侧边栏配置
sidebarDepth: 2, // 侧边栏显示2级
}
}
复制代码至此项目你已经完成一半了,关于配置这里我重点说几个点,也是我在实现过程中遇到了问题的地方.
a. favicon存放位置(别问我为神马,n多次失败后的经验,嘿嘿嘿!!!)
存放目录: .vuepress -> public/favicon.ico
引用方式: config.js文件中 href: './favicon.ico'
复制代码b. sidebar配置方式
vuePress官方给出了两种不同的方式,可以戳这里,但是还是觉得有瑕疵,如果将两种方式结合起来使用,会有何化学效果,bling,bling,bling. 因此config.js文件中的sidebar配置方式就产生了,使用后发现确实很棒,确认过眼神,是我想要的,bling,bling,bling. 预览实现的效果,请前往我的blog.
c. navbar模块
navbar对应的模块放在docs文件夹根目录下,即与.vuepress同级,各模块以文件夹的形式建立,例如我这里的blog, space.每一个文件下可以有一个README.md文件,也可以没有,没有的话,在navbar关联路径时候需要特定指定某一个子.md文件,避免navbar切换后 内容为空,因为默认会找该模块下的README.md文件.
- 在 package.json 文件里添加两个启动命令
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
复制代码
npm run dev项目飞起
本地启动项目: npm run dev
打包项目: npm run build
复制代码到这里项目就基本完成,下来呢就是一些业务逻辑方面或者根据个人喜好锦上添花的工作,总之,基础落成,下来就剩coding的事了(写博客文章的事情,需自身去修行完成)!
step3 (部署上线)
- 走到这一步的小伙伴们一定是coding完成了或者基本差不多了,那麽下来我们将项目部署到GitHub上,这样仰慕你的小伙伴就可以线上访问到你的博客啦.
- 方式很多种,我这里只以GitHub为例 (其实我只会这个:joy: :joy: :joy:)
登录 Github 新建两个仓库
新建仓库一： GITHUBUSERNAME.github.io（不用克隆到本地）
这里的 GITHUBUSERNAME 是你的GitHub名称,是你的GitHub名称,是你的GitHub名称,很重要的事情说三遍,只能必须完全相同,为了更具体说明,我贴一张图.
然后 Repository name 就填写为：GITHUBUSERNAME.github.io ,以我的为例子就是 HUYIJUNCODING.github.io,同样贴出来一张图
ok,第一个仓库就新建好了,该仓库不用clone到本地,不用做任何操作,所有代码的修改都在第二个仓库中进行,这个仓库后面关联后只是用来存放线上发布的代码的,即dist目录下的文件
新建仓库二： 这里的仓库名可以随便起,例如:blog.github.io（克隆到本地）
这个仓库存放本地项目代码,以后的修改均在这里进行.
- 如果是自己从头搭建的，那就将当前博客项目根目录下的内容拷贝到仓库二，并在仓库本地根目录下创建 deploy.sh 文件，内容如下：
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:USERNAME/USERNAME.github.io.git master //这句需要配置自己的仓库地址,除过这句代码,其他均复制粘贴即可
cd -
复制代码- 贴出来我的仓库目录来说明
- 修改deploy.sh文件(上面代码其实已经体现,不过为了说明其重要性,在这里单独再拿出来说明哈)
git push -f git@github.com:USERNAME/USERNAME.github.io.git master
// 就上面这句代码,如果你想要部署到 https://USERNAME.github.io上,你需要将USERNAME替换成你的GitHub名称,例如我的替换成 HUYIJUNCODING,
// 即git push -f git@github.com:HUYIJUNCODING/HUYIJUNCODING.github.io.git master
复制代码到这里有的小伙伴会疑惑那仓库一和仓库二如何做到关联呢,很好,如果你有这个疑问,那我这个时候就一本正经的告诉你,刚才修改的这个地方就是解决这个问题的,用来 关联两个仓库,仓库一就类似于我们的线上服务器,仓库二用于本地开发.
- 在 package.json 文件夹中添加发布命令
"scripts": {
"dev": "vuepress dev docs", //运行项目
"build": "vuepress build docs", //打包项目
"deploy": "bash deploy.sh", //发布项目
"publish": "vuepress build docs && bash deploy.sh" //打包发布一步完成(自定义的命令,为了将打包和发布合并成一步执行)
}
复制代码一座蒂花之秀落成!
发布命令: npm run deploy //仅仅发布项目,如果代码有更新,该操作前需要npm run build下
打包发布命令: npm run publish //先打包项目,再发布项目,就不需要再单独执行一次npm run build
复制代码- 完成后就可以运行自己的项目啦,这里是我的地址: huyijuncoding.github.io/
----------------------------------一条华丽的分割线------------------------------------
以为我bb完了,对吗?怎么可能,对啊,当然还没有,哈哈哈!,下面是一些友情提示和福利
- .md 文件中引用vue组件方法
a. 页面覆盖引用
该引用方法会覆盖当前整个页面(除过navbar),因此展示内容都在.vue组件里面写,跟我们写vue代码就一样了.
b. 局部引用
该引用方法不会覆盖当前页面,按需引入,局部展示,实例请前往文档. - 全局默认样式覆盖,颜色常量设置
override.styl //用于重写默认颜色常量，或者设置新的 stylus 颜色常量。(定义的样式常量可以在vue组件中直接使用)
style.styl //会被自动应用的全局样式文件,具有比默认样式更高的优先级(需要覆盖的默认样式代码写在该文件里)
复制代码当我们需要覆盖vuePress中一些默认样式,例如,navbar,sidebar字体颜色,背景色等就可以在style.styl文件中直接重写, 当需要定义些或者重写颜色常量,就可以在override.tyl中设置然后在.vue组件中直接使用.
- vuePress中可以使用的Emoji集合
- markdown语法资源
