Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use vuepress to build a blog and publish it to a cloud server". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use vuepress to build a blog and publish to a cloud server".

VuePress installation

Install node.js

To install node.js, the version is required at > = 8

Configure environment variables

Install vuePress

Create a file Blog

Enter the folder to open the terminal and enter

Npm install-D vuepress

Created according to the following structure. For specific configuration, please refer to the official

├─ docs │ ├─ README.md │ └─ .vuepress │ └─ config.js └─ package.json

Set script configuration for package.json

There are two commands in VuePress:

The 1.vuepress dev docs command runs the local service, and you can preview the website by visiting (http://localhost:8080))

The 2.vuepress build docs command is used to generate static files, which are placed in the docs/.vuepress/dist directory by default, but you can also modify the default storage directory in the dest field in docs/.vuepress/config.js.

Here, you can encapsulate the two commands into scripts, using npm run dev and npm run build directly.

{"scripts": {"dev": "vuepress dev docs", "build": "vuepress build docs"}}

The md file in docs is the page we want to display, and vuepress compiles to HTML using markdown-it for each markdown file, which is then processed as a template for the Vue component. This allows you to use Vue directly in the markdown file.

Configuration

Home page configuration

The default theme provides a home page layout.

Home: true / / whether to use Vuepress default theme heroImage: / hero.png / / Home page picture actionText: Get Started → / / Button text actionLink: / guide/ Button Jump directory features: / / Home page three features-title: concise priority details: on the markdown-centric project structure, do the most simplified configuration to help you focus on creation. -title: Vue driver details: enjoy the Vue + webpack development environment, use Vue components in markdown, and develop custom themes through Vue. -title: performance efficient details: VuePress generates each page into a pre-rendered static HTML, loads each page, and then runs it as a single page application (SPA). Footer: MIT Licensed | Copyright ©2018-present Evan You--- / / footer

Navigation configuration

The navigation configuration file is in .vuepress / config.js

Nav controls the navigation bar link in the navigation configuration file, and you can change it to your own blog directory.

Module.exports= {title: 'hello vuepress', description:' Just playing around', themeConfig: {nav: [{text: 'Home', link:' /'}, {text: 'Guide', link:' / guide/'}, {text: 'External', link:' https://google.com'},]}} deployment

After configuration, you can deploy, execute npm run build to package the project, base is very important in the file config.js, set base as the root directory. You can publish it in the cloud disk, such as Baidu X disk, and you can access it directly through the link on github, or you can publish it on the CVM. Since I have a domain name, I intend to publish it on the CVM. You can choose here. Choose the node in Guangdong, about 0.88 yuan per day, which is cheaper than Aliyun.

Install Apache or nginx on the server

Here take nginx as an example, documentation.

Install (install dependency package gcc zlib zlib-devel pcre-devel openssl openssl-devel before installation)

/ / create a folder cd / usr/localmkdir nginxcd nginx// download tar package wget http://nginx.org/download/nginx-1.17.2.tar.gztar-xvf nginx-1.17.2.tar.g

Put the packaged items under / var/www/ (resolve the domain name to our host address before configuration)

Configuration

Main # Global configuration events {# nginx operating mode configuration.} http {# http settings. Server {# server host configuration listen 80th # listening port server_name xxxx.com;# domain name root / var/www/dist;# site directory index index.php index.html index.html;... Location {# routing configuration.... } upstream name {# load balancer configuration. }}

Check the nginx.conf file

Cd / usr/local/nginx/sbin./nginx-t # check the nginx.conf file for syntax errors

Start nginx

Cd / usr/local/nginx/sbin./nginx-s reload Thank you for your reading. The above is the content of "how to use vuepress to build a blog and publish to a CVM". After the study of this article, I believe you have a deeper understanding of how to use vuepress to build a blog and publish to the CVM, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.