首页 > 其他 > 详细

05-VuePress 上线部署 搭建你的专属博客

时间:2020-04-07 01:33:29      阅读:93      评论:0      收藏:0      [点我收藏+]

1、生成默认blog项目

技术分享图片  技术分享图片

 2、打包上传github

1)yarn build

2)进入到目录 E:\myOwn\test\vuepress02\blog\.vuepress\dist

3)git init

4)git add -A

5)git commit -m ‘deploy‘

技术分享图片

6)设置邮箱和用户名

技术分享图片

7)git push -f git@github.com:pfSlight/myblog.git master:gh-pages
技术分享图片

8)我之前生成给rsa  key,,所以无需重新生成,只需要配置下即可,如果需要生成和配置的请参考此博客 https://blog.csdn.net/weixin_39340288/article/details/81541817

技术分享图片

9)点击settings,,下方链接可以看到部署的项目

技术分享图片

10)可以看到页面缺少样式,打开控制台报错 Failed to load resource: the server responded with a status of 404 ()

技术分享图片

 11)如果你打算发布到 https://<USERNAME or GROUP>.github.io/<REPO>/(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>),则将 base 设置为 "/<REPO>/"

  所以需要在config.js文件中设置base属性

module.exports = {
  title: ‘VuePress Blog Example‘,
  description: ‘This is a blog example built by VuePress‘,
  theme: ‘@vuepress/theme-blog‘, // OR shortcut: @vuepress/blog
  base: "/myblog/",
  themeConfig: {},
}

 12)重新打包,并且重新push下,,正常显示了

技术分享图片

 技术分享图片

 13)需要将代码同步到远程仓库来

  # 链接远程仓库
  git remote add origin https://github.com/pfSlight/myblog.git

  # 拉去远程仓库文件
  git pull --rebase origin master

  # 同步更新代码
  git push -u origin master

 

到这就完事啦,,,祝顺利

05-VuePress 上线部署 搭建你的专属博客

原文:https://www.cnblogs.com/slightFly/p/12635591.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!