# 1.2 软件和工具

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

* 下载并安装 [浏览器 Chrome](http://cn.bing.com/search?q=chrome)
* 下载并安装 [文本编辑器 Visual Studio Code](https://code.visualstudio.com/)
  * 你是否好奇「文本编辑器」是什么？那么赶紧用搜索引擎搜索一下关键字「文本编辑器」吧。
  * 略读 [文本编辑器 - 维基百科](https://zh.wikipedia.org/wiki/%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8)
* 注册[GitHub](https://github.com/)
  * Github能用来做什么？请略读 [怎样使用 GitHub？ - 知乎](https://www.zhihu.com/question/20070065)
* 安装[GitHub Desktop](https://desktop.github.com/)
  * 阅读并操作 [Authenticating to GitHub](https://help.github.com/desktop/guides/getting-started-with-github-desktop/authenticating-to-github/)
  * 按照阅读内容，配置好[github.com](http://github.com) 的帐号信息
  * **注意**：如果你是 Windows 32位系统，可能无法安装Github Desktop，请下载安装[SourceTree](https://www.sourcetreeapp.com/) 方法与Github Desktop雷同，如有疑问请咨询教练。

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

## Github Desktop 配置

1. 下载[Bootstrap模板](http://wy.codingirlsclub.com/startbootstrap-clean-blog-gh-pages.zip)，解压缩保存在桌面（或者是你想要放代码的文件夹）。
2. 打开Github Desktop，在桌面上（或者是你想要放代码的文件夹中）创建一个名为`GirlsCodingDayDemo`的文件夹。 ![](http://wy.codingirlsclub.com/blog/2017-07-20-githubDesktopCreateNewRepo.png) ![](http://wy.codingirlsclub.com/blog/2017-07-20-gitDesktopNewRepoInfo.png)

   > 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）

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-064013.jpg)
5. 发布到Github

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-063511.jpg)

![](http://wy.codingirlsclub.com/blog/2017-05-26-064818.jpg)

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

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-064950.jpg)

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

![](http://wy.codingirlsclub.com/blog/2017-05-26-065152.jpg)

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

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-065430.jpg)
2. 使用chrome浏览器打开 `index.html`预览修改效果

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-071652.jpg)
3. 回到Github Desktop，可以看到修改的内容。提交commit，再点击Push origin同步到Github Pages。

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-070446.jpg)

   ![](http://wy.codingirlsclub.com/blog/2017-05-26-070754.jpg)
4. 打开第六步当中github pages的链接，可以看到自己刚刚修改的内容。