Vuepress+Vercel 搭建个人站点

效果地址
源码地址
文章

简介

Vuepress

https://vuepress.vuejs.org/zh/

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

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

Vercel

https://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 目录

主题美化

/docs/.vuepress/config.js 修改代码如下

module.exports = {
  theme: 'vdoing', // 使用主题插件 vuepress-theme-vdoing
  title: '阿誉的博客', // 网站的标题，它将显示在导航栏（navbar）上
  description: '刘誉的博客', // 网站的描述，它将会以  标签渲染到当前页面的 HTML 中
  base: '/',
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }], //  标签，插入到 之间
  ],
  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: '刘誉的博客', // 网站的描述，它将会以  标签渲染到当前页面的 HTML 中
  base: '/',
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }], //  标签，插入到 之间
  ],
  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

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

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 发布网站

https://vercel.com/

登录注册
关联 Github

vuepress-11.png

vuepress-12.png

选择导入到的镜像仓库

vuepress-13.png

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

vuepress-14.png

自定义域名
点击你刚弄好的镜像仓库，setting -> domains

vuepress-15.png

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

Vuepress+Vercel 搭建个人站点

Vuepress+Vercel 搭建个人站点

简介

Vuepress

Vercel

项目搭建

初始化项目

打包

主题美化

增加评论等插件

结合 Vercel 发布网站

你可能感兴趣的:(Vuepress+Vercel 搭建个人站点)