持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
前言
大家好，我是HoMeTown。
最近一直在更与EPR相关的文章，做一些记录，然后有几个掘金的朋友在我的主页上发现了我的BLOG，表示比较感兴趣吗，今天抽出来一篇聊一下这个站的搭建。
Vuepress
Vuepress是一个Vue 驱动的静态网站生成器，主要是用来生成一些文档，但是它还提供了一些主题，我们可以利用这些主题自己去定制开发个人的BLOG。
vuepress-theme-reco
这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能，主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用，这个主题的UI我觉得是真的香，你几乎不用做任何改动就可以得到一个绝美UI的Blog website，如果你有自己更好的想法，当然也可以通过styles去自己写css（像我一样） 官方链接
安装
首先我们需要先安装Vuepress
mkdir blog && cd blog // 创建目录
npm init // 初始化包管理器
npm install -D vuepress // 安装vuepress
修改package.json，添加script脚本
{
"scripts": {
"dev": "vuepress dev . --open --host \"localhost\"",
"build": "vuepress build ."
}
}
紧接着安装 vuepress-theme-reco
npm install vuepress-theme-reco@1.5.7 --save-dev
基础依赖安装完毕
目录结构
- .vuepress 用于存放全局的配置、组件、静态资源等
- plublic 静态资源，多用于存放IMAGE
- styles 全局样式，可用于自定义样式
- config.js BLOG 配置
- blogs 用于存放blog md文件
- .cz-config.js 这个是提交的commit message格式化（非必要）
- .deploy.sh 部署脚本
- README.md 首页样式
.vuepress/config.js
这个是整个BLOG的一个配置文件，设置主题也在这个文件里，下面简单介绍一下这个文件里的配置项：
module.exports = {
title: 'Blog Title', // Blog的标题，会显示在页面左上角的位置
description: '描述',
dest: 'public', // 打包输出产物
thteme: 'reco', // 选用主题
head: [], // 头元素
themeConfig: { // 主题配置
record: '备案信息',
recordLink: '备案跳转链接',
startYear: '2017', // 项目开始时间，只用写年份
nav: [ // 导航栏
{
text: "Home", // item text
link: "/", // item path
icon: "reco-home" // item icon
},
...
],
friendLink: [ // 友链
{ title: 'juejin', desc: '稀土掘金', logo: '..', link: 'xxx'}
],
search: true, // 是否开启搜索
authorAvatar: '...jpg', // 作者头像
mode: 'auto', // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
modePicker: false, // 默认 true，false 不显示模式调节按钮，true 则显示
},
locales: { ... }, // 多语言
}
大致就是这些，具体的可以上Vuepress & vuepress-theme-reco 看看他们的文档，他们的文档相对来说还是比较全的。
plugins
还是在刚刚那个文件里，与 themeconfig同级新增plugins：
返回顶部
plugins: [
...
["@vuepress-reco/back-to-top"] // reco 内置
...
]
网易云音乐
安装依赖
npm install vuepress-plugin-meting --save
plugins: [
...
[
"meting",
{
meting: {
// 网易
server: "netease",
// 读取歌单
type: "playlist",
mid: "2859214503",
},
// 不配置该项的话不会出现全局播放器
aplayer: {
// 吸底模式
fixed: true,
mini: true,
// 自动播放
autoplay: false,
// 歌曲栏折叠
listFolded: true,
// 颜色
theme: "#ccc",
// 播放顺序为随机
order: "random",
// 初始音量
volume: 0.1,
// 关闭歌词显示
lrcType: 0,
},
mobile: {
// 手机端去掉cover图
cover: false,
},
},
]
...
]
图片放大插件
这个插件可以将你Blog里的文章的图片进行放大，还是挺友好的
安装依赖
npm install @vuepress\plugin-medium-zoom --save
plugins: [
...
[
"@vuepressplugin-medium-zoom",
{
selector: ".page img",
delay: 1000,
options: {
margin: 24,
background: "rgba(25,18,25,0.9)",
scrollOffset: 40,
},
},
],
...
]
看板娘
这个是我最喜欢的Plugins之一，很卡哇伊
安装依赖
npm install @vuepress-reco/vuepress-plugin-kan-ban-niang --save
plugins: [
...
[
//先安装在配置，
"@vuepress-reco/vuepress-plugin-kan-ban-niang",
{
theme: [
"blackCat",
"whiteCat",
"haru1",
"haru2",
"haruto",
"koharu",
"izumi",
"shizuku",
"wanko",
"miku",
"z16",
],
clean: false,
messages: {
welcome: "我是HoMeTown欢迎你的关注 ",
home: "去首页看看吧~",
theme: "好吧，希望你能喜欢我的其他小伙伴。",
close: "再见哦",
},
width: 240,
height: 352,
},
],
...
]
部署
部署还是采用了点对点的ssh部署，首先在自己本地建一个.deploy.sh脚本，然后执行两个命令
- 打包
npm run build - 部署
sudo scp -i ~/.ssh/id_rsa -r 打包后静态资源的绝对路径 服务器用户@ip地址:需要部署到的位置
web服务器
很简单，因为它打包出来都是html文件，所以直接用nginx设置location就好了，也不用try_file，在自己的云平台设置一下域名解析，就可以访问了，如果想要设置 https，参考我的这篇文章即可【Linux server】acme.sh申请免费SSL证书__Lets encrypt
完结~
