导航:首页 > IDC知识 > vps搭建jekyll博客

vps搭建jekyll博客

发布时间:2021-03-03 20:54:24

1、关于github搭建个人博客的问题

首先,看下你修改后的模板上传,提交了吗
其次,看下样式的路径是否正确
然后,看专下是否引入模板的方式不对属
最后,通过f 12g 看控制台信息,是样式找不到,还是网络问题,应该是样式找不到,那就要分析为什么没找到,是不是使用模板方式不对

2、用Jekyll 和 Octopress 搭建博客,哪个更合适

1. 假设你熟悉 Git,懂得一点 ruby,至少知道怎么安装。那么可以选择专 Jekyll(Octopress)来做 Blog。
好处是:属Hosted 在 Github,省去服务器,也不怕流量冲跨 Github 的服务器;
缺点是:

内容别人可以随时轻易 git clone;
写 blog 用纯 markdown 有时候很多麻烦(比如排版,在预览的时候是好的,在 Github 不一定可以);
没有 GUI 界面,markdown 预览也总要多余的操作(比如编辑器插件,装像 iA 一样的软件);
需要动态内容,而 js 做不到这些,比如生成文件等,这个就别用了
2. 假设你不熟悉 Git,别用
3. 假设你有服务器,而你不仅仅是写写静态内容。用 Wordpress 等博客程序,从体验,功能还是任何理由,都比 Jekyll 强。

3、如何使用ruby在github上搭建jekyll博客

1. 打开terminal,任意路径执行: sudo gem install jekyll
2. 在github上创建项目.github.io
3. 拉取项目到本地
4. 在terminal中,任意路径执行: jekyll new username.github.io
5. 将生成的文件复制到刚刚拉取的github项目目录下。
6. 同步代码,上传~ 访问username.github.io,即可看到下图,博客搭建完成。
7. 本地运行,切换到项目目录下,执行:jekyll serve
8. 在浏览器中执行:,即可看到和username.github.io相同的页面内容。
9. 想要停止服务,在terminal中关闭其进程即可。届时terminal中会显示 “ [1]+ Stopped jekyll serve ”
10. 再次启动时很可能会出现如下错误:
[2016-04-22 22:51:20] WARN TCPServer Error: Address already in use - bind(2) jekyll 3.1.3 | Error: Address already in use - bind(2)
产生原因:
关闭时使用了错误的命令,不是command+c,而是control+c。
解决方法:
a. 使用命令:ps aux | grep jekyll 查找到进程号
b. 使用命令:kill -9 28185 杀死进程(其中28185是进程号)
11. 打开 _config.yml 文件,即可修改文件展示的很多内容。

4、用 Jekyll 和 Octopress 搭建博客,哪个更合适?

Markdown的预览可以抄用markdownPad2。至于Win平台上Jekyll的中文,_site为空或更本不生成,修改convertible.rb文件里面self.content = File.read(File.join(base, name), :encoding => "utf-8")就可以。

5、到底如何使用jekyll发布博客

新建New Repository

1
用注册好的账号登陆github主页,点击右上角的“+”符号旁边的三角标展开二级菜单,选择“new repository”,如下图所示:

2
然后我们开始为我们新建的repository命名,命名需要遵循规则:username/username.github.com,如下图所示:

3
创建完成之后,复制当前资源的git地址,如下图所示:

END
工程内容托管

1
在本地启动git-bash,通过"git clone(git地址)",将github上的工程复制到本地文件目录下,如下图所示:

2
查看Git根目录,可以看到多出了一个文件夹,其名称与git地址所对应的github上的工程一致,如下图所示:

3
将jekyll工程下的所有文件都复制到此目录下,如下图所示:

4
通过指令“git add .”添加github上没有的文件,如下图所示:

5
然后我们需要把这些修改先提交到本地的git中,这是为后面将本地git修改提交到github上做准备,提交本地的指令是“git commit -a -m "修改说明",如下图所示:

6
第一次提交本地git时,提示需要设置一些个人github账户上的信息,设置完毕后再次提交,如下图所示:

7
本地提交完成之后,当然是把本地修改提交到github上啦,这一步骤通过指令“git push origin master”,其中最后一个参数标志的就是提交到的指定版本号,与github上的Branch对应,如下图所示:

8
提交的时候会弹出Git的登陆框,直接输入github的账号密码完成验证即可完成提交操作,如下图所示:

9
回到浏览器上刷新之前新建的repository,可以看到jekyll工程文件已经顺利提交到github上了,如下图所示:

10
点击左上角的“commit”也可查看当前github的更新提交日志,如下图所示:

11
回到github中的工程界面,点击右上角的“Setting”选项,在GitHub Pages中可以看到个人博客的访问地址,如下图所示:

12
至此我们就完成了将个人博客部署到github上的所有操作了,访问上述地址,查看效果,如下图所示:

END
修改和更新

上述的操作完成之后,我们只是完成了github上个人博客的部署工作,后续我们需要不断地添加修改博客内容,这里就需要用到git的更新操作。
这里我们用修改_config.yml文件为例,假如我们屏蔽掉twitter的属性,如下图所示:

我们在git-bash中输入指令“git status”查询修改的文件列表,如下图所示:

按照提示的指令操作,使用“git add .”添加修改,再使用“git commit -a -m "修改说明"”把修改提交到本地git,再用指令“git push origin master”提交修改到github,如下图所示:

6、jekyll和vps可以一起用吗

可以
1. 首先安装ruby环境.
2. 默认会安装ruby gems包管理工具.(如果官方镜像不给力请尝试更换ruby-china的镜像源)
3. 通过gem包安装jekyll,命令如:gem install jekyll.
4. 上述方式仅安装了jekyll,如果你使用Gemfile来管理依赖那么你还需要安装bundler.然后使用命令bundle install / jekyll server即可运行网站. (注意端口是否开放)
5. 这种情况下,必然增加许多繁琐的操作如更新代码(可以写个插件自动拉取最新版本代码),重新编译,代码管理,web安全等问题.
ps:自己搭建也有个好处,github禁用了jekyll插件,放到自己vps上那就可以为所欲为了.
如果还有其他问题欢迎追问,如果有所帮助敬请采纳.

7、github 怎么搭建博客

在github pages网站下用jekyll制作博客教程

在我动手用jekyll部署我的博客之前,一直使用godaddy上面的wordpress主页来部署我的博客kresnik.co。WordPress当然有很多的优点,在我看来我用WordPress主要是为了
方便清晰的文件结构
可以随意选用的各种模板和插件
相对便宜的部署价格
因为这些优点,所以我想我还会在WordPress官网上继续保留我的免费博客。
既然这样,看官想必想问为什么要换成jekyll来重新部署博客?我简单的总结了一下:
流行又简洁的MarkDown写作语法
轻量级的网站结构,不再有动态网站的沉重
方便的和github pages结合,不仅免费,而且方便
所以对比与WordPress的沉重,jekyll让你回归到创作本身,当然如果你喜欢折腾,jekyll也绝对不会让你失望。推荐下面几个站点亮一下。
rusty shutter
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-rounp.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来的方法。喜欢能有些用处,感谢。

附上出处链接:https://www.hu.com/question/23934523

8、如何在github上搭建个人博客

一、为什么在GitHub上托管个人博客

为什么在GitHub上托管博客,这个问题可以分两步来问:

首先,为什么 可以 在GitHub上托管博客?

GitHub是一个基于git的版本托管服务网站,上面聚集着几乎全世界的程序大牛,还有着大量的牛逼开源项目。而项目一旦成长壮大,一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时,GitHub Pages 就应运而生,它允许用户用更具描述性的自定义页面代替源码列表。同时,用户也可以利用其作为个人或组织主页,将 静态 网页托管其上。

那么,在有着WordPress等等大量的开源博客系统的情况下,为什么选择在GitHub上托管博客呢?

对程序猿来说无比亲切,光是看起来感觉就很牛逼的"Git驱动式博客开发与发布流程"。

超级容易,5分钟包学包会的发布方式。

静态页面,建立简单,几乎没有安全性隐患,当然这也是缺点之一,静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客,也不太会有这样的需求

免费而可靠

更加详细的内容可以参见这里 todo: Jekyll + GitHub Pages 的优点与缺点

话不多说,现在就来试试看。

<p id="002"></p>

二、10分钟快速搭建一个博客原型

首先确认:

拥有一个GitHub账号

已经安装 Git ,(在Windows下,个人推荐直接安装 GitExtensions ,有中文界面,并且集成了git + putty + kDiff ,比较省心一点啦)

1.建立一个项目

先在GitHub创建一个项目,名字随意,尽量全部小写字母,避免随后会碰到的URL冲突问题

本地运行Git,随意选个目录,将刚才创建的项目clone下来
<!-- lang: bash -->
cd /d/
git clone https://github.com/narcotics726/blogdemo.git
cd blogdemo

<br/>
<br/>

2.建立配置文件_config.yml

注意:之后建立的所有文档务必使用UTF-8 无 BOM 的编码保存

在项目的根目录下新建文件 _config.yml ,填写 baseurl: /blogdemo , blogdemo是你的项目名称,这一行内容规定了整个网站的根路径,稍后会详细解释这样做的意义。
<br/>
<br/>

3.建立主页

在根目录下新建文件 index.html , 内容像这样:
<!-- lang: html -->

---
title: Hello, My Blog
---

{{ page.title }}

先不用急着奇怪为什么一个html文件会出现"{}"这样的标签,这里使用的是 Liquid 模板语言 ,{{ page.title }} 表示“本页面的标题”,更详细的介绍我们以后再讲,不妨这样理解:
<!-- lang: python -->

#--- begin of page's head
title = "Hello, My Blog"
#--- end of page's head

print(page.title)

OK,那么博客主页设计完毕!(别吵...我答应过你要10分钟内搭建完成的...先弄个毛胚房意思意思,美化啊功能啊什么的晚点再说)
<br/>
<br/>

4.发布到GitHub

回到git bash, 检查一下 git status ,确认 _config.yml 与 index.html 无误后 add,commit,保持使用Git的良好习惯,记得添加提交描述

然后推送到GitHub,这里注意,因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages 下的内容进行自动生成操作, 所以本地的 master 分支应推送到远端的 gh-pages 分支
<!-- lang: bash -->

git push origin master:gh-pages

稍微等待一下,最多10分钟(通常不用那么久啦),访问 yourname.github.com/blogdemo
,(其中 yourname
是你的GitHub帐户名,blogdemo则是你的项目名)就会看见你的博客主页(确实很丑...而且完全不像一个博客的样子,不过别急,慢慢来比较
快~)

另外,如果不幸发现你的中文页面出现了乱码的情况,别着急,还是该死的UTF-8问题,后面我们会一劳永逸的解决他的,暂时先手动调整一下浏览器的编码。

<br/>
<br/>

5.在_posts内撰写文章,并在首页加入文章列表

在这段时间里,我们继续为你的博客添砖加瓦,让他拥有最基本的文章阅读功能,另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱,如果之前推送的内容有误的话,GitHub将以邮件形式提醒你生成失败。

回到项目根目录, mkdir _posts 新建一个目录,看名字也知道啦,这里存放你所有的文章。

进入_posts目录,新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle 这样。比如 2013-03-23-my_first_article.md,尽量避免空格或者其他乱七八糟的字符,这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml 中的 permalink 属性而改变,默认值为 date ,也就是我们刚刚创建的文件的样子,具体的规则可以看这里,后面我们也会讲到。

如果你发现了我刚才创建的文件后缀名是 .md ,熟悉GitHub或者StackOverFlow的朋友应该知道Markdown 格式,推荐使用GitHub托管博客的原因之一也正是如此,我们可以在大部分时候避开恼人的HTML,转而使用更加直观的Markdown语法。如果不熟悉也没关系,可以参见这份Markdown 语法说明,应该说是相当易学,并且在熟悉之后非常易用的。

回到主题,打开刚才创建的文件,输入如下内容:
<!-- lang: html -->

---
title: 我的第一篇文章
---

# {{ page.title }}

## 目录
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)

----------------------------------

## 第一部分 <p id="partI"></p>
这里是第一部分的内容

----------------------------------

## 第二部分 <p id="partII"></p>
这里是第二部分的内容

----------------------------------

## 第三部分 <p id="partIII"></p>
这里是第三部分的内容

{{ page.date|date_to_string }}

这段内容中使用了最常用的几种Markdown语法,比如使用 # ,## 表示 HTML 中的 <h1></h1> , <h2></h2>。使用[text](link)创建超链接,使用 连续多个 - 创建水平线(注意:不包括最上端包围title所使用的横线,那里表示一个页面的“头属性”),等等。更多详细的语法可以在之前提到的页面查询,这里不再赘述,总之,这是一种更加贴近真实写作的语法,推荐大家尝试。

啊对了,最后面的那个 {{ page.date|date_to_string }} 是指显示本页的日期属性,并且转换为可读的字符串形式。同样也是Liquid语法。

OK,那么第一篇文章也写好了,再把最新的repo推送到github,稍等片刻,就可以...等下,忘记给文章加上入口的链接了。

Sorry啦,重新打开我们的 index.html 文件,添加内容,变成下面这样:
<!-- lang: html -->

---
title: My Blog
---

{{ page.title }}

{% for post in site.posts %}

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

{% endfor %}

唔...都是Liquid的内容,简单解释一下,Liquid标记最主要分为两种,一种是直接输出变量内容,像这样:

{{ page.title }}

另一种则是逻辑命令形式的,像这样:

{% for x in y %} ... {% endfor %}

而刚才写进主页的内容,就是遍历所有post文件,然后逐一显示在页面上,这里需要注意的一点就是在创建文章的超链接时,除了 post.url 之外,也要注意在前面加上site.url
,原因前面也有提到过,我们正在创建的是 Project Pages
类型的网站,其最终生成的网址根目录是:username.github.com/projectname,而 post.url
生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。

现在检查一下更改的所有内容,确认不要犯下愚蠢的错误,比如把 "." 打成 "。"或者单词拼错之类的,提交并推送!

当当!如果一切顺利,就能看到你的首页外加文章列表闪亮登场。

<br/>
<br/>

6.增加模板套装_layouts

文章进行到这里,或许开头承诺的10分钟已经超过不少了...很抱歉我欺骗了你,不过至少我们进展很快~接下来——如果你仍有兴趣的话,让我们为网站增加一些统一性的风格设置。

回到项目根目录,新建文件夹 _layouts,顾名思义,“布局”是也。在 _layouts 中新建一个最基本的布局文件,姑且命名为default.html好了:
<!-- lang: html -->

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>

{{ content }}

</body>
</html>

诺,首先解决了UTF-8的编码问题,随后指定了正文内容的位置,当然在这里只是一个最简单的内容,在body内仅有一个 {{ content }} 标签,你可以根据自己的喜好对页面进行任何改动,只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章,只要在头属性上加一句就好:
<!-- lang: html -->

---
title: xxoo
layout: default.html
---

我们当然还可以把这个结构变得更灵活一些,比如继续新增两个模板分别叫做l_post.html与
l_index.html,他们首先引用default.html,但在其基础上做出一定的修改。然后首页使用l_index模板,而所有的post文件
则使用l_post模板,等等等等,请随意发挥。但始终记得加上 {{ content }} 标签

再次推送到服务端,查看效果。

至少这一点我没骗你,要发布最新的更改实在是太简单了,只需要一次push而已。

那么,基本的项目结构如下:
.
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-rounp.textile
|-- _site
`-- index.html

这幅图来自于:Yes We Jekyll,原谅我的懒惰,我实在不擅长排版...

9、我在使用jekyll建立个人博客,为什么我的jekyll2.5.3里面的_config.yml文件打开是这样子啊?

~本来就是给高手用的(其实也就是入门),普通人就别折腾

10、如何在github上搭建自己的博客

一、为什么在GitHub上托管个人博客

为什么在GitHub上托管博客,这个问题可以分两步来问:

首先,为什么 可以 在GitHub上托管博客看

GitHub是一个基于git的版本托管服务网站,上面聚集着几乎全世界的程序大牛,还有着大量的牛逼开源项目。而项目一旦成长壮大,一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时,GitHub Pages 就应运而生,它允许用户用更具描述性的自定义页面代替源码列表。同时,用户也可以利用其作为个人或组织主页,将 静态 网页托管其上。

那么,在有着WordPress等等大量的开源博客系统的情况下,为什么选择在GitHub上托管博客呢看

对程序猿来说无比亲切,光是看起来感觉就很牛逼的"Git驱动式博客开发与发布流程"。

超级容易,5分钟包学包会的发布方式。

静态页面,建立简单,几乎没有安全性隐患,当然这也是缺点之一,静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客,也不太会有这样的需求

而可靠

更加详细的内容可以参见这里 todo: Jekyll + GitHub Pages 的优点与缺点

话不多说,现在就来试试看。

<p id="002"></p>

二、10分钟快速搭建一个博客原型

首先确认:

拥有一个GitHub账号

已经安装 Git ,(在Windows下,个人推荐直接安装 GitExtensions ,有中文界面,并且集成了git + putty + kDiff ,比较省心一点啦)

1.建立一个项目

先在GitHub创建一个项目,名字随意,尽量全部小写字母,避免随后会碰到的URL冲突问题

本地运行Git,随意选个目录,将刚才创建的项目clone下来
<!-- lang: bash -->
cd /d/
git clone
cd blogdemo

<br/>
<br/>

2.建立配置文件_config.yml

注意:之后建立的所有文档务必使用UTF-8 无 BOM 的编码保存

在项目的根目录下新建文件 _config.yml ,填写 baseurl: /blogdemo , blogdemo是你的项目名称,这一行内容规定了整个网站的根路径,稍后会详细解释这样做的意义。
<br/>
<br/>

3.建立主页

在根目录下新建文件 index.html , 内容像这样:
<!-- lang: html -->

---
title: Hello, My Blog
---

{{ page.title }}

先不用急着奇怪为什么一个html文件会出现"{}"这样的标签,这里使用的是 Liquid 模板语言 ,{{ page.title }} 表示逗本页面的标题地,更详细的介绍我们以后再讲,不妨这样理解:
<!-- lang: python -->

#--- begin of page's head
title = "Hello, My Blog"
#--- end of page's head

print(page.title)

OK,那么博客主页设计完毕!(别吵...我答应过你要10分钟内搭建完成的...先弄个毛胚房意思意思,美化啊功能啊什么的晚点再说)
<br/>
<br/>

4.发布到GitHub

回到git bash, 检查一下 git status ,确认 _config.yml 与 index.html 无误后 add,commit,保持使用Git的良好习惯,记得添加提交描述

然后推送到GitHub,这里注意,因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages 下的内容进行自动生成操作, 所以本地的 master 分支应推送到远端的 gh-pages 分支
<!-- lang: bash -->

git push origin master:gh-pages

稍微等待一下,最多10分钟(通常不用那么久啦),访问 yourname.github.com/blogdemo
,(其中 yourname
是你的GitHub帐户名,blogdemo则是你的项目名)就会看见你的博客主页(确实很丑...而且完全不像一个博客的样子,不过别急,慢慢来比较
快~)

另外,如果不幸发现你的中文页面出现了乱码的情况,别着急,还是该死的UTF-8问题,后面我们会一劳永逸的解决他的,暂时先手动调整一下浏览器的编码。

<br/>
<br/>

5.在_posts内撰写文章,并在首页加入文章列表

在这段时间里,我们继续为你的博客添砖加瓦,让他拥有最基本的文章阅读功能,另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱,如果之前推送的内容有误的话,GitHub将以邮件形式提醒你生成失败。

回到项目根目录, mkdir _posts 新建一个目录,看名字也知道啦,这里存放你所有的文章。

进入_posts目录,新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle 这样。比如 2013-03-23-my_first_article.md,尽量避免空格或者其他乱七八糟的字符,这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml 中的 permalink 属性而改变,默认值为 date ,也就是我们刚刚创建的文件的样子,具体的规则可以看这里,后面我们也会讲到。

如果你发现了我刚才创建的文件后缀名是 .md ,熟悉GitHub或者StackOverFlow的朋友应该知道Markdown 格式,推荐使用GitHub托管博客的原因之一也正是如此,我们可以在大部分时候避开恼人的HTML,转而使用更加直观的Markdown语法。如果不熟悉也没关系,可以参见这份Markdown 语法说明,应该说是相当易学,并且在熟悉之后非常易用的。

回到主题,打开刚才创建的文件,输入如下内容:
<!-- lang: html -->

---
title: 我的第一篇文章
---

# {{ page.title }}

## 目录
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)

----------------------------------

## 第一部分 <p id="partI"></p>
这里是第一部分的内容

----------------------------------

## 第二部分 <p id="partII"></p>
这里是第二部分的内容

----------------------------------

## 第三部分 <p id="partIII"></p>
这里是第三部分的内容

{{ page.date|date_to_string }}

这段内容中使用了最常用的几种Markdown语法,比如使用 # ,## 表示 HTML 中的 <h1></h1> , <h2></h2>。使用[text](link)创建超链接,使用 连续多个 - 创建水平线(注意:不包括最上端包围title所使用的横线,那里表示一个页面的逗头属性地),等等。更多详细的语法可以在之前提到的页面查询,这里不再赘述,总之,这是一种更加贴近真实写作的语法,推荐大家尝试。

啊对了,最后面的那个 {{ page.date|date_to_string }} 是指显示本页的日期属性,并且转换为可读的字符串形式。同样也是Liquid语法。

OK,那么第一篇文章也写好了,再把最新的repo推送到github,稍等片刻,就可以...等下,忘记给文章加上入口的链接了。

Sorry啦,重新打开我们的 index.html 文件,添加内容,变成下面这样:
<!-- lang: html -->

---
title: My Blog
---

{{ page.title }}

{% for post in site.posts %}

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

{% endfor %}

唔...都是Liquid的内容,简单解释一下,Liquid标记最主要分为两种,一种是直接输出变量内容,像这样:

{{ page.title }}

另一种则是逻辑命令形式的,像这样:

{% for x in y %} ... {% endfor %}

而刚才写进主页的内容,就是遍历所有post文件,然后逐一显示在页面上,这里需要注意的一点就是在创建文章的超链接时,除了 post.url 之外,也要注意在前面加上site.url
,原因前面也有提到过,我们正在创建的是 Project Pages
类型的网站,其最终生成的网址根目录是:username.github.com/projectname,而 post.url
生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。

现在检查一下更改的所有内容,确认不要犯下愚蠢的错误,比如把 "." 打成 "。"或者单词拼错之类的,提交并推送!

当当!如果一切顺利,就能看到你的首页外加文章列表闪亮登场。

<br/>
<br/>

6.增加模板套装_layouts

文章进行到这里,或许开头承诺的10分钟已经超过不少了...很抱歉我欺骗了你,不过至少我们进展很快~接下来——如果你仍有兴趣的话,让我们为网站增加一些统一性的风格设置。

回到项目根目录,新建文件夹 _layouts,顾名思义,逗布局地是也。在 _layouts 中新建一个最基本的布局文件,姑且命名为default.html好了:
<!-- lang: html -->

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>

{{ content }}

</body>
</html>

诺,首先解决了UTF-8的编码问题,随后指定了正文内容的位置,当然在这里只是一个最简单的内容,在body内仅有一个 {{ content }} 标签,你可以根据自己的喜好对页面进行任何改动,只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章,只要在头属性上加一句就好:
<!-- lang: html -->

---
title: xxoo
layout: default.html
---

我们当然还可以把这个结构变得更灵活一些,比如继续新增两个模板分别叫做l_post.html与
l_index.html,他们首先引用default.html,但在其基础上做出一定的修改。然后首页使用l_index模板,而所有的post文件
则使用l_post模板,等等等等,请随意发挥。但始终记得加上 {{ content }} 标签

再次推送到服务端,查看效果。

至少这一点我没骗你,要发布最新的更改实在是太简单了,只需要一次push而已。

那么,基本的项目结构如下:
.
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-rounp.textile
|-- _site
`-- index.html

这幅图来自于:Yes We Jekyll,原谅我的懒惰,我实在不擅长排版...

与vps搭建jekyll博客相关的知识