怎么用js给div里添加html_用 GitHub Pages 建个人网站的小白级教程

前段时间心血来潮想建一个个人网站，调研了一圈，试用了 Weebly、Wix、Squarespace 等等产品，感觉都没有办法满足我的奇葩需求……最终还是觉得 GitHub Pages 是最好的——自由、免费、流量够用，目前的访问速度也还不错，完美！

GitHub Pages​pages.github.com

曾经还想用 GitHub Pages + Jekyll 的方式做，这样的话，之后可以用 markdown 来更新文章，一劳永逸。但是作为一个不会敲代码的设计，Jekyll 我真的搞不明白，安装各种工具的流程就失败了 (ಥ_ಥ)

最终选择了用 html 模板做静态页面……后续更新的话，改 html 文件里的文章内容就行了，也没有很麻烦嘛~（自我安慰）

这种建站方式大概是最简单的，全程不到十分钟，建好之后你可以根据自己的需求随意修改模板的内容和样式（当然，改到什么程度取决于你看得懂多少 html 和 css 的代码了……）

这个教程会写得非常通俗简单小白，开发大佬不要嘲我哈~

前期准备

1. 安装一个 GitHub 的客户端，用来同步云端和本地的文件：GitHub Desktop
   可能有些大佬喜欢用终端同步？本小白还是喜欢可视化操作……这个网站打不开的话就找一下网盘版吧，应该也不少。
2. 下载一个 html 的模板。这里安利一个网站：HTML5 UP，有几十个模板，质量都非常高，响应式设计，还都有二级页面，后续魔改一下也是可以满足五花八门的样式需求的。

大致的流程

1. 注册一个 GitHub 帐号，并建一个 GitHub Pages 的仓库
2. 用 GitHub 客户端将仓库拉到本地
3. 把 html 的模板文件放到对应的本地文件夹里
4. 用 GitHub 客户端把本地文件夹同步到云端的仓库

第一步：新建一个 GitHub Pages 的仓库

• 点击网页右上角的「New repository」

• 填写仓库名，格式必须是「你的 http://username.github.io」才能被识别

• 建好后，进入仓库最后一个 tab「Settings」，在「GitHub Pages」那一栏点「Choose a theme」选一个默认的网页模板。这里随便选一个就行，反正后面会被其他模板替换掉，系统提供的模板都很简陋。

选完默认模板其实网站就创建好可以访问了，回到 Settings 的时候就会看到你的网站域名啦~

这个时候你的仓库根目录下会有两个文件：_config.yml、index.html（这是网站的默认首页）

第二步：用 GitHub 客户端将仓库拉到本地

• 安装好 GitHub 客户端后，登录你的帐号。然后克隆仓库，把刚刚建好的仓库文件夹拉到本地。

第三步：添加模板文件

• 将下载好的模板文件解压，然后把里面的所有文件挪到你刚刚克隆到本地的文件夹中。index.html 直接替换，原来文件夹中的 _config.yml 就放那儿不用管它……

最后一步：将文件夹内容同步到云端仓库

• 这是打开 GitHub 客户端，已经可以看到好几项变动了，点击「Commit to master」，然后点击「Push origin」，等待几分钟就完成同步了。

再次访问个站链接，已经是新模板的样式啦~

我这里随便选了 html5 up 的第一个模板，就是下图的样子。不过这个仓库是我为了写教程建的，已经删掉了，所以现在访问不了啦……

最后简单介绍一下后续会常用的文件：

• assets/css 里面都是网页的样式文件啦，后续要调整页面设计，也是这些文件改得最多。
• index.html 上面提到了，是首页文件，首页的内容都在这个文件里改。
• 你可以在根目录下新建一个文件夹放文章内容的 html，方便管理。

之后有时间的话，会再写篇文章介绍一下我魔改网页样式的野路子吧，在这里就不赘述了。