1.2 软件和工具

Cooking time: 30min active / 30-45min passive

• 下载并安装 浏览器 Chrome

• 下载并安装 文本编辑器 Visual Studio Code

  • 你是否好奇「文本编辑器」是什么？那么赶紧用搜索引擎搜索一下关键字「文本编辑器」吧。

  • 略读 文本编辑器 - 维基百科

• 注册GitHub

  • Github能用来做什么？请略读 怎样使用 GitHub？ - 知乎

• 安装GitHub Desktop

  • 阅读并操作 Authenticating to GitHub

  • 按照阅读内容，配置好github.com 的帐号信息

  • 注意：如果你是 Windows 32位系统，可能无法安装Github Desktop，请下载安装SourceTree 方法与Github Desktop雷同，如有疑问请咨询教练。

Tasks For Tutors： 请教练介绍一下这些软件。tips：尽量使用类比方法，让学员快速理解这些软件的用途。

Github Desktop 配置

1. 下载Bootstrap模板，解压缩保存在桌面（或者是你想要放代码的文件夹）。

2. 打开Github Desktop，在桌面上（或者是你想要放代码的文件夹中）创建一个名为GirlsCodingDayDemo的文件夹。

   a. 填写Name信息为GirlsCodingDayDemo b. local Path选择你的桌面（或者是你以后想要放代码的文件夹) c. Initialize this repo with a Readme的选项打钩 d. git ignore保持none e. license保持none f. 点击create repository

3. 现在你的桌面上(或者是你想要放代码的文件夹中)会出现一个叫做GirlsCodingDayDemo的文件夹。

   把下载的免费Bootstrap模板解压后，把模板内的文件拷贝到GirlsCodingDayDemo这个文件夹中。

4. 提交commit到master分支，（注意changes）

   

5. 发布到Github

   

1. 访问 https://github.com/ 网站，你可以看到你刚刚通过Github Desktop软件在github.com 网站新建了一个仓库。点击Settings

   

一直往下拉到Github Pages部分，进行设置

1. 使用Visual Studio Code编辑器打开桌面的文件夹GirlsCodingDayDemo。找到index.html文件，修改其中两处HTML代码, 然后保存（一定要保存！）。

   

2. 使用chrome浏览器打开 index.html预览修改效果

   

3. 回到Github Desktop，可以看到修改的内容。提交commit，再点击Push origin同步到Github Pages。

   

   

4. 打开第六步当中github pages的链接，可以看到自己刚刚修改的内容。