网站建成报告

本个人主页的首建报告!包括做网页的“历史”~

Posted by MewX on Aug 04, 2014

这是本博客第一次建站的报告,也当是自己做网页历程的一个小结吧。

之前考虑过用GoogleAppEngine以及其他类似的免费云计算平台来搭建,但是免费的只找到了GAE。本来对Py就不熟,网上流行的micolog(一个用Python写的模板)也不方便修改。最后选择了GitHub Pages作为主机(GitCafé类似)。

在GitHub上建立网站通过Jekyll(Ruby写成的用于生成静态网页的工具)来完成,首选的模板有Octopress和JekyllBootstrap,他们的官方网站上有丰富的模板,而且由于是Ruby写的,跨平台性很好!

本机运行Octopress后发现,_config.yml里面设置项目繁多,想达到高度自定制化也不是那么容易;JekyllBootstrap效果不错,推荐使用。不过自己最后选择的还是DIY,因为之前那段时间比较闲。


下面简单说说我与网页的历史吧:

最开始制作网页还是5年前,那时候CSS+DIV架构刚兴起,我也只是个初中生,没有学那么多,只会用FrontPage 2003可视化编辑html(后来也用过SharePoint Designer 2007,由于都是不接触代码的,用起来觉得很方便,现在看来真是弱爆了,因为代码编辑器的功能不够强大,CSS3和HTML5支持很弱,建议大家改用Dreamweaver CS6),网页架构也是用表格的,用表格就会发现浏览器窗口缩放时表格就变形了,网页文字图片布局什么的也跟着变形了。于是发现编辑器提供了画框架的功能,就是<div>标签。

那时候也经常到JS特效站上去粘贴点特效到html里面,但是每次运行都会被IE浏览器拦截,要手动运行,很麻烦,现在IE放开了某些JS的运行,不需要去弄什么网站安全证书了,方便了很多。

当时做什么动态特效基本上不是用JS就是用Flash了,也经常有一起用的,图片什么的用Fireworks直接搞定,后来发现Fw的切片功能能生成网页而且就是CSS+DIV架构的,所以觉得一定要好好利用这个功能。于是当时参加比赛的网页基本上都是图片切片堆出来的。

还有一个有意思的现象就是那时候网页上的圆形按钮看代码其实是切成了矩形的,因为多边形切片占用很大的代码,但是现在CSS3直接就能创建圆形按钮了。光从鼠标指针的变化上就能觉得很舒服。


本站的制作过程:

偶然间发现我的昵称MewX的org域名没有被注册,我就赶紧注册了。

注册之后我并没有考虑租用服务器,因为去年租用过一个虚拟主机,感觉性能不是很好,过一定时间访问就可能访问异常,需要唤醒时间才能正常浏览。而且,仅仅租用300M的空间我就用不完。

主流的博客、论坛模板都是asp、php写的,动态并且依赖数据库,但是经过一年使用发现,数据库利用率实在低的可怜,非要弄一个服务器实属浪费。

偶然间听Phonzia说弄了个网站主机在Github Pages上,我也就决定充分利用这个平台建一个站~~

(Github Page Repository的建立可以去搜索引擎上找、)

(Jekyll 的Hello World样例可以去搜索引擎上找、)

前面也说过了,没有采用现成的模板,于是准备靠老本来建站了,毕竟从来做的就是静态网站,这会主机又把我限定在静态页面上了,所以我可以专心写静态页面了。

由于好几年没有写网页了,通过这几年的上网经验,发现现在做网页动画效果很丰富啊,动画没有执行完毕还可以原路径返回呢。以前做这样的效果得要好多行JS脚本呢。现在据了解是CSS3脚本,执行全靠浏览器了,功能不仅强大,还非常方便。于是就在谷歌上搜到了一个叫W3Schools(http://w3schools.com)的网站上学习,非常详细的网站,每个技术内容学习就几个页面就完成了,入门很轻松。(后来发现国内很多山寨站,比如W3School、W3CSchool这样的,全部都是从这个网站上Copy过来的。)

早有耳闻的CSS+DIV架构,我也觉得应该好好实践了,于是就从头到尾用<div>标签搭建了这个网站。

我极力追求页面的动画效果(以前没有好好享受过),于是遇到了瓶颈,因为CSS3不支持全局的动画,也就是说动画只能和自身相关,不能动别的元素的奶酪。。所以在学习别人网站的源码时发现了jQuery这个库,同样在W3Schools这个网站上入门了这个库,做成了右上角那个动态语言切换按钮。这个库弥补了CSS3的不足,动画效果相比以前的做法绝对是一流的。

P.S. 关于语言的切换会在以后的更新中完成,目前难度不是很大,因为Liquid语言掌握的差不多了,只要用Liquid筛选文件名或者post.title就可以做到。


制作的重头戏就是右侧的几个按钮,这几个按钮使用了CSS3脚本W3C最新标准的tricks,那就是将before和after标签做成动画元素,把before和after都加入hover效果。具体可以看本站源码framwork.css样式表的注释,你会受益匪浅的。当然,我这里做的很大程度上也是从别的站上学来的。

网页制作还是要多看别人好的网站的源码才能学到很多不知道的技术 _(:з」∠)_。

最后也欢迎来访者评论、提建议、push本站源码。(LISENCE: GPLv2)


MewX comments powered by Disqus