vuepress搭建、主題選擇及部署

這兩天倒騰使用vuepress搭建本身的博客，遇到了一些問題，也選擇了非官方的主題來使用，而後將其部署到GitHub pages

參考vuepress官方文檔

• 官方文檔很簡單，輪子造車就行
• 主題選擇，能夠自定義一套主題和佈局
• 項目的目錄，根據本身的需求配置
• GitHub pages部署，deploy.sh的配置

1 博客的製做

基本的項目目錄結構爲：

├─ docs
  │  ├─ README.md
  │  └─ .vuepress
  │     └─ public
  │     └─  ├─ images
  │     └─  └─ favicon.ico
  │     └─ config.js
  └─ package.json
複製代碼

靜態資源配置

靜態文件存放在.vuepress/public，圖片在images文件夾

1.1 配置config.js

module.exports = {
  theme: 'yubisaki',
  title: 'Home',
  description: `個人博客`,
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }]
  ],
  base: '/blog/',
  port: 5021,
  repo: 'https://github.com/LenGuxin/blog',
  serviceWorker: true,
  evergreen: true,
  markdown: {
    anchor: { permalink: true },
    toc: {
      includeLevel: [1, 2]
    }
  },
  themeConfig: {
    background: `#1890ff`,
    github: 'LenGuxin',
    logo: '/images/logo.jpg',
    accentColor: '#1890ff',
    // 開啓標籤功能
    tags: true,
    // 每頁顯示的文章數量
    per_page: 10,
    // 建立文章的時間格式, 不設則不顯示 可選 [yyyy-MM-dd HH:mm:ss]
    date_format: 'yyyy-MM-dd HH:mm:ss',
    footer: 'death is our final destination. enjoy the journey',
    nav: [
      { text: 'Blog', link: '/' },
      { text: 'About', link: '/about/' },
      { text: 'Tags', link: '/tag/'},
      { text: 'JueJin', link: 'https://juejin.im/user/59032235b123db3ee46e9004/posts' },
      { text: 'Github', link: 'https://github.com/LenGuxin' }
    ]
  }
}
複製代碼

1.2 選擇本身喜歡的主題

這裏使用的是vuepress-theme-yubisak主題，比較簡約，就如您如今看到的個人博客

踩坑點

1. 部署時運行npm run deploy在git bash出現Could not read from remote repository.Please make sure you have the correct access rights and the repository exist

:tada: 出現這個多是倉庫地址不對，解決以下：

• 使用一下命令查看下：$ git remote -v
• 若提交地址不對，使用該命令更改倉庫地址： $ git remote set-url origin XXX
• 從新push下就好了

:tada: 出現這個多是你的deploy.sh配置問題：

• 若你是用ssh拉取並push的，deploy.sh中設置

 $ git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
複製代碼

• 若使用https拉取並提交的，deploy.sh中設置

 $ git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages
複製代碼

小清新博客效果：

相關連接：

1. blog地址
2. vuepress官方文檔
3. vuepress-theme-yubisak主題配置