请选择 进入手机版 | 继续访问电脑版

石家庄老站长

点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
 找回密码
 立即注册
查看: 7|回复: 0

写了功能/项目 不知道该怎么展示?携手 分发白旗 Git Pages 自己的项目 让面试官大吃一惊

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-6-11 07:07:46 | 显示全部楼层 |阅读模式
写好了功能/项目不知道怎么展示?手把手带你白嫖 Git  Pages  部署自己的项目去惊艳面试官

很多学生刚毕业准备面试时,经常会遇到一些问题。

明明准备了复古,面试的时候想不起自己完成的一些精彩功能。想给面试官展示自己实现的功能,但不知道该怎么部署。用CSS写了一个很棒的功能,不是一个完整的项目,不知道该怎么给面试官看。做项目的时候买了云服务器,在找工作续费的时候发现太贵了,预算有点超支。如果你也有这种苦恼,最好考虑用白旗Git  Pages来渲染自己的页面,把URL放在简历上,让面试官看看你有多棒。(另一方面)。

本文将在Git  Pages上部署两种类型的项目。一个是HTML  CSS  JavaScript项目,另一个是使用框架3354用React——编写的项目。

以下是已经部署的练习程序。

成功部署的HTML  CSS的学习成功在线:

在线地址为https://golden  aarcher.com/study-proj/在线v2/

预览页面:





实施以前的部分,使用React重写在线学习的项目:

网上地址为https://goldenaarcher.com/xczx-react/#/

预览页面:





GitHub

如果已经知道GitHub的同学可以跳过这一部分直接进入分发阶段。

什么是 GitHub

GitHub是开放源代码和个人软件项目的托管平台。这称为GitHub,因为Git只能以唯一的版本库格式托管。

Git的使用可能会变得非常复杂。下一步将详细说明使用的所有git命令行,但不太详细地说明具体的细节。

为什么用 GitHub

GitHub是世界上最大的开放源代码托管系统,这也可以证明它的可靠性。从另一个角度来看,许多其他大型平台也用GitHub托管代码。

微软家族的TypeScript

TS的文档都托管在GitHub上。因此,如果TS的文档更新频率非常快的——拉请求通过,网站将自动更新。

Electron

React

Vue

我的巴蒂斯

短跑

.

GitHub确实受到了过去几年托管的主要开源软件的青睐。(威廉莎士比亚、温斯顿、开源、开源、开源、开源、开源)。

另外,如果GitHub的账户里有很多fork和star,
,对之后的找工作也是很有帮助的。

Git 的安装
对 Windows 来说,Git 的安装是非常简单的,到官方网站上:Downloading Git 下载 Git 的安装包,运行完毕即可。

判断 Git 是否成功安装可以用 git --version 来判断

PersonalProgress> git --version
git version 2.31.1.windows.1

项目准备
在正式开始部署项目之前,需要有这么几个先决条件:

[ol]
  • 注册一个账户
    这一步酒不多赘述了
  • 新建一个仓库
    这可以在点击左侧用户信息这个 new 按钮:


    或是通过这个链接新建一个仓库:https://github.com/new
    [/ol]
    新建仓库
    这里带你一步一步创建一个新的仓库。

    [ol]
  • 准备新仓库
    也就是打开 https://github.com/new 这个网址后会出现的页面,如下:



      
  • Repository name
    指的是这个仓库的名称,它具有唯一性,也就意味着一个账户下面不会存在多个名字相同的仓库。例如说我之前已经写过了一个名为 Chess 的项目,再去新建一个名为 Chess 的项目,它就会报错:


    这是这个页面唯一一个必选项。
    这只是一个例子,所以会以 sample 作为项目的名称,但是在大多数情况下,仓库的名称必须要有意义。
  • 其余的都是可选项
    这里为了方便展示就略过所有的可选项,直接选择新建仓库(Create Repository)。
  • 新建一个项目
    当新创建了一个项目的时候,新的页面会是下面这样的:


    这是当项目为空白项目时显示的默认页面。
    这里会以新建一个项目为例,也就是使用第一个 or 中的代码块:
    # 这里会在命令行创建一个新的名为 README.md 的文件
    echo "# test" >> README.md
    如:


    我这里就在 C:\assignment\front 这个路径下面新建了一个名为 test 的文件夹。
    最好来说文件夹的名称与项目的名称是一致的,这样比较好记忆。
    随后我再敲入上面的命令,命令行就会生成一个内容为 # test 的 markdown 文档。
    # 初始化 git 目录
    git init
    # 将 README.md 代码加入工作区
    # 只有工作区的内容会被提交
    git add README.md
    # 添加注释
    git commit -m "first commit"
    # 设置分支
    git branch -M main
    # 将远程仓库和本地仓库挂钩
    git remote add origin https://github.com/GoldenaArcher/test.git
    # 将代码提交到远程仓库
    git push -u origin main
    命令行截图:


    现在的页面截图:


    [/ol]
    部署静态页面和不熟动态页面的配置是不一样的,所以接下来,可以准备内容,随后再进行页面部署了。

    部署项目
    纯 HTML+CSS 与 使用框架的方法 会有些不太一样,这里会带着都过一遍。

    纯 HTML+CSS 的效果是立竿见影的,使用框架的话,之前也有博文讲述怎么用 React 实现项目(连载中),感兴趣的可以看看。

    HTML+CSS
    准备工作
    [ol]
  • 先准备一个 index.html,每个项目的默认路口都是 index.html,这是必须的页面。
    为了方便,这里的 html 代码只有一个 h1 标签,标签中是万能的 Hello World:


  • 使用 git 上传代码
    test> git add .
    test> git commit -m "add index.html"
    [main c12f565] add index.html
    1 file changed, 12 insertions(+)
    create mode 100644 index.html
    test> git push
    Enumerating objects: 4, done.
    Counting objects: 100% (4/4), done.
    Delta compression using up to 8 threads
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 481 bytes | 481.00 KiB/s, done.
    Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
    To https://github.com/GoldenaArcher/test.git
    07f4f7c..c12f565  main -> main
    效果截图:


    现在的 Git 页面看起来如下:


    [/ol]
    准备工作到这里就做好了

    部署 HTML+CSS
    [ol]
  • 点击 Settings
    Settings 在这里:


  • 点击 Pages
    Pages 在这里:


    这时候的 Git Pages 默认的 resources 为 None:


  • 修改 Sources,改为 main branch
    如下:


    这一步是将 Git Pages 的路劲引到 main 这个分支下,index.html 作为默认的路径,就会被渲染到提供的 url 下
  • 这就完成了
    此时 http://goldenaarcher.com/test/ 的展示效果是这样的:


    就是万能的 Hello World 页面,除了路径不一样之外,和本地渲染的页面长的一模一样。
    [/ol]
    纯粹的 HTML+CSS+JavaScript 的页面部署就是这么的简单,只要引用路径正确,那么 Git Pages 就会从当前目录下寻找对应的文件,进行操作。

    使用框架
    使用框架会稍微麻烦一点,以 React 项目为例,如果执行一样的操作,即新建一个 Git Pages,将路径引到 main 分支,那么这就是会被渲染出来的页面:



    以 CRA 创建出来的学习项目为例,正确的操作步骤为:

    [ol]
  • 在 package.json 中加入 home 这一属性,home 对应的路径就是 git pages 创建的 URL
    如,之前创立的学习项目的路径为 http://goldenaarcher.com/xczx-react/:


    package.json 中对应的属性就为:
    {
      "name": "xczx-react",
      "version": "0.1.0",
      // 加入 homepage 和对应 url
      "homepage": "https://goldenaarcher.com/study-proj/xczx-react/"
      // 其他属性暂时先不动
    }
  • 安装 gh-pages 依赖包
    gh-pages 是用来协助将项目部署到 GitHub Pages 上必要的依赖包,安装方式是在终端使用 npm 或 yarn:
    npm install --save gh-pages
    # 或者 yarn
    yarn add gh-pages
  • 添加部署命令
    将下列属性添加到 package.json 中:
    {
      "scripts": {
        // 新增的 命令行属性
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build"
      }
    }
  • 部署项目
    最后,在命令行运行 deploy 去部署项目:
    npm run deploy
  • 确认部署正确的分支
    gh-pages 会自动添加一个新的分支,这个分支才是用来部署项目的分支。所以,如果页面无法正确被渲染的话,一定要查看 git pages 上,选择的 sources 是否是 gh-pages 分支:


  • 成功完成部署
    [/ol]
    最后
    提出几个建议:

    [ol]
  • 你写的项目,对实现的功能一定是要有所了解的。仿写的也好,原创的也好,心里要有数,不要一问三不知。
  • 如果是线上面试,那么对方应该是可以直接打开 URL 的。
    如果是线下面试,如果实现了移动端适配,可以在手机上直接打开给面试官看。但是如果没有做移动适配,一定要用平板或是电脑给面试官看。
  • 面试官一定会看你的项目吗?
    我在面试别人的时候是会看简历的,之前协助面试的时候发现,5 人团队中,至少会有 2-3 个人是会比较细致的扫一遍简历的。
    并不是说所有的面试官都会打开你的项目,但是当打开你的项目的面试官被吸引了,那么恭喜你,你就成功了。
    [/ol]
    最后,祝所有正在找工作或是打算找工作的同学早日收获心仪的 offer,未来可期。
  • 回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|无图版|手机版|小黑屋|石家庄@IT精英团

    GMT+8, 2021-6-25 09:35 , Processed in 0.091052 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2001-2021 Comsenz Inc.

    快速回复 返回顶部 返回列表