Vuepress+Vercel set up personal sites

  • Effect of address
  • The source address
  • The article

Introduction to the

Vuepress

vuepress.vuejs.org/zh/

  • Vue, VUE-Router, WebPack-driven single page application
  • Minimalist static web site generator
  • It was created to support the documentation needs of Vue and its subprojects
  • VuePress is often used to generate documentation

In layman’s terms, you can turn.md files into single HTML pages. Using this function, it is also used by people to generate personal technology sites. Excellent for SEO

Vercel

vercel.com/

  • Vercel is a cloud platform with static sites and serverless features that fit perfectly with your workflow.
  • It enables developers to host Web sites and Web services that can be deployed on the fly, automatically scale, without oversight, and without configuration
  • Repositories can be imported from Github with one click
  • Github updates trigger Vercel to synchronize repository code
  • Hosted static pages can form personal sites, and can customize domain (domain name access)

Project structures,

Initialize the project

-y git iniy NPM install -d vuepress NPM install -d vuepress-theme-vdoingCopy the code

The restructuring of the project is as follows

| -- - | - docs | - README. Md. Vuepress | - config. Js | - public | - the favicon. Ico # temporarily just looking for some pictures | | - images - web. PNG | - note. PNG | - Project. PNG | - au. PNG | - node_modules. | - gitignore | - package. The jsonCopy the code

Add the following code to the docs/.vuepress/ readme. md file

-- home: true heroImage: /images/au. PNG # tagline: a thousand miles away # JavaScript, ES6, Vue framework and HTML (5)/ CSS (3) Url: /images/web.png/docs/.vuepress/public Link: /project/ imgUrl: /images/project.png footer: /images/project.png MIT Licensed | Copyright © 2021 - present coderlyCopy the code

The package.json file changes the following code

"scripts": {
  "dev": "vuepress dev docs"."build": "vuepress build docs"."test": "echo \"Error: no test specified\" && exit 1"
}
Copy the code

At this point, after NPM run dev runs the project, you can already see the following page

packaging

NPM run build is packaged in docs/.vuepress/dist

Subject to beautify

  1. / docs /. Vuepress/config. Js, modify the code below
module.exports = {
  theme: 'vdoing'.// Use theme plugin vuepress-theme-vdoing
  title: 'Yu's Blog'.// The title of the site, which will be displayed in the navbar
  description: 'Liu Yu's Blog'.// A description of the site, which will be rendered to the HTML of the current page with a 
       tag
  base: '/'.head: [['link', { rel: 'icon'.href: '/favicon.ico'}].// the 
       tag is inserted between ].themeConfig: {
    sidebarDepth: 2.rightMenuBar: true.pageButton: true.sidebar: {
      mode: 'structuring'.collapsable: true,},nav: [{text: 'home'.link: '/' },
      {
        text: 'Front end Summary'.link: '/web/'.items: [{text: 'JavaScript'.items: [{text: 'Constructors and prototypes'.link: '/pages/39a948/' }, // Hash links are automatically generated when you add markdown files while running the project
              { text: 'the Cookie and Session'.link: '/pages/255011/'},],}, {text: 'TypeScript configuration'.link: '/pages/0bea56/'},],},],},}Copy the code

The page looks like this

  1. Increase the article

The restructuring of the project is as follows

| -- - | - docs | - README. Md. Vuepress | - config. Js | - 00. Page directory | - 01. Front end summary. Md. | - 01 front-end summary | - 01. | - public constructors and prototypes. Md | - the favicon. Ico # temporarily just looking for some pictures | | - images - web. PNG | - note. PNG | - project. The PNG | - au. PNG | - node_modules . | - gitignore | - package. JsonCopy the code

Docs /01. Front-end Summary /01. Front-end Summary Md file contents are as follows

Date: 2021-03-24 12:06:20 Permalink: Categories: /pages/39a948/ # categories: / docs/.vuepress/config.js - --- # Constructor and prototype content......Copy the code

The contents of the MD file are as follows

--- pageComponent: name: Catalogue data: key: 01. ImgUrl: /images/web.png Description: JavaScript, ES6, Vue framework and HTML (5)/ CSS (3), front-end page related technology title: Front-end summary categories: Date: 2020-03-11 21:50:53 Permalink: / Web # Link sidebar: False Article: false comment: false editLink: false --Copy the code

So far, we have added an article and a table of contents page for this category, but if the site is not demanding, we are done so far. To add more articles, just add the Markdown file under docs/01. Front-end summary /

Add comments and other plug-ins

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

Modify the docs/.vuepress/config.js file as follows

module.exports = {
  theme: 'vdoing'.// Use theme plugin vuepress-theme-vdoing
  title: 'Yu's Blog'.// The title of the site, which will be displayed in the navbar
  description: 'Liu Yu's Blog'.// A description of the site, which will be rendered to the HTML of the current page with a 
       tag
  base: '/'.head: [['link', { rel: 'icon'.href: '/favicon.ico'}].// the 
       tag is inserted between ].themeConfig: {
    sidebarDepth: 2.rightMenuBar: true.pageButton: true.sidebar: {
      mode: 'structuring'.collapsable: true,},nav: [{text: 'home'.link: '/' },
      {
        text: 'Front end Summary'.link: '/web/'.items: [{text: 'JavaScript'.items: [{text: 'Constructors and prototypes'.link: '/pages/39a948/' }, // Hash links are automatically generated when you add markdown files while running the project
              { text: 'the Cookie and Session'.link: '/pages/255011/'},],}, {text: 'TypeScript configuration'.link: '/pages/0bea56/'},],},],},plugins: [['vuepress-plugin-baidu-tongji'.// Baidu statistics
      {
        hm: '0127fd7df37b0f6903bf4c50236f10f3'.// Select * from * *},].'@vuepress/nprogress'.// Toggle the progress bar
    [
      'vuepress-plugin-zooming'.// Zoom in
      {
        selector: '.theme-vdoing-content img:not(.no-zoom)'.// Exclude class as a no-zoom image
        options: {
          bgColor: 'rgba (0,0,0,0.6)',},},], ['one-click-copy'./ / copy
      {
        copySelector: [
          'div[class*="language-"] pre'.'div[class*="aside-code"] aside',].copyMessage: 'Copy successful'.duration: 1000.showInMobile: false,}], ['vuepress-plugin-comment'./ / comment
      {
        choosen: 'gitalk'.// There is a tutorial
        options: {
          clientID: 'ee27cddb54c708e69312'.clientSecret: '78700378974e4e0682b1d8c67b7c86ea6912d243'.repo: 'au-blog'.owner: 'coderlyu'.admin: ['coderlyu'].pagerDirection: 'last'.id:
            '<%- (frontmatter.permalink || frontmatter.to.path || "123456789012345").slice(-16) %>'.title: 'comment' <%- frontmatter. Title %>'.labels: ['Gitalk'.'Comment'].body:
            'page: < % - the window. The location. Origin + (frontmatter. To. The path | | window. The location, the pathname | | "123456789012345") % >',},},], ['@vuepress/last-updated'.// Time display format
      {
        transformer: (timestamp, lang) = > {
          return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss'},},],],}Copy the code
  1. Vuepress-plugin-bidu-tags: Real-time access to pages

::: If the site is not deployed, you can skip :::

Baidu Statistics Official website

  • Registered account
  • Visit the following address

After the new website is added, click the following address to obtain ithm 值 

[
  'vuepress-plugin-baidu-tongji'.// Baidu statistics
  {
    hm: '0127fd7df37b0f6903bf4c50236f10f3'.// Copy here},]Copy the code
  1. @vuepress/plugin-nprogress: Progress bar for page switching
  2. Vuepress-plugin-zooming: Images can be zoomed in
  3. Vuepress-plugin-one-click-copy: code can be copied by clicking
  4. Vuepress-plugin-comment: article comment, Github login

GitHub

::: If the site is not deployed, you can skip :::

Log in to Github and create a repository to store comments (through Issues). This section uses the Au-blog repository as an example to allow third-party access to Github

[
  'vuepress-plugin-comment'./ / comment
  {
    choosen: 'gitalk'.options: {
      clientID: 'ee27cddb54c708e69312'.// Third party login to clientID
      clientSecret: '78700378974e4e0682b1d8c67b7c86ea6912d243'.// Third party login clientSecret
      repo: 'au-blog'.// Your repository
      owner: 'coderlyu'.Repository owner, fill in your Github account
      admin: ['coderlyu'].// If you have access to the repository, fill in your Github account
      pagerDirection: 'last'.id:
        '<%- (frontmatter.permalink || frontmatter.to.path || "123456789012345").slice(-16) %>'.// The unique identifier of the page. The length cannot exceed 50
      title: 'comment' <%- frontmatter. Title %>'.// Title of GitHub Issue
      labels: ['Gitalk'.'Comment'].// GitHub Issue tag
      body:
        'page: < % - the window. The location. Origin + (frontmatter. To. The path | | window. The location, the pathname | | "123456789012345") % >'.// Contents of GitHub issue}},]Copy the code
  1. @vuepress/plugin-last-updated: Displays the latest modified event format based on Git submission time

Publish the website in conjunction with Vercel

vercel.com/

  1. Log in to register
  2. Associated with making

  1. Select the mirror repository to import to

  1. Create a new site, click in, and select the directory to publish

  1. Custom domain name

Go to the repository you just created, setting -> Domains

Resolve your domain name to the IP address above, and wait ten minutes you can access through your domain name