VuePress学习全局安装前，我们需要Git和node两个软件。关于如何安装，我可以看之前hexo的视频教程。如果这两个都没有安装，那么下面的就不用看了。让我们全局安装它。首先，让我们安装npmstall-gvuepress#或yarnglobaladdvuepress。安装完成后，我们可以在命令行输入vuepress或者输入vuepress-V查看vuepressUsage:vuepress[options]Options:-V,--version输出版本号-h,--help输出使用情况informationCommands:dev[options][targetDir]startdevelopmentserverbuild[options][targetDir]builddirasstaticsiteeject[targetDir]将默认主题复制到.vuepress/theme进行自定义。运行vuepress--help查看给定命令的详细用法.vuepress-V0.14.8目??录结构不错，安装成功后，我们先来看看vuepress的目录结构首先我们新建一个项目，命名为“vuepress”，然后我们进入这个文件夹，我们在这个文件夹的空白处右击GitBashHere，我们会看到一个黑色背景的命令工具，上面的全局安装也可以在这里安装，查看版本号。这里我就不多说了。只需输入以下命令。让我们输入一行命令来生成package.json文件。npminit-y回车后，我们可以看到{"name":"vpress","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":[],"author":"","license":"ISC"}然后你回到vuepress文件夹。它最初是一个空文件夹。现在有一个额外的package.json文件并开始编写一个新的README.md文件。输入echo'#HelloVuePress!'在命令框>输入docs/README.md后，回到vuepress文件夹。我们可以看到docs文件夹下有一个README.md文件。打开这个文件可以看到HelloVuePress运行测试的字样在项目根目录的命令行输入vuepressdevdocsVuePressdevserverlisteningathttp://localhost:8080/。我们在浏览器中打开http://localhost:8080/可以看到一个非常简单的页面装饰首页配置我们来编辑docs目录下的README.md文件---home:trueheroImage:/mackxin.pngheroText:XinInntagline:关注分享，关注导航，关注心驿站actionText:每日更新→actionLink:/fuli/features:-title:心驿站导航详情：以Markdown为中心的项目结构，极简配置助你专注写作-title:心驿站客栈前端导航详解：享受Vue+webpack的开发体验，在Markdown中使用Vue组件，同时可以使用Vue开发自定义主题。-标题：馨客栈每日分享详情：VuePress为每个页面预渲染生成静态HTML，当页面加载时，它会作为SPA运行。页脚：麻省理工学院许可|Copyright?2018-presentMackxin---我们直接去浏览器看配置后的效果。有什么不同吗？新建一个配置文件，我们需要在配置前的docs文件夹下新建一个文件夹，命名为“.vuepress”，记住前面有个点，不要忘记。然后我们进入这个.vuepress文件夹，在里面新建一个config.js文件。我们的导航配置文件就是在里面配置的。配置favorite.icon在.vuepress文件夹下新建public文件夹，把自己的图标放进去然后我们在config.js配置文件中操作//.vuepress/config.jsmodule.exports={title:'mackxin',description:'xininn',base:'/',//这个部署到github相关配置markdown:{lineNumbers:false//代码块显示行号},head:[['link',{rel:'icon',href:'/mackxin.ico'}]],sidebar:'auto',//sidebar配置sidebarDepth:2,//sidebardisplaylevel2}现在重新执行命令yarndocs: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:'About',link:'/about'},{text:'分享',items:[{text:'技术',link:'/jishu/'},{text:'每日分享',link:'/fx/'}]},{text:'GitHub',link:'https://github.com/mackxin'},//下拉列表显示组{text:'Learning',items:[{text:'Frontend',items:[{text:'js'，链接：'/js/'}，{文本：'css'，链接：'/css/'}]}，{文本：'后端'，项目：[{文本：'php'，链接：'/php/'},{text:'java',link:'/java/'},]},]}],sidebarDepth:2,lastUpdated:'LastUpdated'}}这里需要创建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。jsmodule.exports={themeConfig:{sidebar:{'/fx/':['','fx1','fx2'],'/js/':['','js1','js2'],'/css/':['','css1','css2'],'/php/':['','php1','php2'],'/java/':['/java/',//JAVA文件夹的README.md不是下拉框{title:'javatitle',children:['/java/java1',//取docs为therootdirectoryFindthefile'/java/java2'//使用docs作为根目录查找文件]}]//下面是首页显示的侧边栏，如果没有可以删除代码需要显示首页//'/':[//'',/*/*///'contact',/*/contact.html*///'about'/*/about.html*///]}}}部署这里只说部署到GitHub首先我们在package.json文件中添加代码，如下{"scripts":{"docs:build":"vuepressbuilddocs","d":"bashdeploy.sh"}}然后我们在vuepress文件中添加代码在文件夹下新建一个名为deploy.sh的文件，与docs文件夹同级。不要放错地方。如果要发布到https://.github.io，记得把文件USERNAME中的改成你的github用户名，否则无效#!/usr/bin/envsh#确保脚本抛出遇到的错误set-e#生成静态文件npmrundocs:build#进入生成的文件文件夹cddocs/.vuepress/dist#如果发布到自定义域名#echo'www.example.com'>CNAMEgitinitgitadd-Agitcommit-m'deploy'#如果发布到https://.github.iogitpush-fgit@github.com:/.github.io.gitmaster#如果发布到https://.github.io/#gitpush-fgit@github.com:/.gitmaster:gh-pagescd-如果你想发布到https://.github.io/，记得把文件里的改成你的github用户名，把你的改成你新建仓库的名字哦，这里要注意哦。如果要发布到https://.github.io/，那么需要在config.js文件中进行配置。base:'/vblog/'#!/usr/bin/envsh#确保脚本抛出遇到的错误set-e#生成静态文件npmrundocs:build#进入生成的文件夹cddocs/.vuepress/dist#如果它被发布到自定义域名#echo'www.example.com'>CNAMEgitinitgitadd-Agitcommit-m'deploy'#如果发布到https://.github.io#gitpush-fgit@github.com:/.github.io.gitmaster#如果发布到https://.github.io/gitpush-fgit@github.com:<用户名>/.gitmaster:gh-pagescd-完成后，我们定位到vuepress的空白处，在此处右键gitbash，输入命令npmrund如果看到如下，说明成功>vpress@1.0.0dH:\blog\vpress>bashdeploy.sh>vpress@1.0.0docs:buildH:\blog\vpress>vuepressbuilddocs等待提取站点元数据...[15:53:56]编译客户端[15:53:56]编译服务器[15:54:35]39秒内编译服务器[15:54:36]40秒内编译客户端等待呈现静态HTML...完成成功！生成的静态文件在docs\.vuepress\dist.············这里省略了很多英文············createmode100644php/php1。html创建模式100644php/php2.html枚举对象：56，完成。计数对象：100%（56/56），完成。使用最多2个线程的增量压缩压缩对象：100%（53/53），完成。写入对象：100%(56/56),83.58KiB|950.00KiB/s，完成。总计56（增量30），重用0（增量0）远程：解析增量：100%（30/30），完成。到github.com:mackxin/vblog.git*[新分支]master->gh-pages现在你打开你的网站，我的是https://mackxin.github.io/vblog/部署到你自己的域名先去你个人域名的管理，后天分析。让我们添加记录类型。我们选择A类主机记录，一个www和一个@解析路由。我们默认吧，备案价值看我下面的介绍。我的域名是mackxin.github.io，所以我们要获取这个ip，需要ping一下。在命令行输入：pingmackxin.github.io回车，稍等一下，可以看到你的ip值pingmackxin.github.io[185.199.110.153]这里我们需要的值是185.199.110.153。添加CNAME文件，在仓库中找到Settings>Customdomainmackxin.github.io把www加上.liweiwen.top就可以了最后，如果看到这里还是不明白，那就需要看下面的视频链接了，我希望能帮助大家顺利的建站，上面提到的所有内容都可以在下面的视频链接中找到你想要的答案。如果看完还是不明白，那你可以多看几遍，学无止境。努力奋斗！想看视频记得点击下方链接学习如何使用VuePress搭建极简静态网站
