Vuepress introduction

I believe that you have also seen the official documents in the study of VUE with clear logic and reasonable design, which is of great help to our study. Do you also want to have such a style of the website, used to record some of their usual accumulation.

Vuepress is born for this, through Vuepress you can build a website and vUE official documents exactly the same, natural friendly SEO, you can not pay attention to any Settings, out of the box, of course, you can also enjoy to create their own style website.

In fact, the Vuepress website is a one-page application similar to vue bucket. You can even feel free to develop and customize themes if you are proficient with your VUE. When vuePress is built, it creates a server-side rendering version that is similar to NuxT.

Begin to build

A complete setup guide can be found on the Vuepress website. This article only provides a basic example

Create a new directory, blog, as the body of your blog project, and execute the following code in sequence

yarn init / / initialization
yarn add -D vuepress / / vuepress installation
Copy the code

Once you have VuePress installed, you can write articles. Create a new directory for your article, docs, and create a readme. md file under Docs to write yamL data

---
home: true
heroImage: /hero.png
actionText: Quick learning -
actionLink: /zh/guide/
features:
- title: Simple is the highest
  details: In order to Markdown A centered project structure that helps you focus on writing with minimal configuration.
- title: Vue drive
  details: enjoy Vue + webpack The development experience in Markdown The use of Vue Components that can be used at the same time Vue To develop custom themes.
- title: A high performance
  details: VuePress Generate static pre-renders for each page HTML, meanwhile, will be used as the page is loaded SPA Run.
footer: MIT Licensed | Copyright © 2018-present Evan You
---
Copy the code

One more step to see where we are, adding instructions to the script of package.json

"docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs".Copy the code

Execute the command and visit the local address to see the familiar page.

yarn docs:dev
Copy the code

The deployment of

The deployment guide for each platform can be found on the Vuepress website. This article only provides a github page deployment example

  1. Set the correct base in docs/.vuepress/config.js.

    If you want to post to https://

    .github. IO /, you can skip this step, because base is “/” by default.

    If you plan to post to https://

    .github. IO /

    / (that is, your repository is at https://github.com/

    /

    ), set base to /

    /




  2. In your project, create the following deploy.sh file (uncomment the highlighted lines at your discretion) :

    #! /usr/bin/env sh
Make sure the script throws any errors it encounters
set -e

Generate static files
npm run docs:build

Go to the generated folder
cd docs/.vuepress/dist

# if publish to custom domain name
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if posted to https://
        
         .github
        
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master

Github. IO /
        
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -
Copy the code

    Double-click deploy. Sh, and if nothing else, the blog will automatically deploy to the repository you want to publish to.

Use your own domain name

Vuepress also supports deployment to custom domain names, but requires resolution of its own domain name. Add the resolution as shown below

Continuous integration

After the whole blog project is submitted to Github, it is difficult to trigger the deploy.sh deployment manually. Yes, we do that with Travis – CI.

  1. Go to www.travis-ci.org and associate your own Github

  2. After entering the Settings, we need to fill in github token {access_token: token}.

  3. Open your Github, click Generate New Token, select all the options, Generate the token, copy and fill in Step 2

  4. Modify the deploy. Sh

  # If you use Travis continuous integration
  git push -f https://${access_token}@github.com/<USERNAME>/<USERNAME>.github.io.git master
# git push -f https://${access_token}@github.com/<USERNAME>/<REPO>.git master:gh-pages
Copy the code
  1. Created in the blog project root.travis.yml, fill in the content
language: node_js
sudo: required
node_js:
  - 8.112.
branch: master
cache:
  directories:
    - node_modules
script:
  - ./deploy.sh
Copy the code
  1. The last step is going to bedeploy.shTo make it executable, run the following command:
git update-index --add --chmod=+x build.sh
Copy the code

Each time you push the code, it will be automatically deployed. You can click www.travis-ci.org/dashboard to see if the deployment is successful.