博客

Vuepress+Vercel 搭建个人站点

2021-03-25  本文已影响0人  coderlyu

Vuepress+Vercel 搭建个人站点

简介

Vuepress

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

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

Vercel

https://vercel.com/

项目搭建

初始化项目

# 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-5.png vuepress-6.png 
;[
  '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 发布网站

https://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 地址，等十几分钟就可以通过你的域名来访问了

上一篇下一篇

猜你喜欢

热点阅读