VuePress进修
全局装置前我们须要Git和node这两个软件，关于怎样装置能够我之前hexo的视频教程
假如这两个都没有装置好，那末下面就不须要看了哈，栈友们
全局装置
起首我们先全局装置一下
npm stall -g vuepress # 或许 yarn global add vuepress这里守候装置完成后，我们在敕令行输入 vuepress或许输入vuepress -V能够看到
vuepress
Usage: vuepress <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
dev [options] [targetDir] start development server
build [options] [targetDir] build dir as static site
eject [targetDir] copy the default theme into .vuepress/theme for customization.
Run vuepress <command> --help for detailed usage of given command.
vuepress -V
0.14.8目次构造
好，装置胜利后，我们先来相识一下vuepress的目次构造
起首我们先新建一个项目，项目名为 “vuepress” ，然后我们进入到这个文件夹,我们在这个文件夹的空白处右键Git Bash Here，我们会看到一个黑底的敕令东西，上面的全局装置也是能够在这里来装置和检察版本号的，这里不多说了，直接输入下面的敕令哈
我们先输入一行敕令，天生package.json文件
npm init -y
回车后，我们能够看到
{
"name": "vpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
然后你回到vuepress文件夹内，本来是空的文件夹，如今多出来一个package.json文件
最先写作
新建README.md文件
在敕令框输入
echo '# Hello VuePress!' > docs/README.md输入完后，照样回到vuepress文件夹内，我们能够看到多出来一个docs的文件夹内里有一个README.md文件，翻开这个文件能够看到有Hello VuePress的字样
运转测试一下
在项目根目次的敕令行输入
vuepress dev docs
VuePress dev server listening at http://localhost:8080/我们在浏览器翻开 http://localhost:8080/ 能够看到一个很简约的页面
装潢首页
首页设置
我们来编辑一下docs目次下的README.md文件
---
home: true
heroImage: /mackxin.png
heroText: 馨堆栈
tagline: 关注分享，关注导航，关注馨堆栈
actionText: 逐日更新 →
actionLink: /fuli/
features:
- title: 馨堆栈导航
details: 以 Markdown 为中间的项目构造，以起码的设置协助你专注于写作。
- title: 馨堆栈前端导航
details: 享用 Vue + webpack 的开辟体验，在 Markdown 中运用 Vue 组件，同时能够运用 Vue 来开辟自定义主题。
- title: 馨堆栈逐日分享
details: VuePress 为每一个页面预衬着天生静态的 HTML，同时在页面被加载的时刻，将作为 SPA 运转。
footer: MIT Licensed | Copyright © 2018-present Mackxin
---我们设置完后直接到浏览器看结果，觉得是否是不一样了哈
建立设置文件
在设置之前我们先要在docs文件夹下面新建一个新的文件夹，名字为 “.vuepress”，记得前面是有个点的哦，不要忘记了。然后我们进入到这个.vuepress文件夹，再在内里新建一个config.js文件，我们的导航设置文件就是在内里设置的哈
设置favorite.icon
在.vuepress文件夹下新建public文件夹，把本身制作好的icon放进去
然后我们在config.js设置文件来操纵
// .vuepress/config.js
module.exports = {
title : 'mackxin',
description : 'xininn',
base: '/', // 这是布置到github相干的设置
markdown: {
lineNumbers: false // 代码块显现行号
},
head : [
['link',{rel:'icon',href:'/mackxin.ico'}]
],
sidebar: 'auto', // 侧边栏设置
sidebarDepth: 2, // 侧边栏显现2级
}如今从新执行敕令yarn docs:dev 就能够看到结果了
导航设置
我们重要设置的也是config.js文件
module.exports = {
title : 'mackxin',
description : 'xininn',
head : [
['link',{rel:'icon',href:'/mackxin.ico'}]
],
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '馨堆栈导航', link:'http://mackxin.com/nav.html/' },
{ text: '馨堆栈前端导航', link:'http://mackxin.com/webnav.html/' },
{ text: '馨堆栈逐日分享', link: 'http://mackxin.com/fx.html/' },
{ text: '关于', link: '/about' },
{
text: '分享',
items:[
{ text: '手艺' , link:'/jishu/'},
{ text: '逐日分享' , link:'/fx/'}
]
},
{ text: 'GitHub', link: 'https://github.com/mackxin'},
// 下拉列表显现分组
{
text: '进修',
items: [
{
text: '前端',
items: [
{ text: 'js', link: '/js/' },
{ text: 'css', link: '/css/' }
]
},
{
text: '后端',
items: [
{ text: 'php', link: '/php/' },
{ text: 'java', link: '/java/'},
]
},
]
}
],
sidebarDepth: 2,
lastUpdated: 'Last Updated'
}
}这里我们要新建about、js、css、php、java、jishu、fx等七个文件夹，我们来看看新建完的目次构造哈
├─docs // docs目次下
│ ├─.vuepress //文件夹的名字
│ | ├─ public //文件夹的名字
│ | ├─logo.png
│ | ├─ config.js //设置文件
│ ├─js //文件夹的名字
│ ├─README.md //js首页文件
│ ├─css //文件夹的名字
│ ├─README.md //css首页文件
│ └─php //文件夹的名字
│ ├─README.md //php首页文件
│ └─java //文件夹的名字
│ ├─README.md //java首页文件
│ └─jishu //文件夹的名字
│ ├─README.md //手艺首页文件
│ └─fx //文件夹的名字
│ ├─README.md //分享首页文件
| about.md //关于页面
| README.md //首页设置侧边栏设置
重要设置的也是config.js文件
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: {
'/fx/': [
'',
'fx1',
'fx2'
],
'/js/': [
'',
'js1',
'js2'
],
'/css/': [
'',
'css1',
'css2'
],
'/php/': [
'',
'php1',
'php2'
],
'/java/': [
'/java/', // JAVA文件夹的README.md 不是下拉框情势
{
title: 'java题目',
children: [
'/java/java1', // 以docs为根目次来查找文件
'/java/java2' // 以docs为根目次来查找文件
]
}
]
// 下面的是首页显现侧边栏的，不须要首页显现的话能够删掉代码
// '/': [
// '', /* / */
// 'contact', /* /contact.html */
// 'about' /* /about.html */
// ]
}
}
}布置
这里临时只讲布置到GitHub Pages的哈
起首我们在package.json文件内里增加代码，以下
{
"scripts": {
"docs:build": "vuepress build docs",
"d": "bash deploy.sh"
}
}然后我们在vuepress文件夹下新建一个名为deploy.sh的文件，跟docs文件夹同级的哈，不要放错处所了
假如你想宣布到 https://<USERNAME>.github.io ,记得吧文件内里的<USERNAME>改成你的github的用户名哦，不然无效的哈
#!/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 -假如你想宣布到 https://<USERNAME>.github.io/<REPO> ，记得吧文件内里的<USERNAME>改成你的github的用户名哦，另有就是把你的<REPO>改成你新建的堆栈的名字哦
这里要注意一下哦
假如你想宣布到 https://<USERNAME>.github.io/<REPO>
那末你须要到config.js文件内里设置一下哦
base:'/vblog/'
#!/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 -弄好今后我们定位在 vuepress的空白处，右键git bash here
输入敕令
npm run d假如你看到的是下面的如许，那就申明你胜利了哈
> vpress@1.0.0 d H:\blog\vpress
> bash deploy.sh
> vpress@1.0.0 docs:build H:\blog\vpress
> vuepress build docs
WAIT Extracting site metadata...
[15:53:56] Compiling Client
[15:53:56] Compiling Server
[15:54:35] Compiled Server in 39s
[15:54:36] Compiled Client in 40s
WAIT Rendering static HTML...
DONE Success! Generated static files in docs\.vuepress\dist.
······
······
这里省略很多英文
······
······
create mode 100644 php/php1.html
create mode 100644 php/php2.html
Enumerating objects: 56, done.
Counting objects: 100% (56/56), done.
Delta compression using up to 2 threads
Compressing objects: 100% (53/53), done.
Writing objects: 100% (56/56), 83.58 KiB | 950.00 KiB/s, done.
Total 56 (delta 30), reused 0 (delta 0)
remote: Resolving deltas: 100% (30/30), done.
To github.com:mackxin/vblog.git
* [new branch] master -> gh-pages如今你翻开你的网站 ，我的就是 https://mackxin.github.io/vblog/
布置到本身的域名下
起首到你的个人域名的治理后天，举行剖析我们来增加一下纪录
- 纪录范例我们挑选 A 范例哈
- 主机纪录，一个www 一个@
- 剖析线路我们默许就好了
纪录值看下面我的引见
- 我的域名是mackxin.github.io ,那末我们要取得这个的ip的话我们就要ping一下
- 在敕令行输入：
ping mackxin.github.io然后回车，稍等一下，你就能够看到你的ip值了
Ping mackxin.github.io [185.199.110.153]
这里我们须要的值就是185.199.110.153了增加 CNAME 文件
在堆栈 mackxin.github.io 中找到 Settings > Custom domain 把 www.liweiwen.top 增加进去即可
末了，看到这里假如你照样没有看懂的话，那末你须要看下面的视频链接，愿望能够帮到你顺遂的搭建网站，上面说的一切内容都能够鄙人面的视频链接那边获得你想要的答案，假如看了照样不懂的话，那末你能够多看几遍
学无止境，好好勤奋，斗争吧！
想看视频的记得点击下面的链接进修哈
