github上利用jekyll搭建自己的blog的操作顺序？

邓生1984

我最近在考虑搭建一个自己的技术博客用来总结自己的项目或成果和学习新知识。在知乎上看到很多人都提到了github可以托管静态网站，可以在上面利用github pages制作自己的blog，当中很多人都提到了jekyll，我也尝试着去学习其他人的模板，但是一直摸不着头脑从何下手，了解jekyll的时候，发现需要安装ruby和ruby gem，又发现需要了解markdown语法blabla，现在主要有几方面问题:


【原问题】（仍然求各种美丽的解答~）

• 从我已经在github pages上建立了一个预设模板（如下图），那么接下来我要从什么地方开始下手去学习？需要学习什么内容？（顺序是怎么样的呢？）我看有些人说自己搭建自己的博客短的30分钟，久的有2个月的，到底是需要怎么样的基础？
  
  
  
• 关于jekyll和markdown的语法规则是否需要完全掌握？不是很明白jekyll到底是怎么个功能，和平时直接用html+css+js的区别在哪里呢？
  
• 关于github，我想知道如果我看到别人的博客很棒，想用其作为模板，我要怎么去clone并修改然后push（虽然经常听到大家说是这个步骤，但是不太懂怎么操作。。），直接download zip 和先fork再down load zip到底有什么区别呢？最后的push是怎么操作的？我没找到push这个键啊。。
  
• 我把别人的download zip下来后直接打开里面的index.html就乱七八糟的了是因为我没安装jekyll么还是因为什么？
  
• 那个windows for github到底有什么用啊，我就只看到了history。。能在这个软件上修改么？
  
  
  
• 大家平时修改博客的时候是在哪里进行编辑呢？直接在网上还是在本地呢？对于博客博文的增加是直接在博客上增加（即自己看到的界面和别人看到的不一样，自己有一个“写博文”的按钮之类的），还是直接用代码编写的呢？
  

========another问题，求解答！！！（部分解决，另一个问题请往下看）=========
我从别人的仓库上download下来了别人的blog模板，我也已经用jekyll serve打开了jekyll服务，但是别人模板里的index.html打开还是和原来一样，如下图，我要怎么操作才能看到实际的页面呢？？

---------部分解决+新问题-（已解决：直接cd到对应的文件夹然后在启用jekyll serve命令，然后直接在浏览器中输入: localhost:4000 即可看到相应效果。）----------
执行jekyll serve后生成一个_site文件夹，然后在里面就能看到完整的代码，但是问题是和实际效果为何还是不一样？？。。。

(完整代码)

• 编译后的index.html对应浏览器里面的效果图：
  

• 实际效果图：
  

=============新问题！！！（已解决，方法在问题之后）================
在网上有看到jekyll的安装方法是这样说的：
【
目前，网上有许多Jekyll的安装方法，大都相似，为了方便更多准备学习Jekyll的人，特翻译如下：
共分为以下几个重要步骤

• 安装 Ruby
  
• 安装 DevKit
  
• 安装 Jekyll
  
• 安装 Pygments
  
  
  
  • 安装 Python
    
  • 安装 ‘Easy Install’
    
  • 安装 Pygments
    
  
  
• 启动 Jekyll
  
• 故障诊断
  

】
我在前四步都OK，到了第五步启动 Jekyll的时候就不行了，
原文是这样说的：

我执行第一句话就出现了如下图的问题，（这其实不是第一次遇到了，我换了好多个版本的ruby,rubygem,python,devkit...都遇到过这个问题！）

在教程的原文下面有列举一些常见问题和解答，但是我没找到我遇到的这个问题只按照关键字“could not find”找到了一个类似的解答，不知道是否有帮助？

-------------------------------------华丽地解决------呼呼----------------------------------------

【解决上述问题方法：】去到Node.js上下载一个node.js然后安装即解决该问题！

========================================

我脑子好乱啊。。请各位知情的知友们给我理清一下思路！多谢！希望自己的blog搭建好之后也能和大家一样分享自己的blog和自己的项目和学习成果。

junteng918

我之前谢了一个完整的教程，希望对你有所帮助：
在github pages网站下用jekyll制作博客教程在我动手用jekyll部署我的博客之前，一直使用godaddy上面的wordpress主页来部署我的博客kresnik.co。WordPress当然有很多的优点，在我看来我用WordPress主要是为了

• 方便清晰的文件结构
  
• 可以随意选用的各种模板和插件
  
• 相对便宜的部署价格
  

因为这些优点，所以我想我还会在WordPress官网上继续保留我的免费博客。
既然这样，看官想必想问为什么要换成jekyll来重新部署博客？我简单的总结了一下：

• 流行又简洁的MarkDown写作语法
  
• 轻量级的网站结构，不再有动态网站的沉重
  
• 方便的和github pages结合，不仅免费，而且方便
  

所以对比与WordPress的沉重，jekyll让你回归到创作本身，当然如果你喜欢折腾，jekyll也绝对不会让你失望。推荐下面几个站点亮一下。

• http://foto.lhzhang.com/
  
• Rasmus Andersson
  

安装流程

• 要用github pages，首先要在github中建立一个基于你的用户名的repository: 比如说我，就要建立名为kresnikwang.github.io的repo。在以前的github版本中还需要在后台开启pages的功能，现在系统检测到这样的repo名称之后，会在setting中自动开启GitHub Pages的功能，如下图： 这样之后你就可以把这个repo克隆到本地随意进行修改了，在这个里面上传的网页就是你的网站的内容了，可以上传一个index.html试一试，这就是你的网站主页了。 关于GiuHub的使用，可以看几个比较好的入门教程：GitHub
  
• 之后我们就要在本地部署jekyll，jekyll的原理很简单。这是一个已经合成好的静态html网站结构，你用这个结构在username,http://github.io文件夹里面粘帖好所有文件。再把更新完的本地repo推送到GitHub的master branch里面，你的网站就更新建设完毕了。 首先你需要ruby来使用本地jekyll。Mac和Linux可以用Terminal配合yum或者brew这样的包管理器很方便的安装ruby。Windows下更是方便，可以直接中集成好的Ruby installer来进行安装，文章里的就是传送门。
  安装完ruby，之后就是要安装RubyGems，gem是一个ruby的包管理系统，可以用gem很方便的在本地安装ruby应用。
  安装方法
  
  //在RubyGems官网上下载压缩包，解压到你的本地任意位置//在Terminal中cd yourpath to RubyGems //你解压的位置ruby setup.rb
  
• 有了gem之后安装jekyll就很容易了，其实用过nodejs和npm的同学应该很熟悉这样的包安装，真是这个世界手残脑残们的救星。。。。。（楼主不自觉的摸了摸自己快残了的手） 安装jekyll，有了gem，直接在Terminal里面输入以下代码：
  
  $ gem install jekyll
  
• 好了，现在你的电脑已经准备完毕了。如果你是想自己捣鼓，可以根据这样的目录结构在你的http://username.github.io文件夹下建立以下目录结构：
  ├── _config.yml
  ├── _drafts
  
  |   ├── begin-with-the-crazy-ideas.textile|   └── on-simplicity-in-technology.markdown
  ├── _includes
  
  |   ├── footer.html|   └── header.html
  ├── _layouts
  
  |   ├── default.html|   └── post.html
  ├── _posts
  
  |   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile|   └── 2009-04-26-barcamp-boston-4-roundup.textile
  ├── _site
  └── index.html
  你可以一个个依次建立起来，然后在自己编写一个你想要的博客。
  
• 如果你只是个普通用户，只是想要一个模板然后开始写自己的博客。那就很容易了，有几个可以简单开始的模板。
  
  
  
  • poole/poole · GitHub极简风格的模板
    
  • Jekyll Themes jekyll的模板网站，可以找到各式各样你喜欢的模板。
    
  
  
• 下载完了模板，可以吧里面的内容解压到你自己的网站目录底下。这时候你可以测试一下：
  
  $ cd you website path //cd到你的网站目录下$ jekyll serve//一个开发服务器将会运行在 http://localhost:4000///你就能在本地服务器看到你用模板搭建的网站了
  
• 这时候可以看一下jekyll的设置，让你把模板变成你自己个性化的内容。在网站根目录下面找到_config.yml,这里会有几个比较关键的设置： 里面的permalink 就是你博客文章的目录结构，可以用pretty来简单的设置成日期+文章标题.html，也可以用自己喜欢的结构来设置。 记得把encoding 设置成utf-8，这样有利于中英文双语的写作和阅读。
  
• 到这里你就可以开始写博客了，所有的文章直接放在_posts文件夹下面，格式就是我们之前提到的markdown文件，默认的格式是.md和.markdown文件。每篇文章的开始处需要使用yml格式来写明这篇文章的简单介绍，格式如下：
  
      ---    author: kresnikwang    comments: true    date: 2015-04-28 17:42:32+00:00    layout: post    title: PHP, Angular JS Development|My Export Quote|农产品出口工具开发    categories:    - Works    - Tech    tags:    - bootstrap    - javascript    - php    - AngularJS    ---
  layout就是post，让jekyll知道你这是一篇post，很直观。需要注意的是里面的date，必须按照yml的语法来写，否则就会出现编译错误。可以只用YYYY-MM-DD来显示日期，也可以像我一样在后面加上 HH:MM:SS+00:00 来表示更具体的时间。
  
• 到此为止可以开始尽情的写博客了，用GitHub软件同步到你的repository里面，网站上面就可以进行正常的显示了。如果说要添加一下有用的extra功能的话，评论和相关文章这两个功能比较多人会关注。 评论我们可以用Disqus国内应该也有类似的网站，到Disqus注册一个账号，选择添加评论区域到自己的网页，你将会的得到类似的代码：
  
  <!-- Add Disqus comments. --><div id="disqus_thread"></div><script type="text/javascript">  /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */  var disqus_shortname = '<USERNAME>'; // required: replace example with your forum shortname  var disqus_identifier = "/works/tech/2016/06/07/%E5%9C%A8github%20pages%E7%BD%91%E7%AB%99%E4%B8%8B%E7%94%A8jekyll%E5%88%B6%E4%BD%9C%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B.html";  /* * * DON'T EDIT BELOW THIS LINE * * */  (function() {    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);      })();</script><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript><a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
  根据不同的模板，把代码添加到_post/post.html或者_include/post.html里你的文章底下，那当这篇文章被访问时，下方就会有评论区了
  
• 相关文章的功能也比较好做，jekyll本来就集成了site.related_posts的功能，自动会寻找相关内容的文章，在你的post代码下面融入以下代码：
  
  <aside class="related">  <h2>Related Posts</h2>  <ul class="related-posts">    <li>      <h3>        <a href="http://kresnikwang.github.io///journey/2015/06/05/kresnik.co-%E5%8D%9A%E5%AE%A2%E6%90%AC%E5%AE%B6%E5%91%8A%E7%A4%BA.html">          kresnik.co博客搬家告示          <small><time datetime="2015-06-05T00:00:00+00:00">05 Jun 2015</time></small>        </a>      </h3>    </li>    <li>      <h3>        <a href="http://kresnikwang.github.io///tech/2015/06/02/javascript-include-html-page-by-jquery.html">          Javascript Include Html Page By Jquery          <small><time datetime="2015-06-02T18:45:42+00:00">02 Jun 2015</time></small>        </a>      </h3>    </li>    <li>      <h3>        <a href="http://kresnikwang.github.io///tech/2015/05/31/Github-use-http-instead-of-git.html">          Github设置，强制使用"https://" 来代替 "git://"          <small><time datetime="2015-05-31T05:03:36+00:00">31 May 2015</time></small>        </a>      </h3>    </li>  </ul></aside>
  你每篇文章下面就会有三个相关文章的链接了。
  
• 这篇教程就到这里，有机会我想再写写liquid语法制作jekyll模板的内容和从wordpress导入文章到jekyll来的方法。喜欢能有些用处，感谢。
  

shechaowin

题主截图是我的博客！
受宠若惊。
---
说说我的想法吧。

• 使用GitHub之前有必要学习一下git，廖雪峰的Git教程就很好。使用github pages就去看它的官方文档，在看看jekyll的官方文档。使用jekyll初始化一个博客工程后，就算是搭建好博客了。说30分钟搭建好指的是安装jekyll环境，到初始化成功，在本地4000端口上可以运行。初始的博客非常简陋，需要自己重新设计界面，添加交互等。这些后续的工作可能会持续1-2个月，最后使博客稳定下来。你要有HTML，css，JavaScript基础。在去了解一下jekyll的liquid语法。
  
• markdown语法2个小时就掌握了。jekyll是个博客引擎。
  
• 建议使用git命令行，github客户端就是坑。fork的目的是为了给原作者提供代码贡献，为了pull request的。再说一遍，不要使用github客户端，我被坑过不知一次。
  
• 是因为你没有安装jekyll环境，github官方是提供这个服务环境的，所以通过github可以正常浏览，本地不行。安装好环境后，通过4000端口就可以浏览了。
  
• 不要使用github客户端。
  
• 在本地编辑，直接修改post文件夹下的Markdown文件，具体可以看jekyll官网的说明。
  

========

• 启动好jekyll后，在localhost:4000上看，就应该是正常的，不要直接打开html文件。
  
• 编译后的效果问题，你误删了css文件？或者不小心把head中的<link>标签修改了？总之是css样式不对。
  

========
还有最关键的一点，搭建好博客后，如果使用的别人的模板，记着修改掉这些东西：

• 统计代码。如百度统计或者google统计，这样避免麻烦原博主屏蔽一些别的来访id。
  
• 评论代码。找到别人博客的评论代码，如disqus代码，或者多说评论的代码，否则你的评论会在别人的评论后台提示，自己却看不到提示。
  

========
祝顺利！别着急，不会乱的，去看jekyll英文的官方文档吧，原汁原味的最适合你。中文的抄来抄去，翻译的又很烂，真的不如静下来去看看官方的英文文档。

毁蛊傩

• 购买、绑定独立域名
  
• 配置和使用Github
  
• jekyll的安装
  
• 样式、分类、标签
  
• 具体可以参考这篇文章利用github-pages建立个人博客
  
• 我的博客源码：GitHub - EZLippi/EZLippi.github.io
  
• 网址：首页：Home - Lippi-浮生志
  

毁蛊傩

谢邀，  
@Blueve
@邓青宇
对GitHub, Jekyll, Markdown 讲的很清楚了。
我最早接触Jekyll 还是看了 阮一峰的这篇文章。
搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门
1. GitHub Pages
GitHub Pages

What are GitHub Pages?

GitHub Pages are public webpages hosted and published through our site. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Github Pages可以看成是GitHub免费托管的wiki site，主要是为GitHub repository服务的，让原来乱七八糟的wiki有一个统一的格式，用的MarkDown [
Markdown Basics](越来越多的网站，client都转到用 MD语法了，国内的简书，国外的medium)。之所以选择MarkDown，也是为了我们广大程序员，喜好VIM的编辑风格(像黑客一样写作)，这样可以通过写简单的plain text，就能在HTML上面解释成漂亮的网页。
依着这个思路，我们当然可以将原本写wiki的文字，变成纪录issue，REAMDE.md，甚至是后来越来越多人，干脆扔掉庞大的Wordpress，转到GitHub Pages上写blog，因为对我们来说，写blog，其实无非就是记录一些技术学习，项目开发中的经验和技术，这类的blog和knowledge wiki其实无差别。
2. Jekyll static blogs
我们通过guide简单配置的本地server，
~ $ gem install jekyll~ $ jekyll new my-awesome-site~ $ cd my-awesome-site~/my-awesome-site $ jekyll serve# => Now browse to http://localhost:4000

已经是一套GitHub的Pages系统了，只是文件在本地，只需要简单编辑，写blog只要利用MarkDown语法，OK之后，在通过GitHub，Push到GitHub Pages Server上面就可以了。

Jekyll uses the Liquid templating language to process templates. All of the standard Liquid tags and filters are supported. Jekyll even adds a few handy filters and tags of its own to make common tasks easier.

Liquid 是整个Jekyll的核心，所以也完全可以利用其他blog系统，只要是符合Liquid template的，GitHub那段就可以解析出来，从这个意义上讲，Jekyll只是一种official的选择。

3. Jekyll --> Hexo
用Jekyll相对普通人来说已经足够，但是如果需要强大的模版，一些可扩展的东西，就会比较麻烦，需要对前端有一定的技术背景。
所以出现了Hexo  
Hexo

What is Hexo?Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

Hexo ＝ Node.js + MarkDown
的静态blog系统，完全match GitHub Pages，

强大之处在于很多plugins，themes。
How To Guide:
Documentation

4. Dropplets
如果有自己VPS，推荐这个blog系统，虽然没有Hexo那么火，但是个人感觉十分轻量，简洁。
Welcome to an Easier Way to BlogCirca75/dropplets · GitHub

也是based MarkDown，亮点是 databaseless，用php写的。

希望有所帮助，如果在搭建和使用中有什么问题，可以告诉我，这些工具都比较简单，应该还好。
每个工具都能解决特定的问题，希望能让我们花更少精力在选择工具上面，把更多时间花在总结技术上面~

写完了搜索下，发现知乎上面已经满满的都是这方面的问题了，
Github Pages - 话题精华如何在 GitHub 上写博客？ - Github Pages

挽风sway

jekyll-now
不谢