vuepress搭建个人扫书收藏夹
从零开始的搭建步骤
之前用过hexo搭博客,使用上和vuepress差不多,但是vuepress更轻便一些
新建github项目
在github右上角新建项目
拉取项目到本地
在本地终端使用ssh拉取项目git clone 项目地址(此处需要初始化git的SSH认证,后期提交可以便捷一些,具体步骤可以百度)
进入本地项目安装包初始化并且安装vuepress
# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress
# 此处安装依赖后如果使用vscode会提示将node_modules目录加入.gitignore
# 新建一个 docs 文件夹(直接右键新建吧)
mkdir docs
# 新建一个 markdown 文件(直接右键新建吧)
echo '# Hello VuePress!' > docs/README.md
# 开始写作
npx vuepress dev docs
此时进入开发阶段,但是更改文档时会出现无法热更新的情况
可以直接安装vscode插件
安装之后在编辑器右上角会出现预览按钮
在package.json新增scripts命令
{
"name": "testVuepress",
"version": "1.0.0",
"main": "index.js",
"repository": "git@github.com:wb121017405/testVuepress.git",
"author": "wb121017405 <121017405@qq.com>",
"license": "MIT",
"devDependencies": {
"vuepress": "^1.5.0"
},
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "deploy.sh"
}
}
- yarn docs:dev 本地开发
- yarn docs:build 构建静态页面
构建后可以看到目录如下
.vuepress 是vuepress的配置目录
dist 是默认的生成静态文件目录
index.html可以直接访问(http)
根目录新增部署脚本deploy.sh
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
yarn docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:wb121017405/testVuepress.git master:gh-pages
# 注意!!!
# 这里将本地目录master下的docs/.vuepress/dist目录,映射到github上的gh-pages分支提交
# 这样上传可以在一个仓库里两个分支分别上传不同的代码!
cd -
执行yarn deploy部署一次
弹出git bash界面执行并且自动关闭后可以在github上看到自己的静态页面已经提交成功!
注意:此时为gh-pages分支!!!
打开github-pages
选中gh-pages分支,这时看到页面已经打开,目录定向就是该目录下的index.html文件
更改vuepress配置设置
这个时候打开github-pages页面会发现样式错乱,控制台一大堆404
这是因为项目并非github-pages根目录,而是testVuepress
vuepress官方文档配置base
在.vuepress目录下新增config.js配置文件,然后写入base配置
module.exports = {
title: "标题",
base: "/testVuepress/",
description: "描述"
};
ps:等待几分钟后,重新访问页面即可
将文档源码上传到主分支
git基础操作,把源码全部提交就行(在.gitignore里添加忽略已经生成的静态文件!!!)
node_modules
docs/.vuepress/dist
项目就这样搭建完成,这样就可以免费的生成一个自己的博克啦,vuepress移动端也有样式。
添加百度统计
- 登录百度统计https://tongji.baidu.com/
- 点击左上角管理,点击新增页网站
- 补充网站信息
- 点击确定后就跳转到代码部署界面。最后一步,在config.js里添加代码
module.exports = {
title: "标题",
base: "/testVuepress/",
description: "描述",
// 引入百度统计
head: [
["link", { rel: "icon", href: "/favicon.ico" }],
[
"script",
{},
`var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?秘钥";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();`
]
],
};
浏览器标签小图标添加
[“link”, { rel: “icon”, href: “/favicon.ico” }]这里添加浏览器默认ico,文件放在.vuepress/public/目录下
添加评论插件
插件有很多,这里选用Valine
按照步骤申请应用秘钥存储评论(之后的评论可以在里面查看数据库)
LeanCloud
yarn add vuepress-plugin-comment -D
在config.js添加代码
module.exports = {
title: "标题",
base: "/testVuepress/",
description: "描述",
// 引入百度统计
head: [
["link", { rel: "icon", href: "/favicon.ico" }],
[
"script",
{},
`var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d8a6fdbfb8332bed5afb8abbed2f572c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();`
]
],
plugins: [
[
// 评论插件
"vuepress-plugin-comment",
{
choosen: "valine",
options: {
el: "#valine-vuepress-comment", //整个评论组件的ID
appId: 'Your own appId',
appKey: 'Your own appKey',
meta:['nick','mail'], //评论人信息填写昵称和邮箱
path:'<%- frontmatter.to.path %>', //定位评论使用的是页面文件名,否则定向错误
placeholder: "来喷我呀笨蛋!" //评论的输入框提示
}
}
]
]
};
修改评论框样式(Valine默认的宽度是100%撑满了)
#valine-vuepress-comment {
width: 90%;
margin: auto;
}
后面就没有啦,很简单的小玩具,可以看看我收集的YY小说 👏👏👏