初级设计师如何利用GitHubPages搭建免费个人网站(绝对干货)
时间：2023-10-09 02:30:01 | 来源：网站运营
时间：2023-10-09 02:30:01 来源：网站运营
初级设计师如何利用GitHubPages搭建免费个人网站(绝对干货)：文章转载来自我的公众号文章：初级设计师如何利用GitHubPages搭建免费个人网站(绝对干货)
——
随着中国乃至全世界数字化进程的加快，除了交互设计、UI设计的工作岗位变得越来越多，企业招聘、学校招收学生越来越多的注重设计师在digital design上各方面的能力。那么这个能力很重要的一个展示当然来自我们的作品集了。
传统纸质的作品集及PDF已经失去了很多互动性，digital方面的竞争力。比如我们无法很好展示一个storytelling的过程，介于篇幅大小的限制，无法展示很多过程中跨篇幅很大的research和journey，更无法展示视频、动效等方面的思考和能力。
这个时候，一个个人网站对于专业达到一定程度的设计师来说显得尤其重要。当然现在市面上又很多提供从host到域名到模版选择的网站，比如wix，squarespace，期的cargo等。但是，这样一来，我们看到的设计师网站全部都千篇一律。并且很多网站也是每年100刀起的host 和维护费用。
那么，在很多recruiter或者招聘设计师看完千篇一律的作品集网站以后，一个个性化定制的作品集就能让他们立刻眼前一亮。
在我刚开始搭建自己网站的时候，因为年份还很早，我选用了GoDaddy购买域名和host。第一年是有很大的优惠。但是后面逐年价格上升，每一年要缴将近200刀的服务器费用和域名费用。除此之外，上传网站还需要下载另外的上传工具，当时用了FillleZilla，又需要重新申请账号用户名等。过程非常繁琐。
而后的网站刚更新也比较old school，每次都需要打开FilleZilla，链接IP，搭建链接。而不是很visual friendly的界面让后续debug比较费时间。
这就开始使我探索Github。
其实Github对于非软件开发出身的设计师可能使用量会比较少。之前在项目中我也只是使用到了其中的Sprint Planning Board与程序员沟通和跟进项目进度。唯一会跟Github Repository交互的时候，就是需要下载Sketch 插件或者follow一些教程搭建服务器之类的。
不过，很高兴我还是迈出了自己创建repository及用GitPages host个人网站的第一步。因为……真的远比我之前想象的要容！易！太！多！了！
废话少说，那就给小白们演示一下具体怎么操作了。
1. 你需要注册一个Github账号这个太简单不过了，在你的浏览器里面输入
http://Github.com，然后按照网站提示输入你的邮箱密码基本信息，再从邮箱进行验证，就OK了。
登陆以后，大概是这样的页面。（因为你还没有简历repository，所以左边一栏不存在）
2. 下载Github Desktop 版本这个时候，你可以先把
http://Github.com晾在一边。下载一个Desktop版本。根据自己的电脑操作系统，不过我猜想大部分设计师都是用Mac系统的哈。
打开桌面版本以后，选择Create a New Repository。这时候你会遇到一个弹窗，这个弹窗最主要的就是选择一个名字和选择你要在本地那里存放你的网站文件啦。
如果你的网站没有带README文件的话，可以在这里选择Initialize this repository with a README，因为一般Github是推荐有这个文件的。
下面的可以不用管，然后选择Create。
3. 将所有网站文件拖入文件夹这个时候，你会发现Github Desktop已经自动识别了你的文件夹以及问你是否想要push origin（意思就是是否要把你本地的上传跟Github的Host同步）。
这个时候你选择push，剩下的就是等待文件全部被Fetch到Github上。完成以后，再回到你的Github 的profile page，你会发现本地的repository被直接同步到了上面并且建立了你的repository。
4. 建立branch gh-pages这个时候在早期只要打开指定的路径，一般是
http://username.github.io/repostory-name就可以打开网站了。但是Github这两年出了一个专门host网站的GitHub Pages (
https://pages.github.com/)，因此需要再多一个步骤。因为现在你的master上面只是一些上传的文件list。
这个时候我们回到Desktop版本，在Current Branch这一栏选择New Branch，然后branch name一定要叫做gh-pages。
5. TADA, you are done!这个时候再去到你的GitHub repository的地址（
http://username.github.io/repostory-name）就可以见到你的网站啦！利用相同的方法，你有任何本地上传的文件，都可以马上commit到gh-pages，同步到你的网站上。
是不是很简单！！根本就不用去买服务器，不用下载FilleZilla，更不用拉IP拉设置。
6. 自定义域名（Domain）但是这个时候我们网址的域名非常非常繁琐。如果想要一个自定义的域名怎么办呢？比如我的网站一直是
http://www.lexi-lin.net，我已经把它分享给了很多人，也在我的简历上，我还想把它与我的Github网站关联。也很容易！
当然首先你需要像我一样有一个自定义的域名。我的域名是多年前在GoDaddy上买的，域名的价格自然比Host要便宜很多，贵一点的也就一年10刀左右吧。如果想要免费的域名，可以试试
https://www.freenom.com这个网站。但是我建议域名一般以net或者com结尾，以保证你的可访问性。其他一些域名可能会被限制访问或者安全级别不高。
这个时候去到你的domain管理网站。我的例子是GoDaddy，我们需要做几个设置上的调整，来保证它能关联到我们的GitHub Page。
不管你的列表里有多少乱七八糟的东西，保证你的列表里有一下红框里的内容就好了。没有的话，就点击ADD，逐个逐个添加。
这个时候，我们已经完成了不管任何访问你的域名的行为都会push到GitHub上。同样的，我们需要在GitHub方面建立一个接收方。
回到你的GitHub repository，去到Settings，不用管其他乱七八糟的东西，我们只需要滑动到一项叫做GitHub Pages（Obviously...）。在Source项选择gh-pages，在Custom-domain项输入你的网址域名，然后勾选Enforce HTTPS。
7. 大功告成！Enjoy！
当然会有一些小白可能又很想要便宜有效的自定义网站，又不太想花钱使用那些已经被大众使用过烂的模版，最后可能编程基础也比较有限。
在这里我推荐可以试试google一些Bootstrap模版（例如
https://startbootstrap.com/）。你可以很快上手，而且是responsive，能够满足各种screen size，只需要更改里面的content和部分css，就能构建一个免费、自定义的网站啦～～然后再一步步提升编程技能，把网站越建越好。
anyway，因为是免费的，是一个无限期的试验学习平台了。
我是Lexi，一个在UXUI和产品道路上不停折腾的女汉子，还孜孜不倦地在帮助更多热爱这个行业的小朋友挺进此行业。
欢迎[
长按二维码]关注我的公众号或者给我私信留言(微信号: lexilamm)来咨询更多欧美留学、实习和工作的干货和服务。
在线咨询
