如何用 GitHub 展示自己的产品

前言

再过几天一大批大学生就要投入到找工作的队伍当中，今年毕业生又是创历史新高--820 万。如何让自己在这么多人中脱颖而出？除了长期的基础积累外，额外的营销手法还是能给自己加加分的。

做软件开发的，或者说对做软件开发有兴趣的同学都会学习或者动手练习过项目，要么是跟着网站学、要么是对着书本网上看到的东西练习一遍，但是这些个做出来的东西我们应该如何展示出来，或者是让面试官看到？必定简历也就只是简单介绍自己，面试也只是个把时间，很难把自己会的东西都展示出来。

再者是浏览简历的时候要是看到你做过的作品和源码，其实对于面试官来说还是能加不少分的，必定看了你做过的东西基本上能看出很多表面上看不到的东西。

这个就是我接下来要讲的东西，利用 GitHub 来托管自己的源码和展示自己的产品，如果你正在找工作，那么也许对你可能有点帮助。。。

下面是利用 vue 实现页面满屏切换

主要功能点：

1. 实现全屏定时轮播，轮播时间可设置
2. 每屏页面内容可定制
3. 每个屏都有对应的 key 可手动点击切换，并支持键盘切换
4. key 背景和选中样式可定制
5. 页面切换时动画效果可定制
6. 封装成组件并发布到 npm

实现

• 首先我们用 vue 模板中的 webpack-simple来快速搭建一个 vue 项目，项目名就叫：vue-pages-toggle，具体搭建细节可看这里传送门
• 详细项目内容看这个vue-pages-toggle
• 效果图，在线demo

因为我们今天不是谈论怎么写这个插件的，这里就不做详细介绍了,回归到主题.

1. 创建一个 GitHub 账号
2. 在自己的 GitHub 上创建项目
3. 提交源码到 GitHub
4. 生成线上可预览的项目
5. 发布到 npm 供其他人使用

这里重点讲讲后 3 点，1 和 2 打开GitHub 地址 sign-in => new repository 即可创建一个自己的项目。

上面都准备好后：切换到你当前姓名根目录下，接着执行一下命令，注意要先安装 git,git 下载

提交源码到 GitHub

• git init 【初始化】
• git add ./ 【添加，工作区到暂存区】
• git commit -m "first commit" 【提交，由暂存区到版本区】
• git remote add origin https://github.com/wqb2017/vu... 【远程添加到 github 项目中】
• git push -u origin master 【提交到对应版本】

生成线上可预览的项目

上面第三点【提交源码到 GitHub】完成后，接着以下内容

• 切换到 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

• 预览

  [github 用户名].github.io/[项目仓库名]

我的地址就是 :https://wqb2017.github.io/vue...

最后一步就是【发布到 npm 供其他人使用】

• 注册账号

  传动门

• 登录 npm 账号

  npm login

• 发布项目到 npm

  npm publish

注意

解决使用 Vue-cli webpack 模板生成的 vue 项目，资源路径问题。出现上述问题应设置 config/index.js 中 build 对象下的 assetsPublicPath 字段为 assetsPublicPath: './'。