评论

评论

这篇文章还没有任何评论。快来成为第一个评论者吧!

无需代码制作设计师个人网站

最近在 github 发现一个好玩的项目

可以方便设计师快速搭建属于自己的作品集网站

无需代码知识,对设计师来说可是十分友好了

尝试了一下,效果如下:

演示地址:点击预览

网站截图:

体验完网页十分简洁流畅,作品呈现用瀑布流的方式动态加载,且手机和PC端做了自适应。十分适合投递简历,扔个链接完事,而且还有逼格。

实现思路

基本原理就是把包含个人作品的静态网页部署在网站托管平台 WuliHub 以便让别人访问。

开始制作

一、在网页上配置自己的个人作品和信息

1.下载网页源码解压并打开。

2.将你的作品图拷贝到「 myworks 」文件夹中,支持 png、jpg 和 gif 格式。

*尽量使用压缩工具(如PP鸭)优化作品图大小

3.使用浏览器(建议谷歌浏览器)打开「 configuration.html 」,参照页面引导生成「 data.js 」文件,并将「 data.js 」文件拷贝到「 myworks 文件夹 」中。

4.「 skin 」文件夹内的 fav_icon.svg fav_icon.ico 可替换成个人图标,同名粘贴覆盖即可。

 *ico图标制作工具: https://tool.lu/favicon/

5.重新将整个网页文件夹打包压缩为.zip文件,至此网页源码修改完毕。

二、将网页部署在「 WuliHub 」用以访问

1.注册登录 WuliHub ,点击此处注册/登录

2.登录后点击右侧上传按钮,将我们精心修改的网页源码.zip上传

3.复制链接,打开即可访问,至此个人网站制作完毕。

注意事项

1.由于是静态网页,所以每次更新作品,需重新走一遍完整的制作流程。
2.WuliHub 平台受限,免费账户空间有50mb限制,且每次打开网页会有弹窗确认。
3.除了 WuliHub ,GitHub 、码云也提供网页托管服务,大家可以自行尝试。

扩展延伸

只要软件能够导出 HTML 都可以在线托管和分享。利用静态网页托管这一服务,我们还可以创建以下使用场景:

  1. 配合 Sketch + Sketch Measure 生成 html 标注切图。
  2. 配合 Axure 生成 html 原型文档。
  3. 配合 Markdown 生成 html 文档。
  4. ……

*项目原作者github地址

https://github.com/bingxueling/ArtOnWeb
3 0