Vuepress+Vercel 搭建个人站点

我心飞翔 分类:javascript

Vuepress+Vercel 搭建个人站点

  • 效果地址
  • 源码地址
  • 文章

简介

Vuepress

vuepress.vuejs.org/zh/

  • Vue、Vue-Router、Webpack 驱动的单页应用
  • 极简静态网站生成器
  • 诞生初衷是为了支持 Vue 及其子项目的文档需求
  • VuePress 常被用来生成说明文档

通俗的讲,就是可以将 .md 文件转变成单个的 html 页面。利用它的这个功能,也被人们拿来生成个人技术站点。对 SEO 极好

Vercel

vercel.com/

  • 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 目录

主题美化

  1. /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

  1. 增加文章

项目结构调整如下

|— 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')
},
},
],
],
}
  1. vuepress-plugin-baidu-tongji:可实时获取页面访问情况

:::
如果暂时网站没有部署,可以先跳过
:::

百度统计官网

  • 注册账号
  • 访问如下地址

vuepress-4.png

vuepress-5.png
新增网站之后,点击如下地址可以获取到 hm
图片

[
'vuepress-plugin-baidu-tongji', // 百度统计
{
hm: '0127fd7df37b0f6903bf4c50236f10f3', // 复制到这里
},
]
  1. @vuepress/plugin-nprogress:页面切换进度条
  2. vuepress-plugin-zooming:图片可放大
  3. vuepress-plugin-one-click-copy:代码点击可复制
  4. vuepress-plugin-comment:文章评论,Github 登录

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 的内容
},
},
]
  1. @vuepress/plugin-last-updated:最新修改事件显示格式,以 Git 提交的时间为准

结合 Vercel 发布网站

vercel.com/

  1. 登录注册
  2. 关联 Github

vuepress-11.png

vuepress-12.png

  1. 选择导入到 的镜像仓库

vuepress-13.png

  1. 新建站点,点击进去,选择发布的目录就行

vuepress-14.png

  1. 自定义域名

点击你刚弄好的镜像仓库,setting -> domains

vuepress-15.png
将你域名解析到上面那个 ip 地址,等十几分钟就可以通过你的域名来访问了

回复

我来回复
  • 暂无回复内容