VuePress博客搭建

VuePress博客搭建

本人博客地址,欢迎访问并关注公众号

https://xiaoping027.github.io/

查看该博客的配置,欢迎star

Github

config.js

目录 docs/.vuepress/congig.js

const path = require("path");
const rootpath = path.dirname(__dirname);
const getConfig = require("vuepress-bar");
const barConfig = getConfig(`${rootpath}`, { pinyinNav: true });

// 生成配置信息

module.exports = {
  title: "深入前端学习",
  description: "前端进阶学习 JavaScript数据结构 前端工程化",
  lang: "zh-CN",
  head: [["link", { rel: "icon", href: "/icon.png" }]],
  themeConfig: {
    nav: [
      ...barConfig.nav,
      { text: "Github", link: "https://github.com/xiaoping027" }
    ],
    sidebar: barConfig.sidebar,
    sidebarDepth: 3,
    lastUpdated: "Last Updated"
  },

  plugins: [
    "reading-progress",
    "permalink-pinyin",
    "rpurl",
    "@vuepress/back-to-top",
  ]
};

public

存放一些静态文件的地方，比如首页的图片，网页的icon等等,引用地址就直接如下文的 /qrcode.jpg

head: [["link", { rel: "icon", href: "/icon.png" }]],

首页编写

docs/README.md

---
home: true
heroImage: /qrcode.jpg
actionText: 开始前端进阶之旅 →
actionLink: /javascript-shu-ju-jie-gou/
features:
  - title: 保持学习
    details: 我们一路奋战，不是为了改变世界，而是为了不让世界改变我们
  - title: 前端进阶之路
    details: 要安静的优秀，悄无声息的坚强。以后要开心，要飞扬跋扈，肆意妄为，无人能挡。
  - title: 保持专注和坚持
    details: 昨日种种，皆成今我，切莫思量，更莫哀。从今往后，怎么收获，怎么栽

footer: MIT Licensed | Copyright © 2019 - Alive  xiaoping027
---

::: tip
从小到大没什么梦想，一直在路上不问远方，只是衷心希望自己成为一个很厉害的人，你问我什么算厉害，大概就是能有朝一日，能够拒绝做不想做的事。
:::

package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
  },
  "name": "myblog",
  "version": "1.0.0",
  "description": "bolg",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.2.0",
    "vuepress": "^1.2.0",
    "vuepress-bar": "^0.2.2",
    "vuepress-plugin-permalink-pinyin": "^1.0.0",
    "vuepress-plugin-rpurl": "github:boboidream/vuepress-plugin-rpurl"
  },
  "dependencies": {
    "vuepress-plugin-reading-progress": "^1.0.8"
  }
}

插件

关于社区的插件使用，可以看下这个

https://vuepress.vuejs.org/zh/plugin/

• 自动生成侧边栏

安装插件vuepress-bar

文档地址

https://github.com/ozum/vuepress-bar

具体的使用可以看下文档

这边是用默认的约定的来设置的

const path = require("path");
const rootpath = path.dirname(__dirname);
const getConfig = require("vuepress-bar");
const barConfig = getConfig(`${rootpath}`, { pinyinNav: true });
//不使用中文， pinyinNav可以去掉

• 如果要使用中文的目录，要先安装 vuepress-plugin-permalink-pinyin插件。

https://github.com/viko16/vuepress-plugin-permalink-pinyin

• 因为用中文拼音之后生成的路由比较复杂，这边美化一下。使用插件vuepress-plugin-rpurl

https://github.com/boboidream/vuepress-plugin-rpurl

• 阅读进度条vuepress-plugin-reading-progress

https://github.com/tolking/vuepress-plugin-reading-progress

社区插件汇总

https://vuepress.github.io/zh/

github action 自动部署

这边是直接部署到了xiaoping027.github.io,如果之前没有使用过需要申请一下github action的服务，具体可以网上搜一下

name: Node CI

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8]
    steps:
      - uses: actions/checkout@master
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/checkout@master
        with:
          node-version: ${{ matrix.node-version }}
      - name: test
        run: |
          echo 'git config -l'
          git config -l
          npm install
          npm run build
          cd docs/.vuepress/dist
          git init
          git config --global user.email ${{ secrets.myemail }}
          git config --global user.name ${{ secrets.myname }}
          git config -l
          echo 'git config -l'
          git add -A
          git commit -m 'deploy'
          git push --set-upstream -f https://${{ secrets.myname }}:${{ secrets.mypass }}@github.com/xiaoping027/xiaoping027.github.io.git master
          ls -l
        shell: bash
        env:
          GITHUB_TOKEN: ${{secrets.github_token_deploy}}