准备搭建博客。之前了解过vuepress，极简，支持MD语法，还可以自己用Vue开发个性化的插件。还有一个重要的原因是，拥有自己的网站感觉很酷？！1、在网上搜索了很多相关的教程。我的参考教程和很多重复劳动都写的很简单。#全局安装npminstall-gvuepress#创建my-blog文件夹mkdirmy-blog#进入my-blog文件夹cdmy-blog#初始化项目该命令会自动生成package.json等文件npminit-yinmy-博客下创建的文件结构如下：.root目录├──docs│├──.vuepress││├──public存放图片等静态资源││├──styles│││└──palette.styl主题风格->全局││└──config.js配置│├──README.md主页│└──blog│└──README.md└──package.json??注意：README.md是必须的，访问/blog/时，会自动指向blog文件夹下的README.md。没有这个文件，会出现编译错误。1.config.jsmodule.exports={title:'访客17846',description:'Justdoit!',head:[//将添加到
['link',{rel:'icon',href:'/logo.ico'}],//指定浏览器Tab图标['link',{rel:'manifest',href:'/manifest.json'}],//PWA['link',{rel:'apple-touch-icon',href:'/logo.png'}]//指定safari浏览器保存书签到桌面图标],serviceWorker:true,base:'/',//指定保存的项目部署期间Addressmarkdown:{lineNumbers:true//代码块行号显示},themeConfig:{logo:'/logo.png',//首页显示图标nav:[{text:'HomePage',link:'/'},//如果不想指定首页地址，则不用改。默认指向docs下的README.md{text:'博文',link:'/blog/'},//默认指向blog下的README.md{text:'GitHub',link:'https://github.com/UAERNAME'}],lastUpdated:'Lastupdatetime'//页面底部的最后更新时间戳}};参考：vuepress基础配置官方文档PWA2.palette.styl$accentColor=#87cefa//主题色$textColor=#000//文字颜色$borderColor=#eaecef//边框颜色$codeBgColor=#282c34//代码背景色这个是一个全局样式文件，可以自己设置主题颜色等。另外，在自己写插件或者页面的时候，可以继承使用这些样式。3.package.json在package.json的"scripts"中添加如下代码：{..."scripts":{"dev":"vuepressdevdocs",//运行开发环境"build":"vuepressbuilddocs"//打包生成部署环境的文件}...}也可以不加，直接使用vuepressdevdocs和vuepressbuilddocs，macOS下请在命令前加sudo。接下来，您可以运行它并尝试=>npmrundev。这部分你可能会遇到一些常见的错误/问题，请参考第三部分2.DeploymentDeployment这里需要使用GitHub来托管代码，使用GitHubPages搭建静态站点。1.新建一个部署仓库在GitHub新建一个仓库，用于存放打包生成的部署文件（即npmrunbuild/vuepressbuilddocs命令生成的存放在docs/下的文件）.vuepressdist文件夹）。??注意：仓库必须具备以下特点：1.仓库名称必须是USERNAME.github.io。请注意，这是用户名而不是昵称。不需要在本地克隆存储库。用户名从GitHub地址->红圈中的内容可以看出，不区分大小写。2.您需要在设置中启用GitHubPages。步骤：进入仓库->点击tab中的Setting->GitHubPages，选择master分支。2.另外，新建一个源代码仓库。上述仓库用于存放部署工程编译后生成的文件。这个仓库用来存放博客项目的源码，也就是my-blog文件夹。3、部署自动化deploy.sh在项目根目录创建deploy.sh，写入如下内容：#确保脚本抛出遇到的错误set-e#编译生成静态文件npmrunbuild#进入生成的文件夹cddocs/.vuepress/distgitinitgitadd-Agitcommit-m'deploy'#发布到上面创建的第一个仓库gitpush-fgit@github.com:USERNAME/USERNAME.github.io.gitmaster#回到上一个工作目录cd-在package.json的脚本中添加命令：{..."scripts":{"dev":"vuepressdevdocs",//在开发环境中运行"build":"vuepressbuilddocs",//package,生成并部署环境文件//自动执行deploy.sh脚本，自动编译并上传dist到USERNAME.github.io仓库"deploy":"sudobashdeploy.sh",}...}这里，添加前面的一个sudo是因为在macOS上执行需要管理员权限，所以windows下就不用加了。另外如果在windows下执行，需要在powershell中执行。cmd无法识别此bash。差不多搭建了一个博客项目，也搭建了一整套自动化部署的流程。写完博客，在本地运行npmrundev。当然你也可以边写边运行。保存后可以直接通过热更新看到效果。检查无误后执行npmrundeploy，即可执行deploy.sh脚本进行编译和自动部署。另外，Markdown写作神器Typora非常好用。三、常见问题1、白屏和模块加载失败一般是因为新建的md文件中没有写入任何字符，导致出错。2.不知道为什么白屏，热更新失败。这在这里很常见。它说就是这样。您需要control+c退出并重新启动npmrundev。