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主题配置