全局安装VuePress
npm install -g vuepress
创建项目文件夹
mkdir vuepreeeBlogDemocd vuepreeeBlogDemonpm init -y
新建文件，构成目录结构如下：
vuepressBlogDemo├─── docs│ ├── README.md│ └── .vuepress│ ├── public│ └── config.js└── package.json
文件内容编写
config.js:
module.exports = {title: 'Lynn\'s blog',description: '我的个人网站',head: [ // 注入到当前页面的 HTML <head> 中的标签['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)],base: '/', // 这是部署到github相关的配置markdown: {lineNumbers: false // 代码块显示行号},themeConfig: {nav:[ // 导航栏配置{text: '前端基础', link: '/accumulate/' },{text: '算法题库', link: '/algorithm/'},{text: '微博', link: ''}],sidebar: 'auto', // 侧边栏配置sidebarDepth: 2, // 侧边栏显示2级}};
图片存放在docs/.vuepress/public/logo.jpg下，直接使用‘/’可以引入
package.json:
<!--添加：-->"scripts": {"dev": "vuepress dev docs","build": "vuepress build docs"}
部署上线
方式1：买个服务器，阿里云，腾讯云。。。方式2：Github Pages：Github 提供的、用于搭建个人网站的静态站点托管服务。新建仓库一
USERNAME.github.io
USERNAME 应该为github账户的用户名不用克隆到本地
新建仓库二
自定义名称克隆到本地此仓库是用来开发博客，以后只需更改这个项目 新建deploy.sh文件#!/usr/bin/env sh# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run build# 进入生成的文件夹cd docs/.vuepress/dist# 如果是发布到自定义域名# echo '' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果你想要部署到 https://USERNAME.github.iogit push -f git@:CathleenLynn/CathleenLynn.github.io.git master# 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目# git push -f git@:USERNAME/<REPO>.git master:gh-pagescd -
修改USERNAME
# 如果你想要部署到 https://USERNAME.github.iogit push -f git@:CathleenLynn/CathleenLynn.github.io.git master
仓库一负责显示网站内容，我们不需要改动它；日常开发和新增内容，都在仓库二中，并通过 npm run deploy 命令，将代码发布到仓库一。
在package.json中添加：
"scripts": {"deploy": "bash deploy.sh"}
关联两个仓库
npm run deploy
发布到自己的域名
1.域名解析2.在github仓库一USERNAME.github.io 中找到 Settings > Custom domain 把域名填进去save即可
美化-添加插件
参考：
VuePress博客美化之reco主题考
vuepress reco主题优化与修改
.vuepress/config.js中：
plugins:[...添加内容...]
1.看板娘
[//先安装在配置， npm install @vuepress-reco/vuepress-plugin-kan-ban-niang --save"@vuepress-reco/vuepress-plugin-kan-ban-niang",{theme: ['blackCat', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'miku', 'z16'],clean: false,messages: {welcome: '我是lookroot欢迎你的关注 ',home: '心里的花，我想要带你回家。',theme: '好吧，希望你能喜欢我的其他小伙伴。',close: '再见哦'},width: 240,height: 352}],
2.彩带背景
[//彩带背景 先安装在配置， npm install vuepress-plugin-ribbon --save"ribbon",{size: 90,// width of the ribbon, default: 90opacity: 0.8, // opacity of the ribbon, default: 0.3zIndex: -1 // z-index property of the background, default: -1}],
3.鼠标点击特效
[//鼠标点击特效 先安装在配置， npm install vuepress-plugin-cursor-effects --save"cursor-effects",{size: 3,// size of the particle, default: 2shape: ['circle'], // shape of the particle, default: 'star'zIndex: 999999999 // z-index property of the canvas, default: 999999999}],
4.动态标题
[//动态标题 先安装在配置， npm install vuepress-plugin-dynamic-title --save"dynamic-title",{showIcon: "/logo.png",showText: "(/≧▽≦/)你来啦！",hideIcon: "/failure.ico",hideText: "(●—●)喔哟，崩溃啦！",recoverTime: 2000}],
5.音乐播放器
3种音乐插件：
bgm-player，一款简洁易用的音乐插件，优势是好看，其他一无是处了music-bar，一个程序猿自己开发的插件，除本地，网络音频之外还支持从平台歌单获取链接(目前仅支持网易云音乐)，缺点是丑了点，支持一下这位老哥meting，在hexo上就一直用的插件，功能强大，配置丰富，目前应该最大强大的音乐插件了，我用的就是这个，强推，还支持在markdown中直接插入
安装：yarn add vuepress-plugin-meting
['meting', {// metingApi: "https://meting.sigure.xyz/api/music",meting: {// 网易server: "netease",// 读取歌单type: "playlist",mid: "13529775",},// 不配置该项的话不会出现全局播放器aplayer: {// 吸底模式fixed: true,mini: true,// 自动播放autoplay: true,// 歌曲栏折叠listFolded:true,// 颜色theme: '#f9bcdd',// 播放顺序为随机order: 'random',// 初始音量volume: 0.1,// 关闭歌词显示lrcType: 0},mobile :{// 手机端去掉cover图cover: false,}}]
其中type和mid是音乐来源
6.图片放大
[//图片放大插件 先安装在配置， npm install @vuepress\plugin-medium-zoom --save'@vuepress\plugin-medium-zoom', {selector: '.page img',delay: 1000,options: {margin: 24,background: 'rgba(25,18,25,0.9)',scrollOffset: 40}}]
7.复制代码弹窗插件
["vuepress-plugin-nuggets-style-copy", {copyText: "复制代码", //vuepress复制粘贴提示插件P 先安装在配置 npm install vuepress-plugin-nuggets-style-copy --savetip: {content: "复制成功!"}}]
8.加密功能
点击进入官网了解：
vuepress-theme-reco加密功能
1.项目加密
// .vuepress/config.jsmodule.exports = {theme: 'reco',themeConfig: {// 密钥keyPage: {keys: ['32位的 md5 加密密文'], // 1.3.0 版本后需要设置为密文color: '#42b983', // 登录页动画球的颜色lineColor: '#42b983' // 登录页动画线的颜色}}}
keys的32位的 md5 加密密文可以在官网进行转换。
如图所示，输入密码才可以进入博客浏览：
2.文章加密
如果项目是公开的，而某些文章可能需要加密，需要在 frontmatter 以数组的格式设置 keys，可以设置多个密码，数组的值必须是字符串。
---title: event对象date: -08-15tags:- javascript- eventcategories:- JavaScriptauthor:- 言梧keys:- '32位的 md5 加密密文'---
如图所示：
加密页的遗留问题：从某篇单独加密的文章直接进入另一篇文章时（比如导航栏）加密无法隐藏
9.评论插件
刚开始采用的评论插件vuepress-plugin-comment：
['vuepress-plugin-comment', //评论插件，写在这里样式丑{choosen: 'valine', // options选项中的所有参数，会传给Valine的配置 options: {el: '#valine-vuepress-comment',appId: '***',appKey: '***'}}]
但是写在插件中，页面很丑。
后来参考官网（https://vuepress-theme-/views/1.x/valine.html）
主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，可以根据自己的喜好选择Valine或者Vssue
在这里我选择了Valine:
module.exports = {theme: 'reco',themeConfig: {valineConfig: {appId: '...',// your appIdappKey: '...', // your appKey}} }
其中appId、appKey是需要在leancloud注册获取的。
评论的头像可以在gravatar里设置。
最后就是这样子的：
但是，加入插件后，页面加载速度超级慢
vercel就登场啦
vercel的加入
参考：/qq_19363379/article/details/108119140
1.注册vercel
可以直接用github账号登录vercel，如下图：
注意：
vercel不支持QQ邮箱。由于我的github是用QQ邮箱的，所以在Github-Setting -> Emails里添加了新的邮箱并进行主邮箱的更换。
之后就可以直接登录vercel啦
2.引入仓库与项目
选择github后，输入用来存放网站的GitHub Repo的地址，
Repository的URL是github仓库的https地址，不要弄错
然后点Continue，他会让你选择包含source code的文件：
（PS：如果是第一次使用Vercel的话，上面两步里会弹出在GitHub中安装vercel的许可，同意即可）
3.配置自定义域名
如果觉得《从零开始搭建一个博客 部署上线 自定义域名 vuepress+github+vercel》对你有帮助，请点赞、收藏，并留下你的观点哦！
