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

大家平时对前端开发都十分关注，今天为大家整理了如何在github上搭建自己的博客_html/css_WEB-ITnose，下面就随我爱编程网小编一起来看一下吧。

本文目录一览：

• 1、如何在github上搭建自己的博客_html/css_WEB-ITnose
• 2、网站WEB前端开发需要掌握什么技术？
• 3、怎么学好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前端开发需要掌握什么技术？

了解web前端Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征

在互联网的演化进程中，网页制作是Web1

0时代产物，那时网站的主要内容是静态的，用户使用网站的行为也以浏览为主

2005年以后，互联网进入Web2

0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化

网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的

说得直白点就是美工photoshop，交互设计，flash，js，html+css

就小规模公司而言，一个技术员都得会这几样技能，这样很锻炼人的，慢慢的你就会成为公司的主力

大规模的公司把这些分得很细，所以，你可以精通一门，熟悉其他的，进军大公司

网页开发工具学习web前端开发，网页开发工具有FrontPage，会用Word的人很容易学会FrontPage

还有一个常用的是Dreamweaver

这两种都是使用最多的HTML网页制作工具，我使用的是Dreamweavercs6,因为这套软件提供了一套直观的可视界面，融合了html5一些新的内容

包括网格布局什么的

学习内容HTML、CSS和JavaScript 我爱编程网

html是内容，css是表现，javascript是行为

前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢

所以，对于从事IT工作的人来说，前端开发是个不错的初入点

也正因为如此，前端开发的领域有很多自学成“才”的同行

html是最基础的，现在流行的是html5设计，先学会网页布局

css是用来美化html页面的为页面提供布局和格式

最后再学javascript

如果你把每天看电影、看电视剧的时间用来学习，我想一个星期入门是没有问题的

基础知识：1

html+css

这部分建议在

cn上学习，边学边练，每章后还有小测试

之后可以模仿一些网站做些页面

本站提供的个人博客模板/download/都是比较简单的单页，可以下载下来模仿自己做一个

理解css每个元素的属性，样式的实现不一定只有一种写法，多想一想还有没有什么需要改进的地方

《10条HTML代码编写技巧》《CSS简明教程》《Div+CSS规则整理以及注意问题》2、JavaScript

不是所有的网页都必须有js，但是要想实现一些超酷的功能和界面的时候，就需要涉及到js

如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在w3school上学习

之后建议马上看《javascript语言精粹》《JS经典实例》3、Photoshop、flash

熟悉会一点儿就行了，没必要全部都学得精通，当然如果你在学习的过程中，发现你ps或者flash比较感兴趣的话，也可以尝试做美工这一行

4、html5和css3

可以先了解一下，然后再入手

毕竟IE的浏览器大多还不支持

《学习Html5建站教程（一）Html5简介》《学习Html5建站教程（二）Html5语法与规则》《学习Html5建站教程（三）Html5博客页面设计之理论》《学习Html5建站教程（四）用HTML5做个人的网站》5、浏览器兼容

懂web标准，熟练手写xhtmlcss3并符合符合w3c标准

代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera

虽然IE6很多都不兼容，但现在还使用的人还是有的

W3C验证地址：、javascript、动态交互网站(asp、php、aja)

怎么学好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）等等。

以上就是今天分享给大家的内容了，想要了解更多资讯，敬请关注我爱编程网！