使用vuepress開發我的的博客

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

話很少說先貼一張圖👀

開發這樣的一個博客發佈在github.io上很簡單，下面就開始吧！

1. 開始安裝項目

# 將 VuePress 做爲一個本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一個 docs 文件夾
mkdir docs

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

# 開始寫做
npx vuepress dev docs

1. 配置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創建一個倉庫

• 項目運行命令打包

// 生成靜態文件
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...

若是喜歡，給個贊啦🙏~

歡迎加入大前端學習交流羣
😎🔥🔥🔥