web前端开发个人博客设计 怎么学好web前端开发 ？

今天，我爱编程网小编为关注前端开发的同学们准备了web前端开发个人博客设计 怎么学好web前端开发 ？，下面一起来看一下吧。

如何在github上搭建自己的博客_html/css_WEB-ITnose

之前闲暇之余尝试着在github上搭建自己的博客，搭建过程中发现没有自己想象的那么容易，几经波折，好不容易才搭建好了雏形。现在就将在github上构建自己博客的整个流程好好总结一下。
注：本文并非完全原创，在搭建自己博客的时候，我也上网查阅了很多资料，只是网上我所查到的资料或多或少都有这样那样的欠缺。所以，我将这些资料整合在一起，并分享我在构建过程中遇到的问题和解决方法。
另外，在github构建自己博客并非只有一种方法，我整合出来的只是其中的一种。
1.建立一个项目 先在GitHub创建一个项目，名字随意，尽量全部小写字母，避免随后会碰到的URL冲突问题。
1.1 在自己github右上角上，点击+号按钮，在出现的菜单中选择 New repository
1.2 进入到创建仓库页面，给仓库命名并给于描述之后，点击create repository按钮创建仓库
项目创建完毕。
2.安装Git git是一个免费的、分布式的版本控制工具，或是一个强调了速度快的源代码管理工具。
git的安装地址()
关于git的具体安装步骤可参考
关于git的常用命令可参考-guide/
3.clone项目 本地运行Git，随意选个目录，将刚才创建的项目clone下来。
例：
cd /e/bloggit clone EX.github-io
4.建立配置文件_config.yml 注意：之后建立的所有文档务必使用UTF-8 无 BOM(隐藏字符) 的编码保存
在项目的根目录下打开git命令行界面，输入命令 >> _config.yml 新建文件 _config.yml ，填写 baseurl: /blogdemo ， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径。
例：
baseurl: /EX.github-io
目录结构变为
/EX.github-io |--_config.yml
5.建立主页 在根目录下新建文件 index.html ， 内容如下：
---title: Hello, My Blog---{{ page.title }}
每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线"---"，标记开始和结束，里面每一行设置一种元数据。"title: Hello, My Blog"，表示该文章的标题是"Hello, My Blog"，如果不设置这个值，默认使用嵌入文件名的标题，即"hello world"。
在yaml文件头后面，就是文章的正式内容，{{}}这些是Liquid模板语言,在{{}}里面我们可以使用模板变量。{{ page.title }} 表示“本页面的标题”，因为我们前面设置了title为Hello， My Blog。所以到时候进入到博客首页，title 就会显示相应的文案。
目录结构变成：
/EX.github-io |--_config.yml |-- index.html
6.在_posts内撰写文章，并在首页加入文章列表 现在首页有了，那我们怎么发博文上去呢？
回到项目根目录， 打开git bash，运行 mkdir _posts 新建一个目录，看名字也知道啦，这里存放你所有的文章。
进入_posts目录，新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle 这样。比如 2015-05-05-my_first_article.md，尽量避免空格或者其他乱七八糟的字符，这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml中的 permalink 属性而改变，默认值为 date ，也就是我们刚刚创建的文件的样子，具体的规则可以看这里。
如果你发现了我刚才创建的文件后缀名是 .md ，熟悉GitHub或者StackOverFlow的朋友应该知道Markdown 格式。对于不熟悉前端的人来说，用markdown可以避开HTML，转而使用更加直观的Markdown语法。如果不熟悉Markdown语法也没关系，可以参见这份Markdown 语法说明，应该说是相当易学，并且在熟悉之后非常易用的。而作为一个前端开发者来讲，我还是更倾向于用html。
回到主题，打开刚才创建的文件，输入如下内容：
---title: 我的第一篇文章---# {{ page.title }}## 目录+ [第一部分](#partI)+ [第二部分](#partII)+ [第三部分](#partIII)----------------------------------## 第一部分 这里是第一部分的内容----------------------------------## 第二部分 这里是第二部分的内容----------------------------------## 第三部分 这里是第三部分的内容{{ page.date|date_to_string }}
这段内容中使用了最常用的几种Markdown语法，比如使用 # ，## 表示 HTML 中的, 。使用[text](link)创建超链接，使用 连续多个 - 创建水平线（注意：不包括最上端包围title所使用的横线，那里表示一个页面的“头属性”），等等。更多详细的语法可以在之前提到的页面查询，这里不再赘述，总之，这是一种更加贴近真实写作的语法，推荐大家尝试。
页面最后面的那个 {{ page.date|date_to_string }} 是指显示本页的日期属性，并且转换为可读的字符串形式。同样也是Liquid语法。
OK，第一篇文章就写好了，然后到主页给文章加上入口链接。
打开我们的 index.html 文件，添加内容，变成下面这样：
---title: My Blog---{{ page.title }}{% for post in site.posts %}{{ post.date|date_to_string }} {{ post.title }}{% endfor %}
简单解释一下，Liquid标记最主要分为两种，一种是直接输出变量内容，像这样：
{{ page.title }}
另一种则是逻辑命令形式的，像这样：
{% for x in y %} ... {% endfor %}
而刚才写进主页的内容，就是遍历所有post文件，然后逐一显示在页面上，这里需要注意的一点就是在创建文章的超链接时，除了 post.url 之外，也要注意在前面加上site.url ，原因前面也有提到过，我们正在创建的是 Project Pages 类型的网站，其最终生成的网址根目录是：username.github.com/projectname，而 post.url 生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。
现在检查一下更改的所有内容，确认不要犯下愚蠢的错误，比如把 “.” 打成 “。“或者单词拼错之类的。
目录结构变为
/EX.github-io |--_config.yml |-- index.html |-- _posts | |--2015-05-05-my_first_article.md
7.配置SSH keys 为什么要配置ssh keys？因为github和本地代码做推送和拉取时，需要用到ssh的密钥对进行数据加解密，由于github上新建的项目没有添加密钥，所以本地仓库连接不到远程仓库。
那么如何配置ssh keys呢？
7.1 我们需要检查你电脑上现有的ssh key：
cd ~/.ssh
如果提示：No such file or directory 说明你是第一次使用git。
7.2 生成新的ssh keys：
ssh-keygen -t rsa -C "邮件地址@youremail.com"
注意1: 此处的邮箱地址，你可以输入自己的邮箱地址；注意2: 此处的「-C」的是大写的「C」。
按回车后出现
再按一次回车即可。
然后系统会要你输入密码：
Enter passphrase (empty for no passphrase):Enter same passphrase again:
在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。
注意：输入密码的时候没有*字样的，你直接输入就可以了。
最后看到这样的界面，就成功设置ssh key了：
7.3 添加ssh key到GitHub
在本机设置SSH Key之后，需要添加到GitHub上，以完成SSH链接的设置。
1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。
2、登录你的GitHub个人主页。点击右上角的 Settings进入设置页面，然后点击SSH Keys页面中的Add SSH key按钮
3、把你本地生成的密钥复制到里面（key文本框中）， 点击 add key 就ok了
8.发布到GitHub 这个时候我们就可以把页面提交到github上了，到根目录打开git命令行界面
8.1 把刚创建的所有文件添加到本地git库
git add -A
8.2 保持良好的习惯，每次提交都提交添加描述
git commit -m "create my blog"
8.3 推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的 Project Pages，GitHub规定，只有该分支中的页面，才会生成网页文件。即GitHub仅会将分支 gh-pages 下的内容进行自动生成操作， 所以本地的 master 分支应推送到远端的 gh-pages 分支
git push origin master:gh-pages
输入账号和密码，账号即你的GitHub账号(不是昵称，是账号名！)，输入密码的时候命令行界面不会有任何的变化，所以在输入密码的时候要谨慎小心。之后按回车即可。
好了，那现在我们要如何查看我们的博客页面呢。打开GitHub，进入到自己博客的仓库，右侧菜单栏有一个setting选项
点击进入之后会看到这个页面
GitHub Pages中显示的链接就是你的博客地址啦。
9.增加模板套装_layouts 其实到第8步博客的构建就已经完成了，只是没有样式的博客实在太难看。GitHub Pages有提供一些主题给我们使用。但作为一个前端开发者，肯定更希望自己给自己的博客布局和创建样式。
回到项目根目录，新建文件夹 _layouts，顾名思义，“布局”是也。在 _layouts 中新建一个最基本的布局文件，姑且命名为default.html好了：
{{ page.title }}{{ content }}
首先，charset=utf-8让我们一劳永逸地解决了UTF-8的编码问题，随后指定了正文内容的位置，当然在这里只是一个最简单的内容，在body内仅有一个 {{ content }} 标签，你可以根据自己的喜好对页面进行任何改动，只要记得保留这个内容标签在你想要的位置就好。
然后我们修改index.html和刚写完的那篇文章，只要在头属性上加一句就好：
---title: xxoolayout: default.html---
我们当然还可以把这个结构变得更灵活一些，比如继续新增两个模板分别叫做l_post.html与l_index.html，他们首先引用default.html，但在其基础上做出一定的修改。然后首页使用l_index模板，而所有的post文件则使用l_post模板，等等等等，请随意发挥。但始终记得加上 {{ content }} 标签
目录结构变为
/EX.github-io |--_config.yml |-- index.html |-- _posts | |--2015-05-05-my_first_article.md |-- _layouts | |--default.html
再次推送到GitHub即可。
这样，我们就已经构建好了一个最简单的blog。之后你们就可以开始为自己的博客添砖加瓦了。
9.问题汇总 9.1 推送到GitHub之后个人主页的contributions没有提交记录
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。
如何查看自己的名称和邮箱呢。回到GitHub个人主页，点击右上角的setting图标

进入之后Personal settings菜单栏下的Profile页面中，Name即为你的名字
但邮箱不是Name下面的Public email，很多人在这里被误导了。邮箱是Emails页面中的邮箱地址

知道了名字和邮箱之后，打开git命令行界面，通过下面的命令行来设置你的名字和邮箱
git config --global user.name "cnfeat"//用户名git config --global user.email "cnfeat@gmail.com"//填写自己的邮箱
设置正确之后，提交记录就都恢复了。不仅仅你以后提交的都会出现在提交记录中，你以前提交的也会恢复并出现在记录中。
9.1 每次提交都要求你输入账号跟密码
原因是我们在clone分支时使用了 HTTPS 的地址，
HTTPS 的地址是做什么用的呢？其实它主要是用在一些防火墙或者代理服务器设置比较严格的情况下的，比如有些公司是禁止使用 SSH 连接外网，那么在这种情况下要想使用 Git 的话，就只能用 HTTPS 的方式了。
使用 HTTPS 的方式，也有储存密码的方式，但我们首推的方式是切换到 SSH，如果你的网络环境支持的话。
回到你博客的根目录。打开git命令行界面，输入
git remote set-url 你博客的ssh url
如果你不知道你博客的ssh url，打开你的博客项目，右下角选择SSH，然后复制框里的url就行了
之后再提交就不会要求你输入账号密码了。
9.3 页面调试不方便
如果我们要给我们的博客布局或设置样式神马的，我们是否每次都要把代码写好然后推送到GitHub上，再打开自己的博客地址，看看布局有没有什么问题。如果有的话再改代码，再提交，再查看呢？
这样效率岂不是很低，有没有能够本地调试GitHub Pages上的页面的工具呢？
答案是肯定的。我用的是Jekyll。它的官网就有完整的教程，使用起来非常的简便。
10.参考资料 1._with_jekyll.html
2.
3.-05-11-how-to-build-a-blog/
4.-open.com/lib/view/open1366080269265.html

怎么学好web前端开发 ？

入门
在我理解下的基础知识，就是我们可以写一些基本的样式，并能对页面的元素进行操作。举例来说，就是我们用Spring和JSP写了一个博客，然后我们可以用jQuery来对页面进行一些简单的操作，并可以调用一些API。因此，我们需要基本的HTML / CSS知识。只是要写好CSS并不是一件简单的事，这需要很多实战经验。随后，我们还需要有JavaScript的经验，要不怎么做前端呢？
同时，我们还需要对DOM有一些基础的了解，才能做一些基本的操作，如修改颜色等等。在这种情况下，最简单的方案就是使用jQuery这样的工具。不过，如果可以自己操作DOM是再好不过的了。

中级篇
中级篇就更有意思了，现在我们就需要对页面进行更复杂的操作。Ajax和JSON这两个技能是必须的，当我们要动态的改变页面的元素时，我们就需要从远程获取最新的数据结果。并且我们也需要提交表单到服务器，RESTful就是必须要学会的技能。未来我们还需要Fetch API，ReactiveX这些技能。
除此我们还需要掌握好HTML的语义化，像DIV / CSS这也会必须会的技能，我们应该还会使用模板引擎和SCSS / SASS。而这个层面来说，我们开始使用Node.js来完成前端的构建等等的一系列动作，这时候必须学会使用命令行这类工具。并且，在这时候我们已经开始构建单页面应用了。

高级篇

JavaScript是一门易上手的语言，也充满了相当多的糟粕的用法。几年前人们使用CoffeeScript编成成JavaScript来编写更好的前端代码，现在人们有了ES6、TypeScript和WebPack来做这些事。尽管现在浏览器支持不完善，但是他们是未来。同样的还有某些CSS3的特性，其对于某些浏览器来说也是不支持的。而这些都是基于语言本来说的，要写好代码，我们还需要掌握面向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为一合格的工程师，我们还需要把握好安全性（如跨域），做好 授权（如HTTP Basic、JWT等等）。

工程化

这个标题好像是放错了，这部分的内容主要都是自动构建的内容。首先，我们需要有基本的构建工具，无论你是使用gulp、grunt，还是只使用npm，这都不重要。重要的是，你可以自动化的完成构建的工具，编译、静态代码分析（JSLint、CSS Lint、TSLint）、对代码质量进行分析（如Code Climate，可以帮你检测出代码中的Bad Smell）、运行代码中的测试，并生成测试覆盖率的报告等等。这一切都需要你有一个自动构建的工作流。

兼容性

虽然我们离兼容IE6的时代已越来越远了，但是我们仍然有相当多的兼容性工作要做。基本的兼容性测试就是跨浏览器的测试，即Chrome，IE，Firefox，Safari等等。除此还有在不同的操作系统上对同一浏览器的测试，某些情况下可能表现不一致。如不同操作系统的字体大小，可能会导致一些细微的问题。
而随着移动设备的流行，我们还需要考虑下不同Android版本下的浏览器内核的表现不致，有时候还要一下不成器的Windows Phone。除此，还有同一个浏览器的不同版本问题，常见于IE。。

前端特定

除了正常的编码之外，前端还有一些比较有意思的东西，如CSS3和JavaScript动画。使用Web字体，可惜这个不太适合汉字使用。还有Icon字体，毕竟这种字体是矢量的。不过Icon字体还有一些问题，如浏览器对其的抗锯齿优化，还有一个痛是你得准备四种不同类型的字体文件。因此，产生了一种东西SVG Sprite，在以前这就是CSS Sprite，只是CSS Sprite不能缩放。最后，我们还需要掌握一些基本的图形和图表框架的使用。

软件工程

这一点上和大部分语言的项目一样，我们需要使用版本管理软件，如git、svn，又或者是一些内部的工具。总之你肯定要有一个，而不是 2016.07.31.zip这种文件。然后，你还需要一些依赖管理工具，对于那些使用Webpack、Browserify来将代码编写成前端代码的项目来说，npm还是挺好用的。不过就个人来说，对于传统的项目来说我总觉得bower有些难用。我们还需要模块化我们的源码文件，才能使其他人更容易开始项目。

调试

作为一个工程师来说，调试是必备的技能。大部分浏览器都自带有调试工具，他们都不错——如果你使用过的话。在调试的过程中，直接用Console就可以输出值、计算值等等。如果你的项目在构建的过程中有一些问题，你就需要debugger这一行代码了。
在一些调用远程API的项目里，我们还需要一些更复杂的工具，即抓包工具。在调试移动设备时，像Wireshark、Charles这一类的工具，就可以让我们看到是否有一些异常的请求。当然在这个时候，还有一个不错的工具就是像Chrome自带的远程设备调试。对于移动网站来说，还要有Responsive视图。

测试

我遇到的很多前端工程师都是不写测试的，于是我便把它单独地抽了出现。对于一个前端项目来说，正常情况下，我们要有单元测试、功能测试，还有要一些UI测试来验证页面间是否可以跳转。对于依赖于第三方服务的应用来说，还要有一个Mock的服务来方便我们测试。如果是前后端分离的项目，我们还需要有集成测试。

性能与优化

要对Web应用进行性能优化，可能不是一件容易的事，有时候我们还知道哪些地方可以优化。这时候人们就可以使用Yahoo的YSlow，或者我最喜欢的Google PageSpeed来检测页面的一些问题，如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。
我们还应该借助于NetWork这一类的工具，查看页面加载时，一些比较漫的资源文件，并对其进行优化。在一些情况下，我们还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。

设计

前端工程师还需要具备基本的UI技能。多数情况下拿到的只是一张图，如果是一个完整的页面，我们就需要快速分割页面布局。而依赖于不同的页面布局，如响应式、网格、FlexBox布局也会有不同的设计。而有些时候，我们就需要自己规划，制作一个基本的线框图（Wireframe）等等。

我爱编程网

怎样建立个人博客？

1.怎样建立自己的博客
“博客”是英文单词Blog的译音。Blog是Weblog的简称，中文意思是“网络日志”。人们通常把撰写Blog的人称为Blogger，也翻译为“博客”。因此，“博客”既可以指撰写网络日志这种行为，也可以指撰写网络日志的人。

博客是继Email、BBS、ICQ之后出现的第四种网络交流方式，一个博客其实就是一个网页，它通常是由简短且经常更新的帖子所构成，博客中的内容从知情人爆出的“新闻内幕”，到纯个人色彩的思想、诗歌、散文、照片甚至科幻小说、DV作品，应有尽有。

有些人通过博客结交了新的社交圈，有人则把自己的博客当成与客户交流的平台，而这位张先生在装修新房期间，还把自己的账单和装修进度发到博客上，根据网友的回复和指点，他及时调整装修方案，少花了不少冤枉钱。

那么怎样能拥有自己的博客呢？当前，大多数博客是免费的，只要你有一台能够上网的电脑，一个有效的邮箱，一个ID就可以了： 1.登录该网站网页，按步骤申请一个有效的用户名，即ID； 2.用新申请的用户名重新进入网站主页面，点击进入“天涯博客”页面，在这里，会看到醒目的“博客使用手册”，点击后按照页面提示操作，申请新的blog，输入自己喜欢的博客日志标题和网志描述； 3.为自己的博客选择一个标准版。这是体现自己博客风格的第一个步骤。但是一般网站提供的页面模板大多比较单调，如果要有自己的风格，可以自己或请专业的朋友为自己的博客设计一个独一无二的、别具特色的页面。这样，你就可以在自己的博客里畅所欲言了。

2.怎样让很多人都能看到我的博客?
博客人人都可看到,但要吸引更多的人不断的来看你的博客,一要有新意,内容要是大家都关心的话题,或喜欢的内容,二要不断更新,最好每天都有新内容.

3.怎样建一个自己的网站
1． 要建立个人网站，首先必须要了解一下目前网页制作的基本语言HTML，入门即可，大概花个一二小时就可。
2． 学会使用目前流行的网页制作软件，如Frontpage、Dreamweaver等一些功能强大，所见所得的软件，初步了解就可，不用全部掌握，一般是边用边学，不断提高使用水平。
3． 广泛的上网浏览各种网页，一开始最好能下载一些较简单的个人网页，因为他们所用到的技术较为简单，可用网页制作软件打开研究。然后推荐去浏览一些专业的网页设计网站，学习一些排版经验，同时可下载一些网页结构模版供自己套用。
4． 确定你的网站主题，我个人不主张开始就想建软件大全、书库等网上流行的为网站主题，因为第一你不够专业，网上已有太多的同类软件，别人不可能上你的网站下载。第二这类网站需要巨大的主页空间，不仅一开始你申请不到这么大的空间，而且你也不可能经常上载维护。网站主题最好是有你的个人特色，实在不能确定我建议自己做一个私人门户网站，将平时自己经常去的网站做一个较为综合的连结。
5． 网页最好不要用特别与众不同的颜色、字体，因为每个人使用的计算机各不相同，特别的颜色、字体别人不一定能看得到。
6． 网页要增加美观图片不可缺少，我建议如果你会用一些专业的作图软件最好自己制作，这会有自己的特色，放些私人照片也可以，但切记各种图片一定要作优化处理，减小它的存储尺寸。提醒一下每页不要放过多的图片，因为第一会使网页显得杂乱，第二会使你的网页显示速度过慢。制作图片的常用软件有Photoshop，Fireworks等。
7． 网页上可以用一些动画与特效增加你主页的美观与功能，动画可上网找，同样最好能自己制作，GIF格式的最常用，可用Ulead的Gig Animator软件制作，目前流行的是Flash动画，更多变化，尺寸更小，缺点是有些计算机上的浏览器缺省没有安装Flash浏览软件，有些计算机用户不能看到Flash。网上还有许多免费的Javascript等可供使用，与图片一样，我建议每页不要放太多的动画与特效。
8． 网页基本建成后，上网找免费的主页空间，以其主机的速度，提供的空间大小和有无基本的CGI功能及其提供的域名是否简单易记为考量依据，所谓CGI是指主机服务器上提供的程序，一般你可申请有免费计数器、留言板等。找到速度快，主页存放空间大，域名简单的网站存放你的网页。
9． 接下来是将网页上传至你申请的服务器上，具体上传的办法你在申请主页空间时就会了解，具体使用你制作网页的软件即可，我个人推荐使用CuteFTP Pro上传，这个软件功能强大，简单易谩?
10． 好，现在你的网站已建立，你可通知你的朋友上去浏览，把个人网站印在你的名片上，还想推广你的网站？那你可去各大搜索网站登录你的新站，如雅虎、搜虎、新浪等知名网站。你还可与其它网站申请友情连结、去一些提供连结交换的网站申请广告交换，如太极链，酷站等。在做这一步时你需要做二个468X60和88X31尺寸的广告图片，动画最好，存储大小尽量控制在10k以下。
11． 如果你还想靠你的网站赚一些小钱，你可去一些商业网站申请广告连结，替他们做广告，一般以从你的网页点击到他们的网页次数算钱。
12． 最后我要提醒各位未来网主，你的网站千万不要放一些明显与国内政治相抵触的内容，这事关重大，不可儿戏，否则网站被关闭事小，坐牢也说不定哦。另外，网站内容与性有关可大大增加被浏览的数量，但黄色的内容不要放，虽说性质比不上反动内容，但也有问题。建议打打擦边球，提供一些性教育、性知识，情情爱爱的内容无伤大雅。

以上就是我爱编程网小编为大家带来的web前端开发个人博客设计 怎么学好web前端开发 ？，希望对大家有帮助，了解更多相关资讯请关注我爱编程网。