Vuepress+Vercel 搭建个人站点
简介
Vuepress
- Vue、Vue-Router、Webpack 驱动的单页应用
- 极简静态网站生成器
- 诞生初衷是为了支持 Vue 及其子项目的文档需求
- VuePress 常被用来生成说明文档
通俗的讲，就是可以将 .md 文件转变成单个的 html 页面。利用它的这个功能，也被人们拿来生成个人技术站点。对 SEO 极好
Vercel
- Vercel 是一个云平台静态站点和无服务器功能完美地与您的工作流程适合。
- 它使开发人员可以托管可即时部署，自动扩展且无需监督且无需配置的网站和 Web 服务
- 可从 Github 一键导入存储库
- Github 更新可触发 Vercel 同步存储库代码
- 托管静态页面可形成个人站点，同时可以自定义域(域名访问)
项目搭建
初始化项目
# cd 项目
npm init -y
git iniy
npm install -D vuepress
npm install -D vuepress-theme-vdoing # 主题美化工具
项目结构调整如下
|— docs
|— README.md
|— .vuepress
|— config.js
|— public
|— favicon.ico
|— images # 暂时随便找点图片
|— web.png
|— note.png
|— project.png
|— au.png
|— node_modules
|— .gitignore
|— package.json
docs/.vuepress/README.md 文件增加如下代码
---
home: true
heroImage: /images/au.png # 显示在主页的图片
tagline: 不积跬步无以至千里 # 显示在主页的标题
features: # 显示在主页的分类
- title: 前端总结
details: JavaScript、ES6、Vue 框架以及 html(5)/css(3)，前端页面相关技术
link: /web/
imgUrl: /images/web.png # 图片以 docs/.vuepress/public 为根节点
- title: 学习笔记
details: Vue、axios、插件等源码的理解
link: /note/
imgUrl: /images/note.png
- title: 项目积累
details: 开源的项目以及项目中遇到的问题及其解决方法
link: /project/
imgUrl: /images/project.png
footer: MIT Licensed | Copyright © 2021-present coderly
package.json 文件修改如下代码
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"test": "echo \"Error: no test specified\" && exit 1"
}
此时，npm run dev 运行项目之后可以已经可以看到如下的页面了
vuepress-1.png
打包
npm run build
打包完一般在 docs/.vuepress/dist 目录
主题美化
- /docs/.vuepress/config.js 修改代码如下
module.exports = {
theme: 'vdoing', // 使用主题插件 vuepress-theme-vdoing
title: '阿誉的博客', // 网站的标题，它将显示在导航栏（navbar）上
description: '刘誉的博客', // 网站的描述，它将会以 <meta> 标签渲染到当前页面的 HTML 中
base: '/',
head: [
['link', { rel: 'icon', href: '/favicon.ico' }], // <link> 标签，插入到 <head></head>之间
],
themeConfig: {
sidebarDepth: 2,
rightMenuBar: true,
pageButton: true,
sidebar: {
mode: 'structuring',
collapsable: true,
},
nav: [
{ text: '首页', link: '/' },
{
text: '前端总结',
link: '/web/',
items: [
{
text: 'JavaScript',
items: [
{ text: '构造函数和原型', link: '/pages/39a948/' }, // 哈希链接是在你运行项目状态下，新增 markdown 文件自动生成的
{ text: 'Cookie和Session', link: '/pages/255011/' },
],
},
{ text: 'TypeScript配置', link: '/pages/0bea56/' },
],
},
],
},
}
此时页面效果如下
vuepress-2.png
- 增加文章
项目结构调整如下
|— docs
|— README.md
|— .vuepress
|— config.js
|— 00.目录页
|— 01.前端总结.md
|— 01.前端总结
|— 01.构造函数和原型.md
|— public
|— favicon.ico
|— images # 暂时随便找点图片
|— web.png
|— note.png
|— project.png
|— au.png
|— node_modules
|— .gitignore
|— package.json
docs/01.前端总结/01.前端总结.md 文件内容如下
---
title: 构造函数和原型
date: 2021-03-24 12:06:20
permalink: /pages/39a948/ # 这个是 docs/.vuepress/config.js 文件中themeConfig.nav 里面的 link 指向的地址
categories:
- 前端总结
tags:
-
---
# 构造函数和原型
内容......
docs/00.目录页/01.前端总结.md 文件内容如下
---
pageComponent:
name: Catalogue
data:
key: 01.前端总结
imgUrl: /images/web.png
description: JavaScript、ES6、Vue框架以及html(5)/css(3)，前端页面相关技术
title: 前端总结
categories:
- 目录页
date: 2020-03-11 21:50:53
permalink: /web # 链接
sidebar: false
article: false
comment: false
editLink: false
---
到现在为止，我们已经新增了一篇文章以及该分类的目录页面，如果对网站要求不高，到目前为止就结束了。
如果要再新增文章，只要在 docs/01.前端总结/ 下新增 markdown 文件就行
vuepress-3.png
增加评论等插件
npm i -D vuepress-plugin-baidu-tongji @vuepress/plugin-nprogress vuepress-plugin-zooming vuepress-plugin-one-click-copy vuepress-plugin-comment @vuepress/plugin-last-updated
修改 docs/.vuepress/config.js 文件如下
module.exports = {
theme: 'vdoing', // 使用主题插件 vuepress-theme-vdoing
title: '阿誉的博客', // 网站的标题，它将显示在导航栏（navbar）上
description: '刘誉的博客', // 网站的描述，它将会以 <meta> 标签渲染到当前页面的 HTML 中
base: '/',
head: [
['link', { rel: 'icon', href: '/favicon.ico' }], // <link> 标签，插入到 <head></head>之间
],
themeConfig: {
sidebarDepth: 2,
rightMenuBar: true,
pageButton: true,
sidebar: {
mode: 'structuring',
collapsable: true,
},
nav: [
{ text: '首页', link: '/' },
{
text: '前端总结',
link: '/web/',
items: [
{
text: 'JavaScript',
items: [
{ text: '构造函数和原型', link: '/pages/39a948/' }, // 哈希链接是在你运行项目状态下，新增 markdown 文件自动生成的
{ text: 'Cookie和Session', link: '/pages/255011/' },
],
},
{ text: 'TypeScript配置', link: '/pages/0bea56/' },
],
},
],
},
plugins: [
[
'vuepress-plugin-baidu-tongji', // 百度统计
{
hm: '0127fd7df37b0f6903bf4c50236f10f3', // 百度统计id，后面有获取教程
},
],
'@vuepress/nprogress', // 切换进度条
[
'vuepress-plugin-zooming', // 放大图片
{
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
options: {
bgColor: 'rgba(0,0,0,0.6)',
},
},
],
[
'one-click-copy', // 复制
{
copySelector: [
'div[class*="language-"] pre',
'div[class*="aside-code"] aside',
],
copyMessage: '复制成功',
duration: 1000,
showInMobile: false,
},
],
[
'vuepress-plugin-comment', // 评论
{
choosen: 'gitalk', // 后面有获取教程
options: {
clientID: 'ee27cddb54c708e69312',
clientSecret: '78700378974e4e0682b1d8c67b7c86ea6912d243',
repo: 'au-blog',
owner: 'coderlyu',
admin: ['coderlyu'],
pagerDirection: 'last',
id:
'<%- (frontmatter.permalink || frontmatter.to.path || "123456789012345").slice(-16) %>',
title: '「评论」<%- frontmatter.title %>',
labels: ['Gitalk', 'Comment'],
body:
'页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname || "123456789012345") %>',
},
},
],
[
'@vuepress/last-updated', // 时间显示格式
{
transformer: (timestamp, lang) => {
return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
},
},
],
],
}
- vuepress-plugin-baidu-tongji：可实时获取页面访问情况
:::如果暂时网站没有部署，可以先跳过:::
- 注册账号
-
访问如下地址
vuepress-4.png
vuepress-5.png
vuepress-6.png
;[
'vuepress-plugin-baidu-tongji', // 百度统计
{
hm: '0127fd7df37b0f6903bf4c50236f10f3', // 复制到这里
},
]
@vuepress/plugin-nprogress：页面切换进度条
vuepress-plugin-zooming：图片可放大
vuepress-plugin-one-click-copy：代码点击可复制
-
vuepress-plugin-comment：文章评论，Github 登录
:::如果暂时网站没有部署，可以先跳过:::
登录 Github，新建一个 repository，用来存储评论的内容(通过 Issues 操作)，这里以 au-blog 存储库为例
允许 Github 第三方登录
vuepress-7.png
vuepress-8.png
vuepress-9.png
vuepress-10.png
;[
'vuepress-plugin-comment', // 评论
{
choosen: 'gitalk',
options: {
clientID: 'ee27cddb54c708e69312', // 第三方登录 clientID
clientSecret: '78700378974e4e0682b1d8c67b7c86ea6912d243', // 第三方登录 clientSecret
repo: 'au-blog', // 你的存储库
owner: 'coderlyu', // 存储库拥有者，填你的 Github 账户
admin: ['coderlyu'], // 对仓库有写权限的人，填你的 Github 账户
pagerDirection: 'last',
id:
'<%- (frontmatter.permalink || frontmatter.to.path || "123456789012345").slice(-16) %>', // 页面的唯一标识,长度不能超过50
title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
body:
'页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname || "123456789012345") %>', // GitHub issue 的内容
},
},
]
- @vuepress/plugin-last-updated：最新修改事件显示格式，以 Git 提交的时间为准
结合 Vercel 发布网站
- 登录注册
-
关联 Github
vuepress-11.png
vuepress-12.png
-
选择导入到 的镜像仓库
vuepress-13.png
-
新建站点，点击进去，选择发布的目录就行
vuepress-14.png
-
自定义域名
点击你刚弄好的镜像仓库，setting -> domains
vuepress-15.png
将你域名解析到上面那个 ip 地址，等十几分钟就可以通过你的域名来访问了
