摘要：在上搜索相关项目时会发现，有的项目不光写了一手好文档并且还给出了项目的在线运行。如何在维护源代码的同时并同时生成项目主页以下以的单页应用为例，给出完整的项目维护以及生成项目主页的步骤。后期可在该基础上进行自己项目的开发。
前言
Github作为目前优秀的同性交友平台，其上维护了众多优秀的开源项目。目前Github上关于前端的项目也是数不胜数，Vue、React、Angular等等。自己也是通过官方文档+github的方式来学习一些新的技术和框架。在github上搜索相关项目时会发现，有的项目不光写了一手好文档并且还给出了项目的在线运行Demo。事实胜于雄辩，一个在线演示可能给项目带来更好的印象分。如何在github上维护自己个人项目源代码的同时并生成项目主页呢？
Github项目主页Github给用户提供了运行静态页面的地址，如何展示个人项目的静态页面？以下是创建项目主页的关键：
gh-pages分支
访问地址：[github用户名].github.io/[项目仓库名]，如：monster1935.github.io/vue-example
生成项目主页首先是将欲展示的静态页面推送的Github个人项目仓库的gh-pages分支下，然后通过上述的访问形式访问。
如何在维护源代码的同时并同时生成项目主页以下以Vue的单页应用为例，给出完整的项目维护以及生成项目主页的步骤。
一、Github上创建远程仓库
在github上为个人项目创建远程仓库，如下所示:
二、clone远程仓库到本地
创建好远程仓库后，使用git工具将远程仓库clone到本地，如下所示:
三、使用vue-cli生成vue单页应用项目
进入项目根目录，使用vue-cli生成vue的项目的初始结构。步骤如下：
# 以webpack模板生成项目原型 vue init webpack vue-example
在使用vue-cli脚手架工具生成vue项目过程中会提示是否安装一些辅助工具库，可根据自己项目要求酌情安装，或者生成项目后安装。
项目生成完毕后，进入package.json所在目录执行npm install命令，安装项目运行需要的依赖。
依赖安装完成后，即可执行npm run dev命令启动本地的webpack-dev-server进行开发调试。
如下图所示，出现如下画面代表vue项目初始化完毕。后期可在该基础上进行自己项目的开发。
四、将项目推送到远程仓库
项目开发过程中，可以将项目源码推送至github远程仓库中管理。
git add --all git commit -m "Initial the vue project" git push
五、执行项目构建命令，并将构建后的静态页面推送至gh-pages分支
项目开发完毕可以执行 npm run build 打包文件，进行文件的打包发布流程。
切换到gh-pages分支 git checkout -b gh-pages
执行 npm run build 命令，构建代码
将dist目录下的所有文件夹推送至远程仓库的gh-pages分支，执行以下命令：
# 强制添加dist文件夹，因为.gitignore文件中定义了忽略该文件 git add -f dist # 提交到本地暂存区 git commit -m "Initial the page of project" # 部署dist目录下的代码 git subtree push --prefix dist origin gh-pages
注：使用git subtree命令可以在同一分支上维护源代码以及构建代码，在部署时仅仅推送dist目录下的内容。
小结以上所述的在github上gh-pages分支上生成项目主页主要是利用了github提供的静态页解析功能，因此本文中所属的范围仅使用于静态页面的部署。在将Vue应用部署到gh-pages分支后，可能会出现部分资源无法加载的问题，原因就在于vue中的webpack配置在打包时其publicPath为根路径，如果该静态页在服务器中被访问则不会出现以上问题。在github解析时如果按照根路径解析会出错，因此在github上部署静态页时可以考虑将publicPath设置为当前目录，即 publicPath: "./" 。
使用Vue-cli webpack模板生成的vue项目，出现上述问题应设置config/index.js中build对象下的assetsPublicPath字段为assetsPublicPath: "./",原理都是设置publicPath字段。
更新目前发现了一种更为简便的部署到github gh-pages的方式，gh-pages 提供了更为简便的管理本地项目到github的提交流程。详情见vue-ghpages-test。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81632.html
摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...
摘要：我发布了我的第一个组件，一个基于的标签云组件。然后将这个编译命令写到里，如下那么以后要编译下面的代码，只需要执行现在我们已经有编译好的代码了，接下来就可以发布到供其他人使用了。 我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的...
摘要：期待你的加入，一起维护文档，语雀文档协作邀请链接，如果链接过期，请加个人微信号，并备注文档协作。文档介绍文档在语雀平台上，期待你的加入进行协作编写，不要求所有的配置项都介绍到，列举一些最常见的即可。 项目概览 JS 插件文档库地址：JS 插件文档库 · 语雀 在线演示代码仓库：JS 插件文档库示例代码 · GitHub 在线预览：JS 插件在线演示 项目介绍 如今，随着大前端...
摘要：最重要的就是找一个适合自己的主题了。事实上，免费主题也非常多，而且很多的免费主题在功能上和界面美观上已经大大超过了付费的主题。加上这些主题都是开源的，基本上可以在上找得到源码，安全性是没有问题，主题的作者也在不断更新当中。WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的，而且价格还不便宜，这导致了不少的新手朋友们很为难。而有时我们仅仅根据...
阅读 3218·2021-11-18 10:02
阅读 1906·2021-09-22 10:54
阅读 2970·2019-08-30 15:43
阅读 2557·2019-08-30 13:22
阅读 1550·2019-08-29 13:57
阅读 1009·2019-08-29 13:27
阅读 702·2019-08-26 14:05
阅读 2490·2019-08-26 13:30
