Introduction to the

  • What is Vercel? Vercel is a web hosting service that supports not only static web site deployment but also serverless interface deployment. Updates can be automatically deployed by pushing files to Github, supporting rich templates and automatic HTTPS configuration.
  • How to achieve a dual-line blog?

Two services need to be set up. After domain name resolution is set, the foreign IP address and domestic IP address are resolved to the corresponding service respectively.

  • Domestic services are realized by Coding+COS+CDN.

  • Offshore services are implemented using Github+Vercel.

  • Will building two services be blogging trouble? The answer is no. Just update files to Github or Coding via Git, automatically synchronize content through continuous integration, and automatically compile the site. Using traditional Github Pages also requires you to back up your blog content.

  • To access Vercel, log in using your Github account or sign up if you don’t have a Github account.

  • Once logged in, click New Project.

  • Select browse all templates.

  • Find Hexo and click.

  • Then select your account.

  • Choose to use Github to create the project repository.

  • Enter the name of your repository, and if you don’t want others to see your blog file, set the check box to private repository.

  • Click the deploy

  • The page appears to indicate that the deployment is successful, and click visit to access it.

  • After clicking Dashboard, click View Domians to set the domain name.

  • Enter your own Domain name in the field below Domain and click Add. If you don’t have a Domain name, you need to buy it yourself.

  • After adding the domain name, you need to go to your DNS console for domain name resolution, add the record in the picture.

  • Example of domain name resolution:

  • At this point, a service has been successfully deployed.

Coding+COS+CDN construction service

  • Click on Coding to create and log in to your account.

  • Log in and select the project bar on the left, then click Create Project.

  • Project template select the first one on the left, enter the project name and create it.

  • After the project is created, click the code repository on the left, then click Create Project, select General Create, enter the repository name, and click Create.

  • Then click the Build Plan in the Continuous Integration menu.

  • Select the artifacts library and click custom Build Process.

  • Select Github as the code source, and then click Authorize. Once authorized, you can select the repository and select the project you created in Vercel.

  • Jump to the process configuration page and switch to the text editor.

  • Then enter the following in the editor, which needs to be replaced with the link to your coding repository:e.coding.net/classmatelin1/jingtaiwangzhan/www.classmatelin.top.git
'pipeline {'' any ' 'stages {'' stage(' checkout GitHub') {' 'steps {'' checkout([' '$class: 'GitSCM',' 'branches: [[name: env.BRANCH_NAME]],` `userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: Env.CREDENTIALS_ID]] ' ']) ' '} ' '} ' 'stage(' push to CODING') {'' steps {' '// Without modifying PROJECT_TOKEN_GK and PROJECT_TOKEN, They are built-in environment variables for CODING // Please modify them for your code base link ' 'sh "git push https://${PROJECT_TOKEN_GK}:${PROJECT_TOKEN}@e.coding.net/classmatelin1/jingtaiwangzhan/www.classmatelin.top.git HEAD:master"` `}` `}` `}` `}`Copy the code
  • After clicking save, click once to build immediately. If the build fails, please check carefully. The successful example is as follows:

  • Create a build plan for the deployment site in the same way you created the build plan, where the repository is selected as the repository in Coding.

  • Open the flow configuration text editor and add the following: Pipeline {Agent any stages {stage(‘ checkout ‘) {steps {checkout([class: ‘GitSCM’, Branches: \[\[name: env.GIT\_BUILD\_REF\]\], userRemoteConfigs: \[\[url: env.GIT\_REPO\_URL, credentialsId: Env.credentials \_ID\]\])}} stage(‘ Install dependencies ‘) {steps {sh ‘NPM install’ sh’ NPM update’}} stage(‘ generate static files ‘) {steps { Sh ‘./node\_modules/hexo/bin/hexo clean’ sh ‘./node\_modules/hexo/bin/hexo g’}} stage(‘ Deploy to Tencent Cloud Storage ‘) {steps {sh “coscmd Config -a {env.cos_secret_id} -s env.cos_secret_key −b{env.cos \_SECRET\_KEY} -b Env. COS_SECRET_KEY−b{env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}” sh ‘rm -rf. git’ sh ‘coscmd upload -r./public/ /’}}}}
  • Click Environment Variable -> Add Environment variable, four environment variables need to be configured, and these contents need to be found in Tencent Cloud COS console. Since Tencent COS has not been created, you can add the key and value of these four environment variables first. COS_SECRET_ID COS_SECRET_KEY COS_BUCKET_NAME COS_BUCKET_REGION

  • Log in to Tencent Cloud console.

  • Select the object storage service.

  • Select the bucket list and create buckets. Here, I choose Hong Kong node (there is no need to record, but domestic CDN cannot be opened either). If you need to use CDN, please select domestic node and record on the website. Please select Public read private write

  • After creating the bucket successfully, select basic configuration, static website Settings, and save the Settings as shown in the picture:

  • Set the user-defined source domain name, as shown in the figure. To enable CDN, please fill in the user-defined CDN domain name.

  • After saving successfully, you also need to set the content of CNANE to the domain name resolution, here the CNAME is not the same, according to your own.

  • Example of domain name resolution:

  • Click on bucket Overview and fill in the bucket name and storage region respectively into the environment variables just Coding build planCOS_BUCKET_NAME.COS_BUCKET_REGIONIn the.

  • Click On Key Management to jump to Access Management, click on API Key Management to generate a key, and then clickSecretIdandSecretKeyFill in the environment variables for the Coding build plan just nowCOS_SECRET_IDand

    COS_SECRET_KEYIn the.

  • Then click the build plan once to see if the build is successful. Use the domain name you bind to access the build successfully. Check the service address as shown in the figure if yes124.156.144.44:443Note COS has been successfully deployed, and the outbound IP access display is 76.xxx.xxx.xxx or your local proxy address.

  • So far double line blog basic content has been built, mainly for the configuration of the blog. You can visit the station here to experience it.

Configuration Hexo

  • Hexo official documentation

  • Next Theme Official

  • Welcome to the blogger site

Posted 29 minutes ago