1 新建一个repo,创建一个没有父节点的分支gh-pages(github规定,只有该分支中的页面,才会生成网页文件):   

mkdir jekyll_demo
cd jekyll_demo
git init
git checkout --orphan gh-pages

   然后在该分支下创建如下目录和文件:         

    

  _config.yml是jekyll的配置文件,我们在里面填入如下内容:  baseurl: /jekyll_demo 

   _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>

   _posts 目录,用于存放blog文章,可以在这里创建文章 2012-08-25-hello-world.html(文件名必须为"年-月-日-文章标题.后缀名"的格式,

   如果网页代码采用html格式,后缀名为html;如果采用markdown格式,后缀名为md),文章内容如下:

---
layout: default
title: 你好,世界
---
<h2>{{ page.title }}</h2>
<p>我的第一篇文章</p>
<p>{{ page.date | date_to_string }}</p> //每篇文章必须有一个yaml头部,用来设置一些元数据。
//"layout:default",表示该文章的模板使用_layouts目录下的default.html文件;
//"title: 你好,世界",表示该文章的标题是"你好,世界",如果不设置这个值,默认使用嵌入文件名的标题,即"hello world"

   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> //首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历
//{{site.baseurl}}就是_config.yml中设置的baseurl变量

  以上内容写好后,提交到本地库  git add *               git commit -m "first post"


2 在github上新建一个同名的repo,然后在本地仓库执行推送命令(username改为自己的用户名):

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

     $ git push origin gh-pages

大功告成,等待一会,访问http://username.github.io/jekyll_demo/ 就可以看到第一篇文章了。

       



使用Github搭建个人博客网站的更多相关文章

  1. Hexo+Github/Coding免费搭建个人博客网站

    体验更优排版请移步原文:http://blog.kwin.wang/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把 ...

  2. GitHub Pages + Hexo搭建个人博客网站-github风格-采坑记录

    目录 1.本机安装nodejs 2.github上创建仓库 3.安装hexo 4.hexo主题 5.配置主题 6.添加文章 7.使用分类和标签 8.增加文章目录 9.推送github 使用github ...

  3. 《Hexo+github搭建个人博客》

    <Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...

  4. 使用Node.js+Hexo+Github搭建个人博客(续)

    一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...

  5. 如何用hexo+github搭建个人博客

    搭建环境 1.安装 Node.js: https://nodejs.org/en/ windows下点击链接,下载安装即可;Linux下更加简单,在终端下输入sudo apt-get install ...

  6. jekyll+github搭建个人博客总结

    jekyll+github搭建个人博客 经过一天多的折腾,终于算是搭建好了自己的个人博客,看到有些社区评论说:在windows下用jekyll搭建静态博客,简直就自讨苦吃,但是都到一半了,有什么办法呢 ...

  7. Linux_基于Docker快速搭建个人博客网站

    时间:2017年04月28日星期五 说明:基于docker技术,使用jpress开源框架搭建个人博客网站.特别感谢jpress开源项目.系统版本:CentOS 7.2-64bit. 步骤一:准备Doc ...

  8. Ubuntu+Hexo+Github搭建个人博客

    Ubuntu+Hexo+Github搭建个人博客 目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. ...

  9. Windows上使用jekyll+github搭建免费博客

    jekyll+github搭建个人博客 (一)下载Ruby (二)安装jekyll (三)开启jekyll服务器 (四)使用github展示博客 一.下载Ruby Ruby,一种简单快捷的面向对象(面 ...

随机推荐

  1. Chapter 16_3 多重继承

    在Lua中进行面向对象编程时有几种方法,上一小结介绍了一种使用__index元方法的做法. 下面要介绍另一种方法,可以在Lua中实现多继承. 关键一点,在于用函数作为__index元字段. 多重继承意 ...

  2. ubuntu12.04安装openjdk-7

    编译androidL需要使用openjdk-7:使用sudo apt-get install openjdk-7-jdk会出现错误信息. 网上差了一些方法,可以通过更新软件源的方法解决,这里使用了 # ...

  3. 可写的计算监控(Writable computed observables)

    新手可忽略此小节,可写依赖监控属性真的是太advanced了,而且大部分情况下都用不到. 一般情况下,计算监控的值是通过其他监控属性的值计算出来的,因此它是只读的.这个看似很奇怪,我们有什么办法可以让 ...

  4. 请教下关于CKEditor富文本编辑框设置字体颜色的问题

    CKEDITOR.editorConfig = function( config ){ config.plugins = 'about,a11yhelp,basicstyles,bidi,blockq ...

  5. VS2013程序打包部署详细图解

      目录(?)[+]   新建项目 FILE –> New –> Project,如下图所示:  注意:如果 InstallShield Limited Edition Project 显 ...

  6. Strusts2--课程笔记5

      数据验证: 输入验证分为客户端验证与服务器端验证.客户端验证主要通过JavaScript脚本进行,而服务器端验证主要是通过Java代码进行验证. 分为以下四种情况: (1)手工编写代码,对所有Ac ...

  7. HDU 5898 odd-even number(2016沈阳网络选拔赛 数位DP)

    定义DP[pos][pre][odd][even],pos代表当前数位,pre代表前一位的数值,odd代表到前一位连续的奇数个数,even代表到前一位连续偶数个数. odd和even肯定至少有一个为0 ...

  8. 学习笔记——解释器模式Interpreter

    解释器模式,其实就是编译原理中的语法解释器,如果用在项目中,可以用于实现动态脚本的解析,也就是说项目可以支持用户脚本扩展. 但实际上,这种运行时解释,效率很慢,如果不是很需要的话,不建议使用. 一种简 ...

  9. VBS操作JS网页元素实例

    '=========================================================================='' VBScript Source File - ...

  10. VBS获取Ini配置文件一个节点下的所有字段的值

    ''* 功能:使用VBS读取ini文件中指定节点下的所有值'* 输入参数:inipath :ini文件的地址'*           initypes :ini文件中包含在"["和 ...