github好多年前，大家都开始玩啦，我这个菜鸟近几年才开始。github不仅可以管理项目，还可以搭建博客。技术人员，一般用的博客为博客园，CSDN多一些。看到朋友们都弄一个，我也开始弄起来，先找点资料看看，然后开始动手了。

我的电脑是MAC的，其他系统也差不多。先看看我建博客的过程，已经成功了，而且很好用，大家可以看看我的网址https://lu-yuan.github.io .

　　(1)首先在github上注册账号，可以使用github，https://github.com/join?source=header-home

这个比较简单，填写用户名，邮箱，密码等就可以了。如果有账号了，我们接着看下面。

　　(2)搭建github博客，需要用的东西，github page, jekyll模板。

首先打开https://pages.github.com/，按照步骤一步一步来，

第一步，先建一个项目仓库，名称很重要，要和用户名一致。

第二步，github客户端下载，超好用的，下载客户端，

客户端装成了，

第三步，创建index.html

<!DOCTYPE html>

<html>

<body>

<h1>Hello World</h1>

<p>I'm hosted with GitHub Pages.</p>

</body>

</html>

第四步，先选中change部分，然后commit, 再然后sync

第五步，提交成功，浏览页面，https://username.github.io   记得username换成你的用户名

github pages完成了，接着jekyll模板部分。

jekyll是静态站点生成器。根据网页源码生成静态文件。提供了模板，变量，插件等功能，用来编写整个网站

第一步，创建项目，

在本地先建个文件夹，blog.

$ mkdir jekyll_demo

对该目录进行git初始化

$ cd blog

$ git init

然后，创建一个没有父节点的分支gh-pages。因为github规定，只有该分支中的页面，才会生成网页文件。

$ git checkout --orphan gh-pages

第二步，创建设置文件

在根目录下，创建一个名为_config.yml的文本文件。是jekyll的设置文件，我们在里面填入如下内容，其他设置都可以用默认选项，具体解释参见官方网页

baseurl: /blog

现在目录结构变成：

/blog
　　　　|--　_config.yml

第三步，创建模板文件，

在根目录下，创建一个_layouts目录，用于存放模板文件，

$ mkdir _layouts

进入该目录，创建一个default.html文件，作为Blog的默认模板。并在该文件中填入以下内容

　　<!DOCTYPE html>

　　<html>

　　<head>

　　　　<meta http-equiv="content-type" content="text/html; charset=utf-8" />

　　　　<title>{{ page.title }}</title>

　　</head>

　　<body>

　　　　{{ content }}

　　</body>

　　</html>

Jekyll使用Liquid模板语言，{{ page.title }}表示文章标题，{{ content }}表示文章内容，更多模板变量请参考官方文档

现在目录变为

/blog
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html

第四步，创建文章

在根目录，创建名为_posts目录，作为blog的文章。

$ mkdir _posts

进入该目录，创建第一篇文章，名为2017-04-19-hello-world.html

在该文件中，填入如下内容，注意行首不能为空格，

---
layout: default
title: 你好，世界
---

<h2>{{ page.title }}</h2>

<p>我的第一篇文章</p>

<p>{{ page.date | date_to_string }}</p>

每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线"---"，标记开始和结束，里面每一行设置一种元数据.

"layout:default"，表示该文章的模板使用_layouts目录下的default.html文件；"title: 你好，世界"，表示该文章的标题是"你好，世界".

现在目录结构变成：

/blog
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2012-08-25-hello-world.html

第五步，创建首页

在根目录，创建一个index.html文件，填入以下内容

　　---
　　layout: default
　　title: 我的Blog
　　---

　　<h2>{{ page.title }}</h2>

　　<p>最新文章</p>

　　<ul>

　　　　{% for post in site.posts %}

　　　　　　<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

　　　　{% endfor %}

　　</ul>

现在目录结构变成这样，

/blog
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2012-08-25-hello-world.html
　　　　|--　index.html

第六步，发布内容

这个简单的blog，可以发布了，在github上创建仓库blog

　　$ git add .

　　$ git commit -m "first post"

　　$ git remote add origin https://github.com/username/blog.git

　　$ git push origin gh-pages

note: username换成你的用户名

打开生成的页面，http://username.github.com/blog/

这个时候，发现，很多年前，这样的网址是可以打开的，现在打不开了。现在github只能打开http://username.github.io

所以仓库做了下调整，

blog库下的用来看blog文章，

username.github.io库下的用来放首页，可浏览的URL, 及设置文件baseurl.

项目文件结构：我的目录结构丰富了些，你也可以做的更丰富更好看，红圈为主要内容

现在你可以使用建好的博客了，为了把页面做的更好看，可以加入CSS, IMAGE, JS等

可参考我的库来建博客，http://username.github.io

在github上搭建免费的博客的更多相关文章

  1. 在Github上搭建自己的博客(Windows平台)

    折腾了好久,终于在Github上搭建了自己的博客.这里面总结一下过程希望对大家能有所帮助. Github建博优缺点 和 csdn,新浪,网易相比,在Github上可以自己实现功能 和阿里云,VPS相比 ...

  2. GitHub上搭建私人hexo博客操作教程

    GitHub上搭建hexo博客 安装GitGit:主要用于上传博客页面到github和命令操作安装NodeNode.js:Hexo的运行环境安装HexoHexo:博客程序打开安装Git后的生成的右键菜 ...

  3. 在Github上搭建你的博客

    title: blog on github date: 2014-03-24 20:29:47 tags: [blog,github,hexo] --- **用Github写博文** 参考http:/ ...

  4. 使用GitHub+hexo搭建个人独立博客

    前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...

  5. github+hexo搭建自己的博客网站（六）进阶配置(搜索引擎收录，优化你的url)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...

  6. github+hexo搭建自己的博客网站（七）注意事项（避免read.me，CNAME文件的覆盖，手动改github page的域名）

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...

  7. Hexo + Github Pages搭建的个人博客

    这个不算是新手的搭建流程,如果你恰巧看见这篇文章,希望你已经安装好node.git等软件,因为第一步的环境搭建准备并没有详写,默认都会了.希望能解决你的问题. 步骤: 一. 搭建环境准备 二.安装he ...

  8. 使用Hexo + Github Pages搭建个人独立博客

    使用Hexo + Github Pages搭建个人独立博客 https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog ...

  9. 在Github和oschina上搭建自己的博客网站

    在Github上搭建 - 参考链接 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 GitHub + Jekyll 搭建并美化个人网站 用Jekyll搭建的Git ...

随机推荐

  1. 用PHP ping 一个 IP

    最近要做一个 测试IP列表 是否能连通的功能.大家都知道我们一般用 ping 命令就可以看到IP端口可不可以连通.那在程序里要怎么做呢? 我们在网上找到很多都是使用  exec("ping ...

  2. [干货来袭]C#7.0新特性(VS2017可用)

    前言 微软昨天发布了新的VS 2017 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下其实2016年12月就已经公布了的C#7 ...

  3. 3997: [TJOI2015]组合数学

    3997: [TJOI2015]组合数学 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 247  Solved: 174[Submit][Status ...

  4. 算法模板——sap网络最大流 1（非递归+邻接矩阵）

    实现功能:首行输入N,M,S,T,代表这张图N个点,M条边,源点为S,汇点为T:接下来T行输入个边的出发点.终点和权值:输出最大流 原理:sap网络流算法(详见百度百科,个人觉得这个模板已经不错了,虽 ...

  5. 深入理解java虚拟机之——JVM垃圾回收策略总结

    如何判断一个对象是否存活 引用计数算法:给对象中添加一个引用计数器,每当有引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器为0的对象就是不可能再被使用.  Java虚拟机里面没有 ...

  6. Javascript基础知识小测试（一）

    这里罗列了<你不知道的js>上卷的一些知识点以及小问题,如果你想巩固一下js那么就和我一起来看看吧. 如果你能不看书就回答上80%的问题说明你js的这一部分学得还不错,再接再厉. 作用域和 ...

  7. 安卓Android的内存管理原理解析

    Android采取了一种有别于Linux的进程管理策略,有别于Linux的在进程活动停止后就结束该进程,Android把这些进程都保留在内存中,直到系统需要更多内存为止.这些保留在内存中的进程通常情况 ...

  8. 两个 Long 类型为什么不能直接用==比较

    这要说到==和 equals 的区别了. 1. ==比较的是两个对象在内存中的地址值(栈中的内容). 2.equals 是 java.lang.Object 类的一个方法.equals 比较的是两个对 ...

  9. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  10. 关于OOCSS的一点思考

    关于面向对象,自己是很熟悉了,不能说代码实际开发效果有多好,但是这个概念确实经常见,那么到底什么是面向对象? 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物---百度 ...