全局安装VuePress
npm install -g vuepress
创建项目文件夹
mkdir vuepreeeBlogDemo
cd vuepreeeBlogDemo
npm 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: 'https://baidu.com'}
],
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 'www.yourwebsite.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:CathleenLynn/CathleenLynn.github.io.git master
# 如果发布到 https://