我是如何从零开始学习到搭建出个人网站 2

我是如何从零开始学习到搭建出个人网站

我是如何从零开始学习到搭建出个人网站 4
Photo by Jackson So on Unsplash

本文并非技术类文章,只是分享作者我是如何学习并最后搭建出个人网站,一步步走来的历程。

混迹于博客圈也有些年头,掐指一算也有五年左右时间,真正开始写得勤快也就是这一两年的事。说起来,从头到尾压也没想写博客博文,我自己很清楚知道自己不是一个胸有文墨出口成章的人,写博客刚碰巧得出的结果,并不是我真正的初衷目的。

所以我的初衷是什么呢 ? 这跟我的专业有关,我的专业是动漫游戏,学的软件都是 3ds Max、Maya、Adobe 系等等,目的就是很单纯简单,动手建一个专属的个人网站,有朝一日上面摆放点作品,然后好方将来就业展览下,就像现在拿 Github 在上面写简历差不多,平常也能自己意淫下。

也不知道是幸运还是不幸,假如早年知道 站酷ZCOOL 这些设计师互动平台,我或许不会接触到网站从零开始制作,今日便连 HTML 都看不懂。

我是如何从零开始学习到搭建出个人网站 6
Tap – 一个自助建站工具

网站制作其实很早我就已经探索过,准确来说应该叫个人建站才比较符合,我第一次自己搞建站应该是在 2010 – 2011 ,太遥远具体时间我都忘记了具体时间,是用的是一个互联网商业产品 Tap,跟现在 Wix 和国内凡科自助建站差不多,我现在还很清楚记得它的域名,www.tap.cn,傻瓜式建站,拖拽即可视觉可得,当时用的是 xxxx.tap.cn 的二级域名,底部给我整了个官方广告。现在想起这个,都感觉这个网站有点厉害,后来不知道什么原因 tap 关闭了。

真正意义上动手自己从头到零,从代码开始搞建站还是学了动漫游戏制作的那段日子,也是那段时间萌芽的。一开始我遇到了什么问题了,我吖的根本不知道怎么建站,我 TM 的连用什么软件写网页都不知道,妈的这还怎么继续搞下去!

面向搜索引擎编程是我大脑飞快想到的,百度,真是一个好的方式,百度的结果眼缘找到了一个叫”我要自学网“的网站,又一个制作网页的教程,还是可以白嫖免费的。最近再次上去看了,隔了七八年的了,网站都变了很多,再次搜索起那个教程,竟然还在”Dreamweaver网页制作“,当时学的是这个教程,某些章节也至少几遍吧。学下来的结果是什么呢,学了好像没学的样子,可能是我人笨的原因,也搞不出个什么大概的页面出来,CSS 也是全靠 Dreamweaver 根据为的设置选项好后帮我自动弄出来的,但这么说也是挺感谢这个教程的,至少也算是入门了。

后来是怎么算是懂点 HTML & CSS 的呢,具体是哪年开始有点上手连我自己也不太清楚。但至少是花了时间精力去学习的,当时意外知道 Chrome 有一个调试功能, 简直就是一个利器,算是打开了一个新的学习方式了,打开各种各样的网站就是各种点击别人网站的 DIV 节点,看别人是怎么写的结构节点的,看别人是怎么写 CSS 的,然后对着 w3school 查资料,保守估计也点了上百个网站,可以说是对我帮助很大。

2013 年那一会,家里断网了不再交网费,当时学习网页制作也没就此中断的,说起来真是多亏得当年的持之以恒,没有就此放弃,用学校的 WIFI 下载了少说也有五六十个别人外国人写的 HTML 5模板,刚好那时 HTML 5 和 CSS3 开始十分盛行,上课有空闲上网时间便逛各种各样的网站,看到好的效果就把它整个网页保存下来上传到网盘上,然后到了假日回家便借或偷别人的网络下载下来,研究这些页面临摹学习。这至少对我来说确实是个学习的好方法,而且眼界得到提升。

我是如何从零开始学习到搭建出个人网站 8
设计达人网 – 主页图
我是如何从零开始学习到搭建出个人网站 10
这个模板最印象深刻,自带 PSD 原稿 link

设计达人网,其实挺感谢这个站点的,优秀资源挺多的,在上面下载了不知道多少 HTML 5 模板和网站 PSD 文件,也从这个站点知道诸如 Dribbble优设网 等优秀网站。从知道这个站点到现在,都每隔一段时间上去逛逛,虽然没怎么留言,也算是老粉了,这个网站也是 WordPress 建的,这么多年布局还在这个样子,没变过。

我是如何从零开始学习到搭建出个人网站 12
快播官网的首页

在快播的官网上看倒一个导航滑动跟随特效挺炫酷的,虽然快播已经消逝离我们而去,但当时的页面还保存着,下载保存在了QQ 邮箱的附件收藏里,一起来围观看看 ~ 有兴趣的可下载研究这个 13 年的特效:https://fongsoul.com/_s/history/file/kuaibo-homepage.rar

我是如何从零开始学习到搭建出个人网站 14
第一次写的个人网站的静态页面

当时自己写的一个单页面,如今看来写的真是一塌糊涂,结果很乱,不知道哪里偷来的 JavaScript 往上套,简直就是垃圾,看见”我制作了个漂亮”这个 不要脸的Slogan,都瞬间想把自己掐死。 放出来恶心一下祸害一下你们:https://fongsoul.com/_s/history/file/自写的网页模板.zip

引起不适 引起不适 引起不适 引起不适

正所谓静极思动,当时一直写的静态网页,要改东西直接改源代码显得有点不够友好,能不能直接改内容即可不需要改动到代码即可,而且随时随地都能改 ?

WordPress !!!!,我都忘记它是怎么走进我的世界里的,也许是它的出色,也或许是眼缘巧合,得到我的垂青。说真的,我对 WordPress 也比较忠心,也没背叛过它,从开始 v3.6 到现在,程序一直都是 WordPress 没换过,虽然也摸过 TypechoPagekit,但正式使用还是 WordPress , 他们最多是本地部署玩玩,研究下它们的源代码罢了,终究不是我的心属程序。

当时部署环境用好像是 WampServer ,我吖的当时连 PHP 都不会,第一天就开始制作主题,也是摸着石头过河,看着别人的文章一步步走来,看的好像是这篇文章 WordPress主题制作全过程 (ps: 章节有点像),对着别人主题做,看着别人的主题结构,全靠猜全靠感觉,PHP 的语法和 HTML 混合起来,那叫一个五胡乱华、八王之乱,更何况当然没这基础,而且很糟糕的事,报错那多的都数不过来,最后硬是写出了个半成品,想想当时真是够大胆的。

我是如何从零开始学习到搭建出个人网站 16
老赵茶馆的老赵制作的 Teahouse 主题

刚玩 WordPress,觉得玩得最好的是当时一个老赵茶馆老赵的博主,为什么觉得他玩得最好呢?是因为当时它设计的主题惊艳到我了,在也算设计专业的我眼中,十分具有设计感,细腻从素材上就能体现出来,深受追捧。当时作为一个萌新的我来说,那简直就是个大佬啊,幻想着我什么时候有它的水平。

还有一个是叫翁天信 Dandy Weng的人,当时是从优设网的一篇文章了解到这个人的,”十八岁自学少年:我的个人网站是怎么做出来的“,当时看了之后对我是挺有影响。

当然光是崇拜并不能让我拥有像大佬这样的水平,那时候很多时间都是在学 PHP,看 PHP 官方文档或者看别人的教程视频,当时看视频看的是一个叫极客学院的平台,不知道怎么搞活动还是怎么,不用钱搞了个 7 天还是 15 天的白嫖了个会员,顺带还把 JavaScript 学了下,就十几个章节,讲的是最基础的,当时看了简直懵逼,知道是什么但又迷迷糊糊,就是写不出效果,当时也是一度怀疑,我 TM 是不是智商有问题。

模仿和造轮子,对于一个学习者是提升能力的最好办法,只有经历过程才会对知识有所领悟。刚学做 WordPress 主题也是下载了很多别人的优秀主题进行模仿,研究别人是怎么写的,从目录结构到编码方式,我的很多行为很多都是模仿出来,遇到不懂问题的就上网搜索一下,面向搜索引擎编程,时间久了自然摸到门路。也正因这样,我也会经常审视自己的代码,怀疑自己的代码写得不够好,感觉写起来也奇奇怪怪的,烂代码也写过不少。

记忆有点模糊,就像断片,但后来确实 PHP 和 JavaScript 都算入门了,看别人的技术文章和看视频教程,平常花时间进去研究吧,也研究过 JQuery 的源码和其他 JS、PHP 框架核心源码,也认真看过几本关于技术与优化的书籍,个别的书籍还复读过,或许还会继续复读。

真正写出的第一款 WordPress,大概是 2015 年中旬,后续也陆陆续续制作过几款主题。随着时间有了沉淀,思考层面加深了,尽管当时制作的很用心,如今要求高了,觉得当时制作的主题有点设计得太随便太烂,也是当初根基不稳,做起来有点烂尾感觉。也不想对其维护,以前也总想开源分享出去或售卖出去,现在想想恶心自己就算了不恶心别人。

想放上几张有当时很多文件和截图的,但无奈在 17 年初老电脑被我折腾操作系统时被我搞坏了,当时下载别人的网站的资源都没了,感觉是有那么点可惜。但也罢,既然都在脑子了,就不必怀念。

也是违背了初心,当初是想放作品的,折腾折腾着开始跑题,未来有空还是会多搞点创作上去。

一路走来,时间不短,也不简单,兴趣驱动着实践,对事物抱着好奇心,对待这件事的学习网页制作的态度,持之以恒吧最重要,才让自己今天有了那么一点沉淀知识。

引用蔡澜的饮食之道doubanbook里的一句话: “一样东西研究深了,就变成艺术”。

交流,但不求共鸣

    我要留言

    Tips: 支持匿名免邮留言。填写邮箱地址有利于对各位靓仔/女进行消息通知。留言头像服务来自Gravatar

    留言者基本信息 匿名訪客
    匿名訪客
    留言主要内容
    Sticker Heo on wordpress, Get !!!!
    再见呲牙笑微笑亲亲愤怒惊吓尴尬捂嘴笑捂脸生病绿帽鼓掌抠鼻感动吐血鬼脸擦汗惊讶恶心禁言睡觉笑哭思考疑问奋斗耍酷吵架眩晕哭泣开心害羞喜欢烦恼爆炸熬夜吃瓜阴险狗头滑稽被打哈士奇大笑加班唱歌纠结发红包送福牛年进宝狗头围脖狗头花狗头草头秃狗头胖次我看好你好的好奇偷偷看危险小丑引起不适滑稽喝水熊猫熊猫唱歌打牌哈士奇失去意识应援熊猫喜欢疼痛勉强笑看穿一切滑稽狂汗不好意思菜狗难以置信月饼滑稽被子倚墙笑出家人菜狗花黑线呦吼有没有搞错打咩扶额
    Kaomojis 颜字

    Σ(っ °Д °;)っ  惊吓w(゚Д゚)w  啊啊(°ཀ°)  吐血(⊙﹏⊙)  呃呃呃o(≧口≦)o  崩溃(´•︵•`)  难过(;´༎ຶД༎ຶ`)  哭死→_→  斜眼看( ̄_, ̄ )  不屑( *︾▽︾)  陶醉(* ̄3 ̄)╭  飞吻o( ̄┰ ̄*)ゞ  不好意思(。・_・。)ノ  对不起φ(≧ω≦*)♪  乐(*^▽^*)  开心(๑╹◡╹)ノ  高兴*´∀`)´∀`)*´∀`)*´∀`)  哈哈哈哈ヽ(✿゚▽゚)ノ  好耶(๑•̀ㅂ•́)و✧  棒Ψ( ̄∀ ̄)Ψ  美味

    BACK TO TOP