Build Vuepress blog/document system: Build, PDF export, SEO, auto compile, auto deploy, domain name, HTTPS, archive, etc.

Keywords: Front-end Java github Vue npm

This is a personal (pdai) original article, please indicate the source for reprinting and refer to the effect of blog building: [Java Full Stack Knowledge System] ( https://www.pdai.tech)

Article Content Directory

Part I - Building Blog/Document System

There are many choices to build a blog, such as a well-known CSDN, a blog park, knowledge, short books, etc. and self-build such as Hexo, Gitbook, Docisify, etc.I had a feeling of insecurity, and I used each one (...) but in the end I chose to move my blog one by one to the vuepress I built.@pdai

Blog/Document Preface

What are the options

There are many choices to build a blog, such as a well-known CSDN, a blog park, knowledge, short books, etc. and self-build such as Hexo, Gitbook, Docisify, etc.

What attempts have I made

  • Write it yourself: I wrote a system in java
  • Tools such as Docisify
  • Platforms like Blog Garden

Write it yourself: I wrote a system in java

The following systems were designed, developed, and maintained by me independently (over 40,000 lines of code in total). Only the blog documentation section is shown here.Here's a screenshot of an article I wrote in a previous blog park:

  • markdown editing

  • List of Articles

  • Supports exporting in various forms

  • Supports sharing to other virtual organizations

Wait.

Tools such as Docisify

Previously, I wrote a series of articles summary with the complete platform based on K8S.The tools used are Docisify.

The results are as follows:

Platforms like Blog Garden

Custom Styles are supported and js permissions are customized, which indicates a high degree of freedom control (CSDN is a bit conservative in this respect); however, the site has not been updated for a long time, and the home page style feels like it stayed a decade ago; the client program feels a little low;

The results are as follows:

You can see exactly what I wrote: [Blog Park Configuration] What sausage actions are included in the custom configuration of the blog Park

Why use vuepress now

Similar blog/document tools have advantages over vuepress: The following are extracts from: Vuepress website

  • Nuxt

What VuePress can do, Nuxt is theoretically competent, but Nuxt is designed to build applications, while VuePress focuses on content-centric static websites and offers some out-of-the-box features tailored to technical documentation.

  • Docsify / Docute

Both projects are also Vue-based, but they are fully run-time drivers and are therefore not friendly to SEO.If you don't focus on SEO and don't want to install a lot of dependencies, they're still a great choice!

  • Hexo

Hexo drives Vue's documentation all the time - in fact, we may have a long way to go before we move our main site from Hexo to VuePress.Hexo's biggest problem is that his theme system is too static and relies too heavily on plain strings, and we'd love to make the best use of Vue to handle our layout and interaction, while Hexo's Markdown rendering configuration is not the most flexible.

  • GitBook

Our subproject documentation has always been using GitBook.The biggest problem with GitBook is that when there are many files, the reload time after each edit is unbearably long.Its default theme navigation structure is also more restrictive, and the theme system is not Vue-driven.The team behind GitBook is now more focused on making it a commercial product than an open source tool.

Introduction to the blog/documentation tool vuepress

VuePress consists of two parts: the first part is a Minimalist Static Site Generator It contains Vue-driven thematic systems and plug-in API s, and the other part is the default theme optimized for writing technical documents, which was originally created to support the documentation needs of Vue and its subprojects.

Every page generated by VuePress has pre-rendered HTML and therefore has very good load performance and search engine optimization (SEO).At the same time, once the page is loaded, Vue takes over the static content and converts it into a full single-page application (SPA), while the other pages are only loaded on demand when the user browses.

How does vuepress work?

In fact, a VuePress website is created by Vue,Vue Router and webpack Driven single page application.If you've used Vue before, when you're developing a custom theme, you'll feel very familiar with the development experience, and you can even use Vue DevTools to debug your custom theme.

At build time, we create a version of the server-side rendering (SSR) for the application and render the corresponding HTML by virtually accessing each path.This was inspired by Nuxt The nuxt generate command for, along with some other items such as Gatsby.

Some features of vuepress

  • Built-in Markdown Extensions Optimized for Technical Documentation
  • Ability to use Vue components in Markdown files
  • Vue-driven custom theme system
  • Automatically generate Service Worker (supports PWA)
  • Google Analytics Integration
  • Git-based Last Update Time
  • Multilingual support
  • Responsive Layout
  • Natural SEO capabilities, much better than Docsify, a front-end rendering HTML

vuepress plug-in architecture

Its overall plug-in architecture case: Vuepress Plug-in Architecture Case

Blog/Document Infrastructure

Documentation is easy to set up, it mainly records the process, and some steps you can skip if you don't need them when reading.

brew installation or update

Uninstall the installed homebrew first with the following commands:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

Then reinstall:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

The latest homebrew is obtained directly by this method, and the expected results are obtained.Note: The above can fix the problem of chown: /usr/local: Operation not permitted.

If you feel slow and need to change the Brew mirror source, please refer to: Replace Brew Mirror Source

Update node and npm

Vuepress requires Node version: Node.js version >= 8.6.

  • Method 1: Manually delete the node and npm files below / usr/local/bin
  • Method 2: Overwrite the existing brew link --overwrite node

Refer to these two articles if necessary:

Configure vuepress working directory

  • Global Installation vuepress
yarn global add vuepress
  • Create project and initialize directory structure
# Catalog
mkdir tech-arch-doc
cd tech-arch-doc
# Initialization
yarn init -y # Or NPM init-y
# Folder to place markdown
mkdir md
# package.json, see the following
touch package.json
# Play vuepress correlation
mkdir .vuepress
cd .vuepress
# Create config.js, where you will find it later
touch config.js
# Play pictures and CNAME
mkdir public
# Styled
mkdir styles
# Create a picture inside
cd public
mkdir _images

The final structure is probably this: (Other gray folders are compiled)

Add Configuration and Content

  • Add Home Page
---
home: true
heroImage: /_images/index-read.gif
actionText: Quick Start →
actionLink: /md/java/basic/java-basic-oop.md
features:
- title: Tamping foundation
  details: Do not stumble to thousands of miles, Looking up at the stars needs to be down-to-earth
- title: Building System
  details: Say goodbye to fragmentation learning and help you build your own knowledge system
- title: Full stack development
  details: with Java Development as background, full stack development, DevOps
footer: © 2017-present pdai
---
  • config.js configuration
module.exports = {
    port: "3000",
    dest: "docs",
    ga: "UA-xxxxx-1",
    base: "/",
    markdown: {
        lineNumbers: true,
        externalLinks: {
            target: '_blank', rel: 'noopener noreferrer'
        }
    },
    locales: {
        "/": {
            lang: "zh-CN",
            title: "Java Full stack knowledge system",            
            description: "Contain: Java Basics, Java Partial Source, JVM, Spring, Spring Boot, Spring Cloud, Database Principles, MySQL, ElasticSearch, MongoDB, Docker, k8s, CI&CD, Linux, DevOps, Distributed, middleware, development tool, Git, IDE, Source reading, reading notes, Open Source Project..."
        }
    },
    head: [
        // ico
        ["link", {rel: "icon", href: `/favicon.ico`}],
        // meta
        ["meta", {name: "robots", content: "all"}],
        ["meta", {name: "author", content: "pdai"}],
        ["meta", {name: "keywords", content: "Java Full stack knowledge system, java system, java Knowledge System, java frame,java Detailed,java Learning Route,java spring, java Interview, Knowledge System, java Technical System, java programming, java Programming Guide,java Development System, java Development,java Course,java,java data structure, algorithm, Development Foundation"}],
        ["meta", {name: "apple-mobile-web-app-capable", content: "yes"}]
    ],
    plugins: [
    ],
    themeConfig: {
        // repo: "realpdai/tech-arch-doc",
        docsRepo: "realpdai/tech-arch-doc",
        // logo: "/logo.png",
        editLinks: true,
        sidebarDepth:0,
        locales: {
            "/": {
                label: "Simplified Chinese",
                selectText: "Languages",
                editLinkText: "stay GitHub Edit this page on",
                lastUpdated: "Last Update",
                nav: [
                ],
                sidebar: {
                }
            }
        }
    }
};
  • package.json configuration

Enter Project Directory

{
  "name": "tech-arch-doc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
  "devDependencies": {
    "vuepress": "^1.0.2"
  }
}
  • Local Test
vuepress dev

Preliminary results:

  • To generate a static HTML file, run:

By default, the file will be generated in.vuepress/dist, and of course, you can also modify it through the dest field in.vuepress/config.js, which can be deployed on any static file server

Please refer to the official website https://vuepress.vuejs.org/zh...

vuepress build

Document Setup Plug-ins and Configuration

This section focuses on documentation for new plug-ins and configurations, in addition to the default loaded configurations and plug-ins.

Add Document Additional Style Configuration: Theme

Note that many online examples are based on older versions, even when I used vuepress, the official website was not updated.

For the best configuration, see: Here (Configuration of other official websites has not been updated)

  • index.styl - Override style
.custom-page-class{
    /* Custom Styles */
}

// markdown blockquote
blockquote
  font-size 1rem
  color #2c3e50;
  border-left .5rem solid #42b983
  background-color #f3f5f7
  margin 1rem 0
  padding 1rem 0 1rem 1rem

  & > p
    margin 0

// markdown h2
h2
  font-size 1.65rem
  padding-bottom 1rem
  border-bottom 1px solid $borderColor
  • palette.styl - Style configuration override
// Width of content
$contentWidth = 100%

// colour
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

Add Back to Top Plugin

The article is very long. Add a button at the bottom right to return to the top button. The back-to-top plugin is available on the official website.

install

yarn add -D @vuepress/plugin-back-to-top@next
# OR npm install -D @vuepress/plugin-back-to-top@next

Use

module.exports = {
  plugins: ['@vuepress/back-to-top']
}

You can also refer to the plug-in for use: Plugin Offline

Add Picture Zoom Plugin

Picture zooming can use the @vuepress/plugin-medium-zoom plug-in, which is based on the medium-zoom plug-in.

yarn add -D @vuepress/plugin-medium-zoom@next
# OR npm install -D @vuepress/plugin-medium-zoom@next

Simple use:

module.exports = {
  plugins: ['@vuepress/medium-zoom']
}

Custom options:

module.exports = {
  plugins: {
    '@vuepress/medium-zoom': {
      selector: 'img.zoom-custom-imgs',
      // medium-zoom options here
      // See: https://github.com/francoischalifour/medium-zoom#options
      options: {
        margin: 16
      }
    }
  }
}

The effect can be viewed by clicking on the pictures in this article. For specific use, you can refer to: Plugin Offline.

Add Comment Plugin

Code Managed Platform Compliance OAuth 2 spec The OAuth API is available.Vssue leverages the platform's OAuth API to allow users to sign in and post comments.So what comment plugins are available?This uses Vssue, which is relatively new and may not know many people.@pdai

Vssue , Gitalk and Gitment Why choose Vssue:

  • Vssue supports Github, Gitlab, and Bitbucket and is easy to extend to other platforms.Github is only supported for u Gitment_ and Gitalk.
  • Vssue can publish, edit, and delete comments._u Gitment_u and Gitalk can only comment.
  • Vssue is based on Vue.js Developed, can be integrated into a Vue project, and provides a VuePress Plugin .Gitment is based on native JS, and Gitalk is based on Preact.

Here is a brief process for Vssue:

When users allow Vssue access on the platform's authorization page, the platform will redirect back to the Vssue page with code or token (if code, Vssue will request token from the platform based on code).

When Vssue acquires a token, it stores it in the local store, and the user successfully "logs in" to Vssue using the platform's account number.

Next, Vssue can get basic information about the user, get comments on the current page, and the user can also post comments.

Add the following configuration: Vssue Official Tutorial

plugins: {
  '@vssue/vuepress-plugin-vssue': {
    // Set `platform` instead of `api`
    platform: 'github',

    // Other Vssue configurations
    owner: 'OWNER_OF_REPO',
    repo: 'NAME_OF_REPO',
    clientId: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
  },
},

The results are as follows:

Add export of Vuepress document

:: warning Note:
Export pages are only available locally, and online functionality is temporarily turned off.
:::

I wrote my own document PDF export function (Page, Group, Current is the code number in my export function): Page = Group1+...GroupN, Group = Current1+...CurrentN

  • Current Page Export
  • Group Page Export: Used primarily to export all articles below one or more groups of chapters.
  • Page Page Export

Taking the export of SpringBoot as an example, the results are as follows:

Add svg label tag

Do you often see <img src= added to other people's projects? https://img.shields.io/badge/... ;>This label?This tag is mainly based on svg, there are two main types:

Effect after adding (status acquired automatically):

<img src="https://travis-ci.com/realpdai/tech-arch-doc.svg?branch=master">


<img src="https://img.shields.io/github/license/realpdai/tech-arch-doc">


<img src="https://img.shields.io/badge/...;>

Add Baidu Statistics

Note the addition of Baidu Statistics, consider recording each page click and intercepting router in enhanceApp.js:

export default ({router}) => {
    router.beforeEach((to, from, next) => {
        // @pdai: Click on each page to add Baidu statistics
        if(typeof _hmt!='undefined'){
            if (to.path) {
                _hmt.push(['_trackPageview', to.fullPath]);
            }
        }
        
        // continue
        next();       
    })
};

A page in Baidu Statistics has the following effect:

Add Copy Automatically Add Copyright Information

When copying your website, disable copying or adding copyright information, etc.

install

npm install vuepress-plugin-copyright

To configure

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'copyright',
      {
        noCopy: true, // Selected text will not be copied
        minLength: 100, // If the length exceeds 100 characters
      },
    ],
  ],
}

Effect, the copy page will be added automatically:

Copyright is owned by xxxx.
Link: https://www.pdai.tech/md/about/blog/blog-build-vuepress.html

See Plugins for more information: vuepress-plugin-sitemap

Add SEO optimization

This is a link for reference, but the meta information I added here does not use it.

Add Baidu Site Auto Push

Mainly used for automatic push to Baidu site, to help SEO.

install

npm install -D vuepress-plugin-baidu-autopush

Add Configuration

module.exports = {
  plugins: [
    'vuepress-plugin-baidu-autopush'
  ]
};

See Plugins for more information: vuepress-plugin-baidu-autopush

Add Sitemap Information

A Sitemap that is primarily used to generate sites and helps with SEO.

install

npm install vuepress-plugin-sitemap

To configure

// .vuepress/config.js
module.exports = {
  plugins: {
    'sitemap': {
      hostname: 'https://www.pdai.tech'
    },
  }
}

See Plugins for more information: vuepress-plugin-sitemap

Add Code Copy

In the code area, add a copy button to copy the code.

install

npm install vuepress-plugin-code-copy

To configure

module.exports = {
    plugins: [['vuepress-plugin-code-copy', true]]
}

See Plugins for more information: vuepress-plugin-code-copy

More Plugin Configurations

Please refer to awesome-vuepress

Blog/Document slightly complete configuration list

  • Cong.js section
module.exports = {
    port: "3000",
    dest: "docs",
    ga: "UA-xxxxxxxxxxx-1",
    base: "/",
    markdown: {
        lineNumbers: true,
        externalLinks: {
            target: '_blank', rel: 'noopener noreferrer'
        }
    },
    locales: {
        "/": {
            lang: "zh-CN",
            title: "Java Full stack knowledge system",            
            description: "Contain: Java Basics, Java Partial Source, JVM, Spring, Spring Boot, Spring Cloud, Database Principles, MySQL, ElasticSearch, MongoDB, Docker, k8s, CI&CD, Linux, DevOps, Distributed, middleware, development tool, Git, IDE, Source reading, reading notes, Open Source Project..."
        }
    },
    head: [
        // ico
        ["link", {rel: "icon", href: `/favicon.ico`}],
        // meta
        ["meta", {name: "robots", content: "all"}],
        ["meta", {name: "author", content: "pdai"}],
        ["meta", {name: "keywords", content: "Java Full stack knowledge system, java system, java Knowledge System, java frame,java Detailed,java Learning Route,java spring, java Interview, Knowledge System, java Technical System, java programming, java Programming Guide,java Development System, java Development,java Course,java,java data structure, algorithm, Development Foundation"}],
        ["meta", {name: "apple-mobile-web-app-capable", content: "yes"}],
        // baidu statstic
        ["script", {src: "https://hm.baidu.com/hm.js?xxxxxxxxxxx"}]
    ],
    plugins: [
        ['@vuepress/back-to-top', true],
        ['@vuepress/medium-zoom', {
            selector: 'img',
            // See: https://github.com/francoischalifour/medium-zoom#options
            options: {
              margin: 16
            }
        }],
        // see: https://vssue.js.org/guide/vuepress.html#usage
        ['@vssue/vuepress-plugin-vssue', {
            // set `platform` rather than `api`
            platform: 'github',
            // all other options of Vssue are allowed
            owner: 'realpdai',
            repo: 'tech-arch-doc-comments',
            clientId: 'xxxxxxxxxxx',
            clientSecret: 'xxxxxxxxxxxxxxxxxxxxxx',
        }],
        // see: https://vuepress.github.io/zh/plugins/copyright/#%E5%AE%89%E8%A3%85
        ['copyright', {
            noCopy: false, // Allow copying content
            minLength: 100, // If the length exceeds 100 characters
            authorName: "https://www.pdai.tech",
            // clipboardComponent: "[Java Full Stack Knowledge System] (https://www.pdai.tech)"
        }],
        // see: https://github.com/ekoeryanto/vuepress-plugin-sitemap
        ['sitemap', {
            hostname: 'https://www.pdai.tech'
        }],
        // see: https://github.com/IOriens/vuepress-plugin-baidu-autopush
        ['vuepress-plugin-baidu-autopush', {
            
        }],
        // see: https://github.com/znicholasbrown/vuepress-plugin-code-copy
        [['vuepress-plugin-code-copy', true]]
        // ...
    ],
    themeConfig: {
        //repo: "realpdai/tech-arch-doc",
        docsRepo: "realpdai/tech-arch-doc",
        //logo: "/logo.png",
        editLinks: true,
        sidebarDepth:0,
        locales: {
            "/": {
                label: "Simplified Chinese",
                selectText: "Languages",
                editLinkText: "stay GitHub Edit this page on",
                lastUpdated: "Last Update",
                nav: [
                    {
                        text: 'about', link: '/md/about/me/about-me.md'
                    }
                ],
                sidebar: {
                    "/md/about/": genSidebar4About()
                }
            }
        }
    }
};

// About page
function genSidebar4About(){
    return [
        {
            title: "about",
            collapsable: false,
            sidebarDepth: 0, 
            children: [
                "me/about-me.md",
                "me/about-content.md",
                "me/about-content-style.md",
                "me/about-arch.md",
                "me/about-motivation.md"
            ]
        },
        {
            title: "about - Setup of this document",
            collapsable: false,
            sidebarDepth: 0, 
            children: [
                "blog/blog-build-vuepress.md", 
                "blog/blog-build-ci.md",
                "blog/blog-build-cd.md",
                "blog/blog-build-ssl.md"
            ]
        }
    ];
}
  • package.json
{
  "name": "tech-arch-doc",
  "version": "2.0.1",
  "private": true,
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.0.3",
    "@vuepress/plugin-medium-zoom": "^1.0.4",
    "vuepress": "^1.0.2"
  },
  "dependencies": {
    "@vssue/api-github-v3": "^1.1.2",
    "@vssue/vuepress-plugin-vssue": "^1.2.0",
    "vuepress-plugin-baidu-autopush": "^1.0.1",
    "vuepress-plugin-code-copy": "^1.0.4-alpha",
    "vuepress-plugin-copyright": "^1.0.2",
    "vuepress-plugin-sitemap": "^2.3.0"
  }
}
  • enhanceApp.js
export default ({router}) => {
    router.beforeEach((to, from, next) => {
        // @pdai: Click on each page to add Baidu statistics
        if(typeof _hmt!='undefined'){
            if (to.path) {
                _hmt.push(['_trackPageview', to.fullPath]);
            }
        }
        
        // continue
        next();     
    })
};
  • index.styl
.custom-page-class{
    /* Custom Styles */
}

// markdown blockquote
blockquote
  font-size 1rem
  color #2c3e50;
  border-left .5rem solid #42b983
  background-color #f3f5f7
  margin 1rem 0
  padding 1rem 0 1rem 1rem

  & > p
    margin 0

// markdown h1
h1
  font-size 2rem
  padding-bottom 1rem
  border-bottom 1px solid $borderColor

// markdown h2
h2
  font-size 1.65rem
  border-bottom 0px solid $borderColor

// custom block for tip
.custom-block
  .custom-block-title
    font-weight 600
    margin-bottom -0.4rem
  &.tip, &.warning, &.danger
    padding .1rem 1.5rem
    border-left-width .5rem
    border-left-style solid
    margin 1rem 0
  &.tip
    background-color #dfefff
    border-color #428eb9

// logo
.navbar
  .logo
    height $navbarHeight - 1.6rem
    min-width $navbarHeight - 1.6rem
    margin-right 0rem
    vertical-align top
  • palette.styl
// Width of content
$contentWidth = 100%

// colour
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

Other reference resources for vuepress

Part Two - Auto-compilation of Blogs/Documents

Documents are hosted in Github and there are several options: Github Actions that come with Github, or the plug-in Travis CI, or the plug-in Circle CI.@pdai

Travis CI

Note: Travis CI has a big dad. Note: Travis CI has two websites, travis.com and travis.org, one for public and one for private projects. Then github can be switched between public and private projects, so some configurations may not be set correctly after switching.

Github Enable Plugin

Get into https://github.com/marketplac...

Configure Plugins

Add.travis.yml

Note: This is a simple compilation operation where you can force the results of the compilation (static html files) to the branch of the current repository where the compiled files are placed; or you can install travis-cli on your own server and generate certificate information (automatically generate relevant environment variables) at travis.com (note not travis.org) for automated deployment.

Neither of these options is used here because:

  • 1) travis-cli does not support adding certificate information automatically for private projects;
  • 2) At the same time, there are more static resources in this document and the results of pull compilation are larger.
  • 3) Githubla's larger resource speed is not guaranteed to be stable for reasons you know; webhook is comparatively enough.
language: node_js

sudo: false

node_js:
  - "12"

cache:
  yarn: true
  directories:
    - node_modules

branches:
  only:
    - master

env:
  global:
    - GITHUB_REPO: github.com/realpdai/tech-arch-doc.git

before_install:
  - export TZ=Asia/Shanghai

script:
  - vuepress build

Trigger compilation

View final submission compilation status

Generate build state svg

Part 3 - Auto-deployment of Blogs/Documents

This article describes how the current document is automatically compiled and deployed on my own server.@pdai

Document Compilation and Deployment Process

build

Previously, I purchased a low-allocation Aliyun virtual machine, the system is CentOS 7.x.

Install NodeJS

  • Add yum source
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
  • yum install
yum install -y nodejs

Other ways to refer to this article https://blog.csdn.net/bbwangj...

Clean up some of the old services

gitlab-ee, jenkins, httpd, etc. were previously built on the server and need to be cleaned up now because my own code hosting has switched to github's private repository; those that do not need to be cleaned up are skipped.

  • Clean up gitlab-ee

https://blog.csdn.net/huhuhue...

  • Clean up httpd

https://www.cnblogs.com/richa...

Install Nginx and configure

  • install

https://www.centos.bz/2018/01...

  • Configure Start-Up Self-Starting

https://www.cnblogs.com/jepso...

  • Configure nginx.conf

https://www.cnblogs.com/alvin...

  • Configure firewalld

https://blog.csdn.net/benchem...

Deployment Project

Trigger compilation and reload nginx via webhook

Part 4 - Domain name of blog/document, HTTPS, filing

This article mainly records the domain name, HTTPS, for the record of this document.@pdai

The three steps of Document Domain Name, HTTPS, and Filing are irreversible because of dependencies.

Request a domain name

  • Application: Wanwan

  • Request a domain name

https

  • On Ali Cloud: SSL Certificate

  • Request Certificate

  • Certificate Audit

Review completed in 30 minutes

  • Certificate details

This details page needs to be uploaded when filing.

  • Certificate Download

Keep on record

Direct access through the domain name on port 80/443 is a filing requirement, and personal websites I built 18 years ago are not filed.

  • Visit www.pdai.tech before filing

  • Enter the record

During this period, you need your mobile phone to pass Aliyun face authentication, and upload your identity card, domain name and certificate to take photos.

  • Filing Audit

Note that Ali Yun acts as the agent for the first instance of filing. Requirements: The personal website must be named as the personal blog of xxxx or the personal home page of xxx, otherwise the filing will not pass.The application period is about 20 days. After the application is completed, the Ministry of Industry and Communications will send a text message to the registered mobile phone number, and then it can be used in 8 hours.

Server Resource Selection

So how much server resources do you need to build such a website? The place of Ali Yunkeng is that new users are cheaper in the first year, and subsequent renewals are expensive.

  • See how much resources are needed to build

  • Look at the cost

1 CPU, 1-2G memory is recommended; 1Core-1GB is more than 287 a year and 642 for five years; later, if you need it, you can add configuration Online

  • Regarding renewal, I previously chose 2 CPU, 4 GB memory; the original year was 780, and the renewal price was 2363;

:::tip
Subsequently: I downgraded Ali to 1U 1GB on the server, but it required 700MB of memory to compile static pages using Vuepress build, which would result in insufficient memory.I'm thinking about swap as a way to put some memory resources on swap disks.
:::

  • Swap Space

Reference articles are as follows: https://blog.csdn.net/u010457...

Pre-compile

Compiling (not enough memory to swap zone)

Final results

Posted by DannyM on Mon, 11 Nov 2019 19:49:02 -0800

Hot Keywords

©2024 Programmer Group