使用vuepress开发个人的博客 - HelloWorld开发者社区

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

话不多说先贴一张图👀

使用vuepress开发个人的博客

开发这样的一个博客发布在github.io上很简单，下面就开始吧！

开始安装项目

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

配置package.json

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

配置

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
|     ├─components // 自定义组件
      ├─override.styl // 覆盖样式
│     └─ config.js // 配置文件
└─ package.json

页面配置

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

主要是config.js中的配置

const path = require('path');
const fs = require('fs');
module.exports = {
  title: 'BLOG',
  description: 'Curriculum Vitae',
  markdown: {
    lineNumbers: true
  },
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '技术', link: '/learning-notes/' },
      { text: '读书', link: '/reading/' },
      { text: '面试题', link: '/interview/' },
      { text: '关于', link: '/about/' },
      { text: 'github', link: 'https://github.com/zhaotbj' }
    ],
    sidebar: {
      '/learning-notes/': [
        {
          title: "Node.js",
          collapsable: true,
          children: genSidebarConfig("learning-notes/node", true)
        },
        {
          title: "Vue",
          collapsable: true,
          children: genSidebarConfig("learning-notes/vue", true)
        },
        {
          title: "React",
          collapsable: true,
          children: genSidebarConfig("learning-notes/react", true)
        },
         {
          title: "JS",
          collapsable: true,
          children: genSidebarConfig("learning-notes/js", true)
        },
        {
          title: "微信小程序",
          collapsable: true,
          children: []
        }
      ],
      '/interview/': [
        {
          title: "Vue面试题",
          collapsable: true,
          children: genSidebarConfig("interview/vue", true)
        },
        {
          title: "慕课网前端跳槽面试必备技巧",
          collapsable: true,
          children: genSidebarConfig("interview/muke", true)
        },
      ],
      '/reading/': [
        {
          title: "读书笔记",
          collapsable: true,
          children: genSidebarConfig("reading/reading-notes", true)
        }
      ]
    }

  }
}

function genSidebarConfig(dir, hasSub) {
  let p = path.join(__dirname, '../', dir);
  let files = fs.readdirSync(p);
  let subDir = hasSub ? dir.split('/')[1] : '';
  files = files.map(item => {
    item = subDir ? subDir + '/' + path.basename(item, '.md') : path.basename(item, '.md');
    return item;
  });
  return files;
}

部署上线

如果你打算发布到 https://<USERNAME>.github.io/

首先在GitHub建立一个仓库

使用vuepress开发个人的博客

项目运行命令打包

// 生成静态文件
npm run docs:build

// 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'


// 如果发布到 https://<USERNAME>.github.io

git remote add origin git@github.com:zhaotbj.github.io.git

git push -f git@github.com:zhaotbj/zhaotbj.github.io.git

// or git push -f git@github.com:zhaotbj/zhaotbj.github.io.git master


// 访问
https://zhaotbj.github.io

恭喜你，运行到这里就可以访问啦！ https://zhaotbj.github.io

GitHub地址 https://github.com/zhaotbj/vu...

如果喜欢，给个赞啦🙏~

欢迎加入大前端学习交流群
😎🔥🔥🔥

使用vuepress开发个人的博客