Vuepress Blog2.10.1

Installation and Configration

If you like the blog built by Vuepress, you can fork or clone it and give me a star.

This is a tutorial may help you:

  1. clone the rep:

    git clone

    or fork it, and clone form you repo.

  2. install the yarn:

  3. run the command:

    yarn docs:dev

    then you can see the site run at: localhost:8080, you can visit it.

  4. in docs/.vuepress/config.js, modify the title to yours, comment out lin 63 - lin 66(or you could register valine and modify the Comments.vue's config)

  5. in docs/.vuepress/blog, delete all of my post and put your post here(do not delete the directory).

  6. in docs/.vuepress/blog/Others/, replace it by your own resume.

There, everything about your blog is done!

You can deploy this site via Netlify: This is a tutorial, or you follow this:

  1. fork this repo, or push your clones repo to your GitHub.

  2. visit

  3. registe via GitHub account and then click New site from Git, and chose this repo

  4. then fill the deployment command:

    Build Command: yarn docs:build
    Publish directory: docs/.vuepress/dist
  5. wait... when the build success, then click Domain settings and custom you domains.

More config information could be found at my blog's post Vuepress Blog

Vuepress Update

Update Plugin & Vuepress

Update the vuepress:

yarn add vuepress@next -D
yarn add @vuepress/plugin-back-to-top -D
yarn add @vuepress/plugin-last-updated@next -D

如果想更新所有的 package.json 中的依赖到最新版本,则可以使用:

yarn upgrade-interactive --latest

需要手动选择升级的依赖包,按空格键选择,a 键切换所有,i 键反选选择。

也可以在 package.json 中的 scripts 下添加自定义的更新命令。

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "docs:upgrade": "yarn upgrade @next"

Add the back-to-top plugin to nginxig.js:

plugins: ['@vuepress/back-to-top']

Run Command:

yarn dev:docs # dev model

yarn dev:build # release


Usng Aliyun icon in vueblog project:

  1. iconfont links

  2. 选择图表并加入购物车,生成项目

  3. 复制代码,引入 css.

  4. 新建 <i class="iconfont icon_code"></i>

    如果是在 botton 中,则使用 <el-button icon="iconfont icon-liuyan"> Comments</el-button>.

Tags beta 0.10.1+

<Badge text="beta" type="warn"/>
<Badge text="0.10.1+" type="tip"/>

Code Collapsing

The <details> <summary></summary> </details> are from HTML5:

// code

Source code is:

<details><summary>inline 使用</summary>

//code block


Markdown extend

LeTex Formula

  1. Install markdown-it-katex: yarn add markdown-it-katex -D.

  2. Modify your nginxig.js in .vuepress

    module.exports = {
    markdown: {
        extendMarkdown: md => {
  3. Add Katex CSS into your theme or anywhere ( in exact markdown file you want to use Katex, in Layout.vue, ... )

    <link rel="stylesheet" href="">
    <link rel="stylesheet" href=""/>

Custom Containers


:::warning YOUR LABEL

:::danger YOUR LABEL




:::: tabs type:card ::: tab MyTitle

def a:
    return 0


::: tab MyTitle2 this is a tab ::: ::::

Asset Handing/image

将图片放置于 .vuepress/public 目录下,然后引用 ![Image](/imagename.type).

Last Updated: 7/31/2019, 7:04:21 AM