VuePress搭建个人博客使用vuepress+githubpages搭建个人博客，在使用官方文档的过程中遇到了很多问题，所以整理了一下什么是VuePress？VuePress是一个静态网站生成器。使用Markdown编写页面，markdown-it将其解析为HTML。Vue、Vue-Router和webpack协同工作构建单页应用程序并生成静态网站。什么是github页面？GitHubPages是一个静态站点托管服务，可以从GitHub获取html、css和js文件并发布一个网站。快速启动vuepress快速启动#创建项目目录blog-demomkdirblog-demo&&cdblog-demo#初始化项目npminit-y#在本地安装VuePressnpminstall-Dvuepress#新建docs文件夹mkdirdocs#新建markdownfileecho'#test'>docs/README.md添加{"scripts":{"docs:dev":"vuepressdevdocs","docs:build":"vuepressbuilddocs"}}到package.json和运行如下命令，启动服务器npmrundocs:dev默认生成静态文件在.vuepress/dist，目录类似如下访问http://localhost:8080/查看运行结果部署一个在github上新建项目vuepress-blog在本地项目中在blog-demo根目录下创建deploy.sh文件#!/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:/.gitmaster:gh-pages#gitpushorigin本地分支：远端要创建的分支gitpush-fgit@github.com:/vuepress-blog.gitmaster:gh-pagescd-运行部署。sh脚本，查看github，生成的静态文件上传成功，在github上的setting中设置githubpagesaccess问上图中的地址，如果访问成功，则部署成功。整体流程和主要功能已经完成，在此基础上增加页面等功能。Vuepress踩坑侧边栏导航栏在这里遇到的坑最多。为了实现和VuePress官网类似的侧边栏，选择不同的导航栏后显示不同的侧边栏。最好的例子是官方VuePress文档本身的config.js源代码。每个页面必须有一个且只有一个一级标题#一级标题由于各种原因，个人很少使用一级标题，而markdown文件没有一级标题，所以侧边栏花了很长时间，这是官方文档也没有说清楚。导航栏中的路径不能写成完整路径nav:[{text:'guide',link:'/zh/guide/'}]VuePress官方文档示例静态资源路径Vuepress默认使用.vuepress/public存放静态资源（可修改），config.js中的base值会影响静态资源引用路径。例如在config.js中设置basemodule.exports={base:'/vuepress-blog/',//...}静态资源位置如下参考资源路径如下目前可以看到图片，说明成功。一旦设置了基本路径，它将作为前缀自动插入到.vuepress/config.js中。在/开头的资源路径中。一个新的分支本例使用gh-pages分支来维护静态资源。如果想在现有项目中添加描述文档/使用文档，使用VuePress（静态网站生成器，hexo等生成器原理相同）生成静态文件（.vuepress/dist文件夹下的内容）并上传到一个新的分支gh-pages。githubpages基于该分支建站，与主分支master互不影响，维护资源少。查看github-vuepress-blog，master分支负责维护博客源码，gh-pages分支提供给githubpages搭建网站。更新github页面每次修改后，运行deploy.sh文件。该文件生成一个新的静态文件并将其更新到gh-pages分支。刷新网页查看更新后的效果。博客源码分支可以查看push.sh文件，运行这个脚本更新源码到master分支。#!/usr/bin/envsh#确保脚本抛出遇到的错误set-e#Uploadgitinitgitadd-Agitcommit-m'update'#将源码部分上传到master分支gitpush-fgit@github.com:/vuepress-blog.gitmaster根据实际需要添加分支
