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. CSS,注意点!!!!!!!

    css 一.整体布局 1.创建一个html标签 2.创建三个div标签(分别是网页的头部,中间,和底部三部分) 3.一般都用class选择器 4.用css给body标签加个 margin:0(用于消除 ...

  2. grpc-gateway:grpc对外提供http服务的解决方案

    我所在公司的项目是采用基于Restful的微服务架构,随着微服务之间的沟通越来越频繁,就希望可以做成用rpc来做内部的通讯,对外依然用Restful.于是就想到了google的grpc. 使用grpc ...

  3. Swift应用案例 1.无限轮播

      从今天开始,我学习的重点开始转向Swift,并且会分享一些自己学习的心得体会,今天给大家带来的的是无限轮播.广告页的无限轮播是非常常见的一个功能,大多数APP都有,大多数程序员也都实现过,今天我们 ...

  4. JS入门(一)

    在学js之前,我们应该先清楚js是什么,js全称JavaScript.是一门基于对象和事件的,有安全性的脚本语言.所谓脚本语言,就是一行一行执行的,就像剧本一样,一句句的往下读.而对象和事件,则是js ...

  5. [HDU1282]回文数猜想

    Problem Description 一 个正整数,如果从左向右读(称之为正序数)和从右向左读(称之为倒序数)是一样的,这样的数就叫回文数.任取一个正整数,如果不是回文数,将该数与他的倒 序数相加, ...

  6. redux:applyMiddleware源码解读

    前言: 笔者之前也有一篇关于applyMiddleware的总结.是applyMiddleware的浅析. 现在阅读了一下redux的源码.下面说说我的理解. 概要源码: step 1:  apply ...

  7. .NET的HTTP辅助类:RestSharp

    示例: var client = new RestClient("http://example.com");// client.Authenticator = new HttpBa ...

  8. Eclipse 中svn 分支,主干 合并与同步:

    Eclipse 中svn的合并与同步: 1.  从主干拉取到分支: 然后一直下一步,到完成就OK了. 2.  从分支代码合并到主干: 2.1.先将本地需要提交更新的代码提交更新到svn分支去 2.2. ...

  9. 关于mui选择器的使用

    使用mui引入选择器的picker.js.poppicker.js.及他们的css文件之后引入代码与点击确定之后的状态: document.querySelector('#osex').addEven ...

  10. Entity Framework — ( Database First )

    什么是Entity Framework Entity Framework是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.将数据存储从域对象自动映射到关系 ...