分享一个低价搞定作品集网站的方法

楼主是学设计的，因为设计网页在developer圈里面混了一阵子之后，发自肺腑地觉得好多网站编辑器也太欺负设计师了，其实只要稍稍懂一点代码做网站就会肥肠便宜。于是赶紧跑过来分享约等于免费建站的经验并且求米（嘻嘻）。

webflow、wix、squarespace、cargocollective这类主要适合丝毫没有编程基础的同学们选择，楼主也都试用过，这些编辑器的特点是模板都非常棒棒（其中气质最为艺术的是cargo），可修改的功能也很完善，但就是如果你要更多功能，例如发布、改域名、自定义coding，就对学生党来说，有，点，贵。基础收费如下：像最贵的一个webflow，账号套餐一个月16刀，但这不算完，网站套餐还得再来16刀/月；wix $22/mo；squarespace $18/mo；cargecollective $99/yr或者$13/mo。列举的都是推荐套餐，这类网站收费方式很多所以不一一列举了，大家体会一下这个价格。如果你想在这些网站内部买个域名那就每年加个20刀左右。

Wordpress试过觉得稍微有点用户不友好（也就是楼主矫情地觉得操作不方便），而且学习成本蛮高的，虽然确乎功能强大，但是不太建议不打算以后以做网站为职业的同学们入门使用。价格相对上面几个更用户友好的网站是便宜很多，但还是要收钱的：$8/mo。

虽然价格对比一下学费如上编辑器的收费还是便宜得很，但是实际上做个网页真的不需要这么多钱。所以隆重推出：

GitHub (https://github.com/) + BootstrapStudio (https://bootstrapstudio.io/) + 阿里云or腾讯云

阿里云or腾讯云是用来购买域名和服务器的，一般来说无论什么样的编辑器都会给你安排一个域名，也就是搜它能找到你的网站，但是一般来说这个名儿都不够好看，一般都会自己买一个喜欢的名称，我自己的就是以自己名字为域名的。至于推荐阿里云和腾讯云是因为一站式服务，附赠服务器，阿里云甚至有免费教程（有一阵子有网课形式的教程并且打折，不知道现在还有没有），在上面搜到的域名价格一般情况下低于GoDaddy。

BootstrapStudio是一个基于Bootstrap framework的图形编辑器，说白了是个App版的webflow、wix、squarespace、cargocollective、wordpress，业内人士会觉得这不是上个世纪的网页制作软件吗，是的，三四年前还是大行其道如今被collaborative平台逐渐取代，但是楼主还是觉得蛮好用，毕竟作品集这个东西你也不需要配个程序员才能做得出来，而其优势在于，便宜，没有了。只要29刀，终身拥有；60刀，终身更新最新版；功能和上述网站差不了多少，代码功能区显著，这个软件其实很鼓励你自己写代码的，其产生的初衷其实是方便程序员不用手打那么多重复的代码……所以需要炫技的同学很容易能炫得出，不需要炫技的同学也能通过简单的代码编写体会设计中技术的影响力，不过不用担心需要写很多代码，代码主要用于全局修改格式和适配调尺寸，其余的编辑功能大多还是在右侧面板。然而内置模板比较少，非常推荐去平时看优秀网站，脑子里有个idea之后再来用BootstrapStudio做。（推荐去webflow的分享区康康）

至于GitHub大家应该不陌生，程序员必备网站，然而我们做作品集需要用到的功能是它的网站寄存功能：GitHub Pages。此寄存0元即可得到，新建方式如下：https://sspai.com/post/54608

所以整个做作品集的流程如下：
- 浏览优秀作品集网站，按照你UI/UX作品的步骤设计个网站的框架和大致形式出来（形式可以随着深入使用编辑软件有所调整）
- 购买BootstrapStudio（别买成Bootstrap，要是买错了就只能写代码没法拖拽元件了）并在里面拖拽元件建立你的网站图形界面，时不时地用它自带的preview去预览，不需要每个操作之后都上传到域名内
- 购买域名和服务器（一般.com结尾的比较贵，我自己挑的是.work，看着还挺成熟）
- 注册GitHub账号并按照链接里的步骤新建一个Repository - GitHub Pages，把GitHub Pages上分配给你的域名改成你自己的域名：https://docs.github.com/cn/githu ... r-github-pages-site
- 在GitHub中你网站的Repository里面上传文件（这里推荐使用GitHub桌面端，会自动建立一个本地文件夹，以后往这个文件夹里export Bootstrap Studio），点击BootstrapStudio的Export导入到这个文件夹即可，Export出来的你会发现是一组文件，包含html，css和js，对就是它们，放进repository里
- Export后打开GitHub桌面端，点击commit to master，summary写不写都行，然后点击App中顶部黑色背景里面最右端的upload，就完成了

再叨叨两句，我自己比较喜欢这种非一站式又需要写两笔代码的建站，因为可以在了解每个模块的过程中真正地理解程序员……啊不……理解一个网站是怎么构成的，PHP之类的这里面没涉及到，重点在于：1，对数据的意识，2，对程序员的理解……啊不……对组件怎么写出来的有个了解……

用户友好的编辑器有很多地方会跨过程序的鸿沟，让设计师可以以人类能够轻易理解的方式编辑一个组件，但是你要懂得为什么一个button要设置padding、为什么要强调模块化、一个需求要多少程序员的工作量来实现……这些还是亲身实践过体会得深刻。



不知道是不是说得比较清楚了，欢迎讨论~

补充内容 (2020-7-28 09:28):
Btw看到有developer旁友们也关注了这个帖子，大神直接手k代码的就不提了哈哈哈，不过对于developer来说BS等等网站编辑器是个给网站加分的，用它们做完会比较有个人特点也比较容易美丽

补充内容 (2020-7-28 09:29):
对于像我一样的designer来说主要是为了个性化，以及做出个性化的交互能起到给hr炫耀自己能打点代码的作用哈哈哈哈哈哈哈嗝

补充内容 (2020-7-28 09:30):
谢谢大家的米！终于可以解锁查看隔壁帖子了😂

哈哈哈好巧我也用的这种方法 不过我是用webflow搭的

我用了几年Squarespace国内只能用移动公司的流量打得开，其他网络得翻墙

谢谢分享，我也想转 UI/UX, 需要有自己的作品集

有需求的话可以试试看用 netlify 取代 GitHub Pages，功能更强大些

lz觉得weebly怎么样呢？

最便宜的难道不是就买个域名，用github的免费空间，自己手写代码吗哈哈哈哈

是的，我的就是GitHub，买个域名。

stonefish 发表于 2020-7-28 05:45
最便宜的难道不是就买个域名，用github的免费空间，自己手写代码吗哈哈哈哈

哈哈哈哈哈是！但是手写对设计师来说没太大必要，要代码写得很漂亮还是要积累很久的，BS就是个很好的手写代码和图形界面的中介

Shunfan 发表于 2020-7-28 04:18
有需求的话可以试试看用 netlify 取代 GitHub Pages，功能更强大些

啊哈这个推荐我也在论坛上看到过~ 都是强推的那种，还没用过，以后试试~ 多谢

kelly11 发表于 2020-7-28 05:43
lz觉得weebly怎么样呢？

订阅性质的这种平台一般都比较贵啦，这个我没用过，如果你感兴趣的话请你用完给反馈！

mageli 发表于 2020-7-28 06:14
是的，我的就是GitHub，买个域名。

贼香哈哈哈哈哈哈哈哈，btw那你代码是咋写的？

疯狂点赞！ux新手还在摸索作品集阶段，但已经在发愁用什么建个站了……
之前也研究过用GitHub Pages+Jekyll建免费个人博客（基本只有文字的那种），代码小白已经头疼了lol
结论：学码省大钱

PS：如果用bluehost来hosting Wordpress的话还能更便宜，大概5刀/mo，虽然得看域名。