Github Pages 使用后记

这种仿佛每个程序员都会写的文章我也来写一下,顺便我的 Portfolio 地址: https://p.design.moe/

为什么选择它

首先 dribbble 不适合大型项目的展示,作为 showcase 只能说是甜点级。Behance 有不错的编辑器,自带生成 portfolio 而且之前又改进了主页样式,但稳定性与速度方面让人担忧,同时无法自定义域名和排版样式。webflow 和 wix 之类的网站访问速度且不谈,需要💰订阅才可以解锁更多功能包括我比较在意的自定义域名,国内类似这两者的成型网站更是屈指可数(我没找到)。cargocollective 算是比较靠谱的了,cargo1 可以自定义 css 和 html 很方便,但是人家现在主推 cargo2,唯一的遗憾是自定义域名依然需要缴费,毕竟他家默认域名对于中文用户来说够长的……而重新着手从购买主机到建立页面又过于大费周章,才几个静态页面而已。

所以这么来看,Github Pages 是目前最合适的解决方案了——免费、速度不慢、稳定、包括域名在内的完全自定义、学习成本不高。

我做了什么

目前找工作时期需要整理大量之前的设计文件,这里选出了四个比较有代表性的放了上去。确定好内容后开始构思网站风格,之前在 DN 看到了这篇分享,让我对 brutalism web 有了进一步了解的驱动,诚然 brutalism 对实际想要去认真阅读的读者不太友好 ,所以自己收敛了一点……结果收敛后总觉得有些失调。

大致设计关键词为:黑(其实是#222)、线条、无圆角。

脑中就这么想着开始构建,很快就有了现在网站的雏形。为了配合各种slab,特意画了一套相应方形图标传到了 iconfont 上。自己对 CSS 有些了解,所以认定自己的可行性后,接下来开始学习搭建 github pages。

搭建过程意外的简单,感觉和之前使用 WAMP/MAMP 更新 wordpress 没什么太大区别,只不过古早的FTP上传变成了现代的 git 工具。CSS 有阵子没有亲自写了,但一直帮助前端用检查元素即时调试样式所以也没有手生。随便找了个带有左右交叉布局的模板便开始魔改起来。

作为设计师没什么开发操守可言,直接在人家的 style.css 上开刀,body{} 都是直接在7000+行起步,本想写完之后直接用 UnusedCSS 清理一下就好了,谁知道(可能 class 过多导致)直接不工作了……尝试自己手动删了删,结果自适应问题上很容易出错,这个坑踩得够深的。

之后一个坑是域名问题,现在的博客域名是一级域名,按照 WP 绑定域的步骤,需要把 DNS 改成 WP 自己的,然后之后都在这上面解析。WP 这里的解析有一个坑在于其 CNAME 记录有个 *.design.moe 都会跳转到本 Blog ,这样我的二级域名 p.design.moe 便没法解析(网上还有一坑说是解析后需要清除浏览器数据),于是使用A记录解析 github pages 的四个 IP,可以访问但是每天都会收到 github 的催促改成 CNAME 记录的邮件。

CSS 那些事

之前写过 WordPress 和 Typecho 的主题,而且网上关于 CSS 的问题解答数不胜数,所以只是效率上的问题了。过程中碰到一处这种样式:

这个真是头疼了一阵子。最开始想到的就是 box-shadow,由于顶层是填充的素以这里 shadow 也会是填充的,立马抛弃了这个想法(伏笔)。然后用了两个 <div> 来实现,即 <div class=”up”> 和 <div class=”up-shadow”>,看起来蠢到不行。顶层容器里面的元素都是浮动的,我也不会写 js 来判断其高度,所以下方的 shadow 层面只会自己手动定义高度。虽然可以达到目的,但对于自适应网页显然行不通。

之后想到了:after 伪类来画图形,可笑的是这样顶层的 border 属性会一起把伪类画出的图形囊括进去,变成这样:

无论怎么调整 background-color 都很奇怪。就在马上要放弃的时候,又想起了之前帮前端查看「如何使用外边框样式而又不影响高度」的方法,想到了 box-shadow 的隐藏 spread 属性和双阴影构造……于是只需要一句话就可以解决了:

box-shadow: .5em .5em 0 #fff, .5em .5em 0 2px #222;

这样一条带有2px的线段的阴影就画出来了,还会随着本体变化,很方便,同时感觉自己真的好蠢……

另外,iconfont 的引用使用了symbol ,使用起来意料之外的简单,只不过官网的 class 名那里误导有点多,找到真正的 xlink:href 还需要自己下载下来看一遍。

顺手加了个 console.log 彩蛋,之前发过推文

又在底部加了个 タモン 的迷之生物。出自最近比较喜欢看的「上野さんは不器用」漫画。

也想做成动态的,但果然还是比较麻烦啊。

结尾

最后加上GA代码,之后做完PDF版简历的话放到底部footer处,第一版就应该差不多了。iOS上看着还好,Android 明显字体有些问题……github那边的仓库还有一堆废弃物,有时间还得学一下命令行。总之这次Github Pages构建能给自己打个 72/100 分吧,以开发角度来看完全就是不及格。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

%d 博主赞过:
search previous next tag category expand menu location phone mail time cart zoom edit close