去年使用 Pelican 搭建了我的第一个个人站点，发博文(虽然只有 5 篇，惭愧)，选主题，加功能……总之我很享受这个过程。搭建站点，就像是在装修一个房子。一开始空空如也，到后来有了沙发，有了餐桌，有了床……就这样，一个空空的房子开始有了你的印记，慢慢的你对它产生了感情，把它称作为“家”。
但是，其实我一直有个遗憾，我没有找到一个让我满意的主题。就像是房子装修，你可以使用别人设计好的方案，你也可以自己设计方案，或者与设计师合作设计方案。总之，在博客搭建好以来，我就很想自己设计一个主题。但是首先，我不会前端；其次，我不懂设计。直到有一天，我无意中发现了这个博客，真的是让我眼前一亮，作为一个想成为全栈网络工程师的我，前端是必须要了解和掌握的，于是我就开始踏上了我的前端学习之路。
前端学习
因为平时白天要实习，大部分都是在晚上 8：00 - 11：00 和周末弄的。我从去年 10 月初开始学习 JavaScript，写了一篇关于js的博文。一个月之后，我开始一边写网站一边学习 HTML（HTML5）和 CSS（CSS3, SASS）。在此期间共看了 5 本书（后 3 本只是随便翻了翻）：
- JavaScript编程精解
- HTML5经典实例
- 响应式Web设计全流程解析
- CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation
- HTML5和CSS3快速参考
同时也参考了一些网上的资料和文档，当然还包括一些网站的代码和设计。
总之，前端上手很容易，然而想要精通很难，浏览器兼容、动画、访问速度优化、搜索引擎优化……问题太多了。而且前端也是一个变化相对快速的领域，新的规范，新的工具，新的设计模式…当然，这也说明了前端领域的活跃性。我一直都坚信，未来 web 应用会更加的流行。
响应式设计
响应式设计简单的说就是网页能够自动适应不同的屏幕尺寸(手机、平板、电脑)。跟扁平化设计一样，它们都是智能手机和平板电脑普及的产物，为了应对当前多样性的设备而出现的。当然，响应式并不局限于网页，安卓应用、Windows 10 的 UWP 应用，都或多或少的带有响应式的特性。
当然，响应式并不是万能的。一些布局复杂的网站，根据不同的设备写不同的 CSS 是更好的方案（多套 CSS）。一来更节约带宽，二来可以减小一些复杂度。而像博客这样布局简单的网站，响应式反而更方便，因为你只需维护一套 CSS 即可。
关于响应式的实现，网上有很多不错的介绍，比如这篇阮一峰的博文和这篇w3cplus网站上的文章，这里不再累述。其实我主要是想分享一下我的设计思路。
事实证明，设计是一个十分消耗时间的事情，你需要不断的调整，不断的修改。这个网站就是经过了 5 次大的布局调整和很多次局部布局修改才有了现在的模样。
响应式网页的布局是通过网页容器的宽度来划分的，本网站的划分方式为：
- 手机：0~600px
- 平板：600~1000px
- 电脑：1000px 以上
一般来说，一个网页一般由网页标题（title）、导航（nav）、侧边栏（aside）、主要类容（main）、页脚（footer）组成。
当容器宽度很宽时（比如电脑），往往竖直方向空间就很有限，我们可以把一些附属信息以侧边栏的形式表现出来。而当容器宽度有限的情况（手机是典型），侧边栏就显得非常不适合了，此时通常的做法就是将信息从上到下顺序布局，下面来看一下我的设计。
电脑布局
在电脑布局中，我特地把标题（title）、导航（nav）和个人信息（aside）放在了左边，并且在主要类容右边留了一些空白，这样显得文章更居中一些。
平板布局
对于这种宽度不足的情况，我把标题、导航放在了上方，而把个人信息放在了页脚。
手机布局
此时的宽度只能放得下标题了，导航隐藏了起来，点击最右的按钮即可显示导航。
总之，这是一种很常见的响应式布局方法，参考了简书的布局。
新博客
为了尽可能的学习到最新的技术，我对这个网站做了如下几个设定：
- 该网站仅支持现代浏览器（IE10 及以上、Edge、Chrome、Safari、Firefox）
- 尽量使用 HTML5 的语义标签
- 使用 CSS3 的新特性，包括阴影和过渡
- 使用 SVG（矢量图），该网站的所有图标和 logo 都是矢量图
- 除了 jQuery 和必要的插件外, 不使用任何第三方的模板（自己造轮子）
同时博客平台也从以往的 Pelican 迁移到了 Jekyll，因为后者跟 GitHub 结合得更紧密一些。于此同时博客也从 GitCafe 重新迁回到了 GitHub（百度收录什么的去死吧），正所谓人生贵在折腾。
该博客会是我的一个长期项目，以后我会继续优化该博客的样式和功能。未来会把它作为一个主题发布出去，让更多的人能够免费的使用和修改我的主题。
最后祝大家新年快乐! 
