如何快速搭建一个免费的,无限流量的Blog

转载自   如何快速搭建一个免费的,无限流量的Blog

喜欢写Blog的人,会经历三个阶段。

第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。

第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。

第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

大多数Blog作者,都停留在第一和第二阶段,因为第三阶段不太容易到达:你很难找到俯首听命、愿意为你管理服务器的人。

但是两年前,情况出现变化,一些程序员开始在github网站上搭建blog。他们既拥有绝对管理权,又享受github带来的便利----不管何时何地,只要向主机提交commit,就能发布新文章。更妙的是,这一切还是免费的,github提供无限流量,世界各地都有理想的访问速度。

今天,我就来示范如何在github上搭建Blog,你可以从中掌握github的Pages功能,以及Jekyll软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。

 

一、Github Pages 是什么?

如果你对编程有所了解,就一定听说过github。它号称程序员的Facebook,有着极高的人气,许多重要的项目都托管在上面。

简单说,它是一个具有版本管理功能的代码仓库,每个项目都有一个主页,列出项目的源文件。

但是对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。因此,github就设计了Pages功能,允许用户自定义项目首页,用来替代默认的源码列表。所以,github Pages可以被认为是用户编写的、托管在github上的静态网页。

github提供模板,允许站内生成网页,但也允许用户自己编写网页,然后上传。有意思的是,这种上传并不是单纯的上传,而是会经过Jekyll程序的再处理。

 

二、Jekyll是什么?

Jekyll(发音/'dʒiːk əl/,"杰克尔")是一个静态站点生成器,它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能,所以实际上可以用来编写整个网站。

整个思路到这里就很明显了。你先在本地编写符合Jekyll规范的网站源码,然后上传到github,由github生成并托管整个网站。

这种做法的好处是:

  * 免费,无限流量。

  * 享受git的版本管理功能,不用担心文章遗失。

  * 你只要用自己喜欢的编辑器写文章就可以了,其他事情一概不用操心,都由github处理。

它的缺点是:

  * 有一定技术门槛,你必须要懂一点git和网页开发。

  * 它生成的是静态网页,添加动态功能必须使用外部服务,比如评论功能就只能用disqus。

  * 它不适合大型网站,因为没有用到数据库,每运行一次都必须遍历全部的文本文件,网站越大,生成时间越长。

但是,综合来看,它不失为搭建中小型Blog或项目主页的最佳选项之一。

 

三、一个实例

下面,我举一个实例,演示如何在github上搭建blog,你可以跟着一步步做。为了便于理解,这个blog只有最基本的功能。

在搭建之前,你必须已经安装了git,并且有github账户。

第一步,创建项目。

在你的电脑上,建立一个目录,作为项目的主目录。我们假定,它的名称为jekyll_demo。

  $ mkdir jekyll_demo

对该目录进行git初始化。

  $ cd jekyll_demo

  $ git init

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

  $ git checkout --orphan gh-pages

以下所有动作,都在该分支下完成。

第二步,创建设置文件。

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

baseurl:  /jekyll_demo

目录结构变成:

/jekyll_demo|-- _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 }}表示文章内容,更多模板变量请参考官方文档。

目录结构变成:

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

第四步,创建文章。

回到项目根目录,创建一个_posts目录,用于存放blog文章。

$ mkdir _posts

进入该目录,创建第一篇文章。文章就是普通的文本文件,文件名假定为2012-08-25-hello-world.html。(注意,文件名必须为"年-月-日-文章标题.后缀名"的格式。如果网页代码采用html格式,后缀名为html;如果采用markdown格式,后缀名为md。)

在该文件中,填入以下内容:(注意,行首不能有空格)

---layout: defaulttitle: 你好,世界---<h2>{{ page.title }}</h2><p>我的第一篇文章</p><p>{{ page.date | date_to_string }}</p>

每篇文章的头部,必须有一个yaml文件头,用来设置一些元数据。它用三根短划线"---",标记开始和结束,里面每一行设置一种元数据。"layout:default",表示该文章的模板使用_layouts目录下的default.html文件;"title: 你好,世界",表示该文章的标题是"你好,世界",如果不设置这个值,默认使用嵌入文件名的标题,即"hello world"。

在yaml文件头后面,就是文章的正式内容,里面可以使用模板变量。{{ page.title }}就是文件头中设置的"你好,世界",{{ page.date   }}则是嵌入文件名的日期(也可以在文件头重新定义date变量),"| date_to_string"表示将page.date变量转化成人类可读的格式。

目录结构变成:

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

第五步,创建首页。

有了文章以后,还需要有一个首页。

回到根目录,创建一个index.html文件,填入以下内容。

---layout: defaulttitle: 我的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>

它的Yaml文件头表示,首页使用default模板,标题为"我的Blog"。然后,首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历。这里要注意的是,Liquid模板语言规定,输出内容使用两层大括号,单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml中设置的baseurl变量。

目录结构变成:

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

第六步,发布内容。

现在,这个简单的Blog就可以发布了。先把所有内容加入本地git库。

$ git add .
$ git commit -m "first post"

然后,前往github的网站,在网站上创建一个名为jekyll_demo的库。接着,再将本地内容推送到github上你刚创建的库。注意,下面命令中的username,要替换成你的username。

$ git remote add origin https://github.com/username/jekyll_demo.git
$ git push origin gh-pages

上传成功之后,等10分钟左右,访问http://username.github.com/jekyll_demo/就可以看到Blog已经生成了(将username换成你的用户名)。

首页:

文章页面:

第七步,绑定域名。

如果你不想用 http://username.github.com/jekyll_demo/这个域名,可以换成自己的域名。

具体方法是在repo的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如example.com或者xxx.example.com。

如果绑定的是顶级域名,则DNS要新建一条A记录,指向204.232.175.78。如果绑定的是二级域名,则DNS要新建一条CNAME记录,指向username.github.com(请将username换成你的用户名)。此外,别忘了将_config.yml文件中的baseurl改成根目录"/"。

至此,最简单的Blog就算搭建完成了。进一步的完善,请参考Jekyll创始人的示例库,以及其他用Jekyll搭建的blog。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

切记!构造函数里面别一定不要初始化其他类,踩过坑的都知道

点击上方蓝色关注我们&#xff01;先来看看什么是构造函数&#xff08;方法&#xff09;&#xff1a;是一种特殊的方法&#xff0c;特殊之处就在于它没有返回类型&#xff0c;void也不可以有。且方法名与类名完全相同。主要是用来创建对象时初始化对象&#xff0c;也就是为对象…

线程安全问题解决

方式一(同步代码块) synchronized(同步监视器){ //需要被同步的代码 } 说明&#xff1a;1.操作共享数据的代码&#xff0c;即为需要被同步的代码。 -->不能包含代码多了&#xff0c;也不能包含代码少了。 2.共享数据&#xff1a;多个线程共同操作的变量。比如&#xff1a;…

Chrome DevTools 调研笔记

1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析。描述了每个功能点能实现的功能、应用场景和详细操作。 2 Elements 2.1 功能 检查和实时更新页面的HTML与CSS 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。在 Styles 窗格中查看和更改应用到任何选…

java中你知道的这四种代码块吗?

点击上方蓝字关注我们大家好&#xff0c;我是雄雄&#xff0c;今天给大家分享的是&#xff1a;java中的四种代码块什么叫代码块&#xff1f;代码块就是将多行代码封装到一个“{}”中&#xff0c;形成一个独立的代码区&#xff0c;这就构成了代码块&#xff0c;一般常见的代码块…

DDD理论学习系列(5)-- 统一建模语言

1.引言 上一节讲解了领域模型&#xff0c;领域模型主要是将业务中涉及到的概念以面向对象的思想进行抽象&#xff0c;抽象出实体对象&#xff0c;确定实体所对应的方法和属性&#xff0c;以及实体之间的关系。然后将这些实体和实体之间的关系以某种形式&#xff08;比如UML、图…

java中你知道这四种代码块吗?

大家好&#xff0c;我是雄雄&#xff0c;今天给大家分享的是&#xff1a;java中构造代码块的用法。 什么叫代码块&#xff1f;代码块将多行代码封装到一个{}中&#xff0c;形成一个独立的代码区&#xff0c;这就够成了代码块&#xff0c;一般常见的代码块是这样的&#xff1a; …

jzoj2152-终极数【堆】

题目&#xff08;复杂&#xff09; 给定一个长度为n的序列a&#xff0c;试求出对于序列a的每一个前缀的终极数x&#xff0c;使得 最小&#xff0c;试求出终极数t&#xff08;如若有多个终极数t&#xff0c;只需输出最小的那个&#xff09; 正解 其实就是求中位数… 输入 …

谈谈准确率(P值)、召回率(R值)及F值

转载自 谈谈准确率&#xff08;P值&#xff09;、召回率&#xff08;R值&#xff09;及F值 谈谈准确率&#xff08;P值&#xff09;、召回率&#xff08;R值&#xff09;及F值 一直总是听说过这几个词&#xff0c;但是很容易记混&#xff0c;在这里记录一下。希望对大家理解…

线程创建两种方式

方式一(继承于Thread类) 创建一个继承于Thread类的子类重写Thread类的run() --> 将此线程执行的操作声明在run()中创建Thread类的子类的对象通过此对象调用start() package com.wdl.java;//1. 创建一个继承于Thread类的子类 class MyThread extends Thread {//2. 重写Thre…

在ASP.NET CORE 2.0使用SignalR技术

一、前言 上次讲SignalR还是在《在ASP.NET Core下使用SignalR技术》文章中提到&#xff0c;ASP.NET Core 1.x.x 版本发布中并没有包含SignalR技术和开发计划中。时间过得很快&#xff0c;MS已经发布了.NET Core 2.0 Preview 2 预览版&#xff0c;距离正式版已经不远了&#xf…

java中常见的几种内部类,你会几个?(未完)

点击上方蓝色关注我们&#xff01;大家好&#xff0c;我是雄雄&#xff0c;今天给大家介绍的是java中的几种内部类。java中常见的几个内部类&#xff0c;你会几个&#xff1f;我会四个&#xff01;在看每个新知识点时&#xff0c;我们不禁有这样或者那样的疑问&#xff0c;比如…

通俗理解信息熵

转载自 通俗理解信息熵 通俗理解信息熵 前段时间德川和我讲解了决策树的相关知识&#xff0c;里面德川说了一下熵&#xff0c;今天整理了一下&#xff0c;记录下来希望对大家理解有帮助~ 1、信息熵的公式 先抛出信息熵公式如下&#xff1a; 其中代表随机事件X为的概率&…

.NET Core 2.0 Preview 2为开发人员带来改进

Microsoft发布了.NET Core 2第二个预览版&#xff08;Preview 2&#xff09;&#xff0c;该版本可用于Mac OS X、Linux和Windows平台。Preview 2首次给出了对所有平台上各种软件包和安装程序的统一命名模式。所有的运行时文件将以"dotnet-运行时名称”命名&#xff0c;而S…

java中,剩下的这两个内部类不太好理解!

点击上方蓝色关注我们&#xff01;大家好&#xff0c;我是雄雄&#xff0c;今天我们接着昨天的分享&#xff0c;将剩余的两个内部类&#xff08;方法内部类和匿名内部类&#xff09;结束掉&#xff0c;这两个内部类都不太好理解。昨天的推文&#xff1a;java中常见的几种内部类…

【jzoj】2018.2.3NOIP普及组——D组模拟赛

前言 万年D组系列… 正题 题目1&#xff1a;数池塘&#xff08;jzoj1898&#xff09; 有一个地方有一些积水&#xff0c;连着的积水是一个池塘&#xff0c;求池塘数。 输入 第1行&#xff1a;由空格隔开的两个整数&#xff1a;N和M 第2..N1行&#xff1a;每行M个字符代表…

通俗理解条件熵

转载自 通俗理解条件熵 通俗理解条件熵 前面我们总结了信息熵的概念通俗理解信息熵,这次我们来理解一下条件熵。 1、信息熵以及引出条件熵 我们首先知道信息熵是考虑该随机变量的所有可能取值&#xff0c;即所有可能发生事件所带来的信息量的期望。公式如下&#xff1a; 我…

WebAssembly:随风潜入夜

What&#xff1f; WebAssembly 是一种二进制格式的类汇编代码&#xff0c;可以被浏览器加载和并进一步编译成可执行的机器码&#xff0c;从而在客户端运行。它还可以作为高级语言的编译目标&#xff0c;理论上任何语言都可以编译为 WebAssembly。 我们知道汇编语言就是机器码的…

让java的多重继承成为现实!

点击上方蓝色关注我们&#xff01;大家好&#xff0c;我是雄雄&#xff0c;前两天给大家说了说java中的四种内部类&#xff0c;推文分别为&#xff1a;静态内部类和成员内部类方法内部类和匿名内部类在内部类的基础上&#xff0c;我们来看看今天的知识点儿。众所周知&#xff0…

通俗理解决策树算法中信息增益的

转载自 通俗理解决策树算法中信息增益的 通俗理解决策树算法中的信息增益 在决策树算法的学习过程中&#xff0c;信息增益是特征选择的一个重要指标&#xff0c;它定义为一个特征能够为分类系统带来多少信息&#xff0c;带来的信息越多&#xff0c;说明该特征越重要&#x…

DDD理论学习系列(6)-- 实体

1.引言 实体对应的英语单词为Entity。提到实体&#xff0c;你可能立马就想到了代码中定义的实体类。在使用一些ORM框架时&#xff0c;比如Entity Framework&#xff0c;实体作为直接反映数据库表结构的对象&#xff0c;就更尤为重要。特别是当我们使用EF Code First时&#xf…