其实想写这篇博客很久了，但一直都没有勇气写下去。一是因为时间问题，二是觉得如果真要从本地环境配置开始写起，再到博客前端搭建，有很多内容要写。但是为了活跃校内的前端氛围，决定拿出点儿元老级别的干货来。
自己在个人博客的搭建过程中遇到过很多问题。也上网查阅了一部分资料。有百度过来的，不过遇到问题时更多的还是看官网上的文档。
1. 本地环境搭建
这一部分是必不可少的。个人配置本地环境最主要的目的是能预览自己写好的博客的样子。
1.1 必要软件下载
这部分内容参考自Jekyll官网（https://jekyllrb.com/docs/installation/）。不想看英文的看这里。
我们需要下载一些东西：
- 下载Rubyhttp://rubyinstaller.org/downloads/。左边的downloads中有一堆链接，推荐下载安装Ruby 2.0.x及以上的版本。
- 下载Ruby Development Kithttp://rubyinstaller.org/downloads/（没错，还是这个链接）。在下载这个之前先看在右边找到WHICH DEVELOPMENT KIT?，根据下载的Ruby版本选择相应的Development kit。下载好之后选择解压到新建的目录中（我是解压到的C盘，目录名为Ruby-toolkit)。
- 下载RubyGems https://rubygems.org/pages/download 。
- 下载Node.js
- 下载pythonhttps://www.python.org/downloads/。
1.2 乱七八糟的软件安装
从这里开始，由于在windows上有一些问题，所以针对windows有一些不同的解决方案。内容参考自https://jekyllrb.com/docs/installation/。
你们看原文去吧。
啊喂！！！什么鬼！怎么能这样！
同情心太重，还是亲自手敲一段文字好了。
1.2.1 安装Ruby
对，然后点击install就行。
1.2.2 Ruby Development Kit
Ruby DevKit是一个自解压文档。当你执行该文件的时候，它会询问你要解压到的目录。可以首先建一个名字没有空格的目录，比如C:\RubyDevKit\。
然后，你需要初始化DevKit并将它绑定到你的Ruby上。打开命令行，输入如下命令“cd C:\RubyDevKit\”然后按回车进入Devkit目录。接着输入命令“ruby dk.rb init”，最后“ruby dk.rb install”。如果一切都正常进行的话，就可以接着执行下一步了。
1.2.3 RubyGems
在命令行中输入“gem install jekyll”然后回车。不要尝试安装Jekyll v1.4.3（别问我为什么，我忘了）。
1.2.4 安装语法高亮工具
有两个语法高亮工具，一个是Rouge，一个是Pygments。Pygments支持的语法更多，但是安装配置比较麻烦（我弄这个失败了。。。）。所以，只介绍Rouge的安装。命令行中输入“gem install rouge”。然后创建博客目录后需要在配置文件中加入“highlighter: rouge”。这个稍后会提到，这里了解即可。关于python的安装，这里不介绍，这个和Pygments有关。有兴趣参考http://jekyll-windows.juthilo.com/3-syntax-highlighting/。
1.2.5 安装Jekyll
在命令行中输入“gem install jekyll”。或者“gem install jekyll --pre”安装前一个版本，或者“gem install jekyll -v '2.0.0.alpha.1'”安装你想要的版本。
到这里，本地环境配置应该结束了。
博客配置
已经敲不动了（快六点半了，饿！）。说实话，这部分也很烦啊。
为了能用Github Page搭建静态博客，首先你得要有一个Github账号，注册一个（不用我教怎么做吧）。然后登陆Github
结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。
互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。
学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。
后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push。
1. 必备基础技能
前端技能汇总这个项目详细记录了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习的方向，完善技能和知识面。
frontend-dev-bookmarks是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术，非常全面。
以下是个人觉得入门阶段应该熟练掌握的基础技能：
HTML4，HTML5语法、标签、语义
CSS2.1，CSS3规范，与HTML结合实现各种布局、效果
Ecma-262定义的javascript的语言核心，原生客户端javascript，DOM操作，HTML5新增功能
一个成熟的客户端javascript库，推荐jquery
一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟
HTTP
在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。
2. 基本开发工具
恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并解决问题，以下是个人觉得必备的前端开发工具：
文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，使用方便
浏览器：推荐Google Chrome，更新快，对前端各种标准提供了非常好的支持
调试工具：推荐Chrome自带的Chrome develop tools，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等
辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools
翻墙工具：lantern, 壁虎漫步
3. 学习方法和学习目标
3.1 方法
- 入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果
- 在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法
- 阅读HTML，CSS，Javascript标准全面完善知识点
- 阅读前端牛人的博客、文章提升对知识的理解
- 善用搜索引擎
3.2 目标
- 熟记前面知识点部分的重要概念，结合学习经历得到自己的理解
- 熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。
4. 入门之路
以下是入门阶段不错的书籍和资料:
HTML先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。
CSS先看《CSS: The Missing Manual》，然后《CSS权威指南》
javascript先看《javascript高级程序设计》，然后《javascript权威指南》
HTTP看HTTP权威指南
在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。
动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址
可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的前端面试题还有个人总结的面试题(带参考答案)
http://code.tutsplus.com 有各种各样的教程
MDN也有很多教程，更重要的是里面有详细的文档，需要查找某个功能时在Google搜索：xxx
site: https://developer.mozilla.org
http://www5rocks.com/zh/ 也有很多优质教程
http://www.sitepoint.com/
http://alistapart.com/
原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》或者去jQuery官网
建一个github账号，保存平时学习中的各种代码和项目。 有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。也可以去博客园或者
继续阅读
Bluefish