在githubpages网站下用jekyll制作博客教程
在我动手用jekyll部署我的博客之前,一直使用godaddy上面的wordpress主页来部署我的博客kresnik.co。WordPress当然有很多的优点,在我看来我用WordPress主要是为了
方便清晰的文件结构
可以随意选用的各种模板和插件
相对便宜的部署价格
因为这些优点,所以我想我还会在WordPress官网上继续保留我的免费博客。
既然这样,看官想必想问为什么要换成jekyll来重新部署博客?我简单的总结了一下:
流行又简洁的MarkDown写作语法
轻量级的网站结构,不再有动态网站的沉重
方便的和githubpages结合,不仅免费,而且方便
所以对比与WordPress的沉重,jekyll让你回归到创作本身,当然如果你喜欢折腾,jekyll也绝对不会让你失望。推荐下面几个站点亮一下。
rustyshutter
RasmusAndersson
要用githubpages,首先要在github中建立一个基于你的用户名的repository:比如说我,就要建立名为kresnikwang.github.io的repo。在以前的github版本中还需要在后台开启pages的功能,现在系统检测到这样的repo名称之后,会在setting中自动开启GitHubPages的功能,如下图:这样之后你就可以把这个repo克隆到本地随意进行修改了,在这个里面上传的网页就是你的网站的内容了,可以上传一个index.html试一试,这就是你的网站主页了。关于GiuHub的使用,可以看几个比较好的入门教程:GitHub
之后我们就要在本地部署jekyll,jekyll的原理很简单。这是一个已经合成好的静态html网站结构,你用这个结构在username,
文件夹里面粘帖好所有文件。再把更新完的本地repo推送到GitHub的masterbranch里面,你的网站就更新建设完毕了。首先你需要ruby来使用本地jekyll。Mac和Linux可以用Terminal配合yum或者brew这样的包管理器很方便的安装ruby。Windows下更是方便,可以直接中集成好的Rubyinstaller来进行安装,文章里的就是传送门。
安装完ruby,之后就是要安装RubyGems,gem是一个ruby的包管理系统,可以用gem很方便的在本地安装ruby应用。
//在RubyGems官网上下载压缩包,解压到你的本地任意位置
//在Terminal中
cdyourpathtoRubyGems//你解压的位置
rubysetup.rb
有了gem之后安装jekyll就很容易了,其实用过nodejs和npm的同学应该很熟悉这样的包安装,真是这个世界手残脑残们的救星。。。。。(楼主不自觉的摸了摸自己快残了的手)安装jekyll,有了gem,直接在Terminal里面输入以下代码:
$geminstalljekyll
好了,现在你的电脑已经准备完毕了。如果你是想自己捣鼓,可以根据这样的目录结构在你的
文件夹下建立以下目录结构:
├──_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极简风格的模板
JekyllThemesjekyll的模板网站,可以找到各式各样你喜欢的模板。
下载完了模板,可以吧里面的内容解压到你自己的网站目录底下。这时候你可以测试一下:
$cdyouwebsitepath//cd到你的网站目录下
$jekyllserve
//一个开发服务器将会运行在
:4000/
//你就能在本地服务器看到你用模板搭建的网站了
这时候可以看一下jekyll的设置,让你把模板变成你自己个性化的内容。在网站根目录下面找到_config.yml,这里会有几个比较关键的设置:里面的permalink就是你博客文章的目录结构,可以用pretty来简单的设置成日期+文章标题.html,也可以用自己喜欢的结构来设置。记得把encoding设置成utf-8,这样有利于中英文双语的写作和阅读。
到这里你就可以开始写博客了,所有的文章直接放在_posts文件夹下面,格式就是我们之前提到的markdown文件,默认的格式是.md和.markdown文件。每篇文章的开始处需要使用yml格式来写明这篇文章的简单介绍,格式如下:
author:kresnikwang
comments:true
date:2015-04-2817:42:32+00:00
layout:post
title:PHP,AngularJSDevelopment|MyExportQuote|农产品出口工具开发
categories:
-Works
-Tech
tags:
-bootstrap
-javascript
-AngularJS
layout就是post,让jekyll知道你这是一篇post,很直观。需要注意的是里面的date,必须按照yml的语法来写,否则就会出现编译错误。可以只用YYYY-MM-DD来显示日期,也可以像我一样在后面加上HH:MM:SS+00:00来表示更具体的时间。
到此为止可以开始尽情的写博客了,用GitHub软件同步到你的repository里面,网站上面就可以进行正常的显示了。如果说要添加一下有用的extra功能的话,评论和相关文章这两个功能比较多人会关注。评论我们可以用Disqus国内应该也有类似的网站,到Disqus注册一个账号,选择添加评论区域到自己的网页,你将会的得到类似的代码:
kresnik.co博客搬家告示
JavascriptIncludeHtmlPageByJquery
Github设置,强制使用"https://"来代替"git://"
你每篇文章下面就会有三个相关文章的链接了。
这篇教程就到这里,有机会我想再写写liquid语法制作jekyll模板的内容和从wordpress导入文章到jekyll来的方法。喜欢能有些用处,感谢。
附上出处链接:
本回答由网友推荐
百度一下会有很多的帖子讲如何搭建自己的GithubPages。
而如何做出“漂亮的”GithubPages,新手的话,从挑一个诚心如意的模板开始把。
关于搭建:
pchou.info的页面
这是作者关于搭建GP的最新贴,很精练。
其中Jekyll是Github默认的模板系统,所以也推荐选择这个。
如果在搭建Jekyll中出现问题,可以参考Github的帮助页:
UsingJekyllwithPages
关于模版:
JekyllThemes
这里有一些不错的模版,可以去看看,然后fork下来,解压到自己的项目文件夹中,commit到你的github上就好了。然后根据自己的需要再进行修改。
Ps.有些主题需要额外安装一些工具,例如sass。但是直接在项目文件夹中geminstallsass就好了,比较简单。如果你下载了模版使用中有问题,可以看一下模版文件夹下的README.md
关于更多:
使用GithubPages建独立博客
这个帖子的后半部分(从Jekyll模版系统开始),比较详细的介绍了Jekyll,并且推荐了一些关于如何加入“评论”,“代码高亮”的功能的插件。
其他链接:
如何搭建一个独立博客——简明GithubPages与Hexo教程
我的博客:
Dreammydream
就是用上述办法搭建的,可以供大家参考。
本回答由网友推荐
无需编程,零成本!只需挑选一个主题,经过配置,加入内容即可。
作者 | Stephen Vinouze
译者 | 弯月,责编 | 郭芮
头图 | CSDN 下载自东方IC
出品 | CSDN(ID:CSDNnews)
以下为译文:
创建一个网站的工作量不容小觑。即便你拥有编程背景,也有可能在网络上迷失方向,究竟从何处下手呢?
我可以在此承诺,读完本文,你的收获包括:
一个免费的优雅网站,甚至无需托管。
一个评论框,让读者与你互动。
一个邮件订阅列表,用于通知用户你新发布的内容。
使用分析工具来跟踪读者的行为。
以及其他高级的主题。

首先给你看一下我最近构建的网站(),很酷吧?
我花了大量时间整理和研究有关静态网站生成器的文章。本文汇总了我获取的所有信息,希望能为你呈现一份完整的指南。
下面,我们开始吧!
前提条件
刚才我曾说构建新网站不需要花费1分钱,这要感谢GitHub Pages()。
你只需创建一个GitHub账号,即可免费托管你的网站。版本管理与部署的工作可以全权委托给Github。非常方便!
你甚至不需要懂得HTML或CSS,尽管了解这些更好。GitHub Pages使用Jekyll将Markdown文件转换成HTML,所以你只需要关注内容即可。
所以前提条件是:
拥有GitHub账号。
了解Git的基本知识。不需要是专家,甚至可以直接在GitHub的Web界面上操作。
了解怎样书写Markdown,通过官方的速查表()分分钟就能学会。
如果这些都没问题,那么我们就来看看最激动人心的部分吧!
选择主题
这是本文最重要的部分!你可以慢慢选择最适合需要的模板。
你可以找到一大堆免费的主题。这些主题都有详尽的文档,适用于各种情况,不论你想建立个人博客,还是建立个人主页。当然你也可以花钱选择付费主题。
例如,我的博客选择了Mediumish主题。感谢WowThemes免费提供了这个优秀的主题。
浏览这些主题,点击“Live Demo”按钮可以看到实时的预览。找到你想要的那个!
部署网站
假设你已经建好了GitHub账号。仔细看看GitHub Pages的文档就会知道(),你应该建立一个Git仓库,取名为your_username.github.io。
我们跳过这些设置的步骤。毕竟,我们选择主题的目的就是为了跳过这些设置步骤。你可不想在设置上花费一整天。
根据你选择的模板的Git仓库建立分叉。模板页面上应该有一个链接,点击后就能创建一个复制的Git仓库,你可以在这个仓库中写入内容。
分叉之后,你需要将这个仓库的名字改成your_username.github.io。点击“Settings”,然后重命名仓库:
试试看!你的网站应该已经可以使用了!在浏览器中打开一个新的页面,输入URL: (将your_username替换为你的用户名)。
如果还有疑问,可以比较一下你和我的代码库。
准备自己的版本
GitHub会从master分支部署网站。记住,推送到master上的任何修改都会导致网站重新部署。
所以在开始之前,我建议你先创建一个develop分支。在将develop合并到master之前,所有的改变都不会影响网站的内容。
使用develop分支,你可以尝试任何东西而不用担心把网站搞坏。
测试改动
你肯定想看看develop分支的改动会对网站产生什么影响。我们可以在本地部署。打开控制台,在你克隆git仓库的地方输入下列命令:
$ bundle exec jekyll serve -- watch
然后用浏览器打开这个地址::4000/
你可以一直保留这个终端窗口,网站就会在你自己的机器上一直运行,直到你关闭为止。
配置网站
现在你的网站还只是一个空壳,我们来添加一些内容。
注意:我建议把这篇文章当作一个指南。并非所有主题的配置都一样。如果你选的主题和我选的不一样,那么我在文章里写的并不一定适合你。请仔细阅读主题本身的文档。
首先,我们来看看_config.yml文件,这里有许多神奇的配置。有几个参数需要按照自己的需要更新。
你可以自行配置一些东西,例如:
联系信息
头像
社交网络链接
重启Jekyll进程,然后刷新页面,就能看到修改的效果。
需要提醒你,在改变_config.yml文件后,必须重新启动Jekyll才能看到效果。对于其他文件的改动则只需要刷新页面即可。
发布文章
现在可以将模板上的文章替换为你自己的文章了。
在开始之前,要理解Jekyll的命名规范。所有文章必须:
保存在_posts文件夹下
命名为yyyy-mm-dd-name-of-your-post.md格式
用Markdown语言编写(即扩展名.md的含义)
试试看!在_posts目录下用适当的名字创建一个文件。然后,刷新浏览器就能看到你的文章显示在网站上。
“如果我的有些文章已经发表在Medium上,想转换成Markdown怎么办?”
有几个解决方案。我推荐使用这个十分好用的转换器()。
需要提醒的是,它无法处理Gist,所以你需要手工提取Gist。但并不复杂,只需右键点击Medium中的Gist然后将其中包含的<script>标签中的链接提取出来即可。
与读者互动
许多主题都支持Disqus()。这个服务可以在你的网页上添加一个评论区。配置方法如下:
创建一个Disqus账号,可以先选择免费的套餐。
用网站名作为唯一的ID,输入网站的URL。
将_config.yml中的Disqus值替换成你的Disqus网站名。
下面的截图中可以看到我的网站Disqus配置。在我的_config.yml文件中,我将Disqus值设置为stephenvinouze:
你也许注意到我的URL并不是。我稍后会解释为什么。现在你应该使用你的GitHub URL。
还有,你应该注意Disqus永远不会在你的本地工作,因为你上面指定的是正式网站的地址。
请记住,你现在修改的还是develop分支。如果你已经提交并推送了你已经完成的修改(你应该这么做),你的网站并不会被重新部署。如果想检查Disqus是否正常工作,就必须将develop合并到master。然后可以访问正式网站的URL(网站部署可能需要一些时间)。
你应该能看到下面的评论区:
留住访问者
网站的第一要务就是存留率。你在与整个互联网竞争,让你的声音能被全世界听见。怎样才能让别人访问你的网站?或者说,为什么他们会留在你的网站?
也许你听说过SEO。不幸的是,我对于这个话题并不熟悉。不过你能找到许多这方面的文章。有一些模板据说是SEO优化过的。不过我不会过于依赖这些模板。
除了SEO之外,你还可以邀请访问者继续关注未来的文章。有几种机制可以达到这一点。一种方法叫做Mailchimp()。就像Disqus一样,你可以嵌入一个HTML表单,这样你在发布新文章的时候可以通知用户。许多主题已经包含了Mailchimp。很方便吧?
不过,Mailchimp的配置并不是太直观。我花了很多时间尝试搞明白他们的仪表板怎么用。
我的主题要求我添加一个来自Mailchimp的订阅列表链接。我假设你也遇到了同样的要求,所以我将带领你配置一下。
就像Disqus一样,首先需要创建一个账号,选择免费套餐,然后回答一些问题。
选择“Audience”。右侧面板有一个“Manage Audience”。打开它,然后点击“Signup forms”。
选择第一个叫做“Form builder”的项目。这里你可以收到订阅表单。用户点击网站的“订阅”按钮时就会看到这个页面。你可以进行一些定制。
Mailchimp可以让你修改表单的布局,以及你希望用户填写的字段。如果你想把用户吓跑,就保持表单尽可能简洁。一个电子邮件字段就足够了。
要把表单连接到网站上,只需复制“Signup form URL”中显示的短链接。在浏览器中打开,看看表单的实际样子。你可以将完整的URL复制到你的项目中,完成这个配置。
如果你还想深入,可以定制一下其他表单。在同一个网页上,找到顶端的“Signup form”面板。这个下拉列表列出了所有访问者通过邮件列表与你交流时能够看到的表单。
创意的工作就交给你自己了。到这里为止,你的邮件列表订阅应该可以工作了。别忘了将修改合并到master分支来应用这些修改。
跟踪用户
跟踪是用户看不到的一部分工作,但你绝不能忽视它。
Google Analytics可以帮你分析用户的行为。你可以了解用户如何访问你的网站,哪篇文章的效果最好。
绝大多数模板都集成了Google Analytics来跟踪网页浏览。如果你的模板没有,可以参考这篇文章:
你需要指定一个Google Analytics ID。也许这看起来有些无聊,但我们需要重复在Disqus和Mailchimp上进行过的操作。你会被重定向到这个页面,该页面上可以找到TrackingID。在下面的截图上可以看出,我的是UA-166933112-1。将其复制到你的_config.yml文件中,就搞定了。
同样,别忘了将修改合并到master。重新部署后,尝试浏览几篇文章。你应该能在Google Analytics的实时仪表板中看到点击次数的增加。
福利:自定义域名
到这里为止,你的网站就建好了。
你的网站的地址为。但是如果能有一个更友好的域名该多好!
GitHub Pages可以让你指定自定义域名。对于我的网站来说,所有访问的都会被重定向到。
尽管我承诺这个网站是免费的,但这一步例外。你需要购买一个域名。
如果你不想花钱, 则可以跳过这一步。但是,拥有自己的域名可以让访问者更容易找到你。这是你的网站的品牌。
如果你想做这一步,你需要一个DNS供应商。我选择了Google Domains,因为它:
很容易配置
可靠
便宜(每年只需十几欧元)
购买域名之后,你需要将自定义域名关联到你的GitHub账号上。在本文开头提到的编辑Git仓库的同一个页面上,向下滚动直到你看到这一节:
用你购买的域名填写“Custom domain”字段。我推荐勾选Enforce HTTPS。
保存这些设置,然后进入Google Domain的控制台。在“DNS”小节中,用你的记录替换自定义记录。可以参考这篇文章(@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a)。

搞定了!试试看用新的URL访问网站吧。
注意新购买的域名可能需要最多一天时间才能访问。我的花了大概一个小时。
总结
恭喜,你成功了!
通过GitHub Pages可以如此轻松地构建网站,我对此非常惊讶。
但是,我们不要忘记社区为我们开发了这些预配置的精良模板。为了感谢他们的辛勤工作,请在你的网站内注明模板出处,尤其是当遇到你非常喜欢的免费主题时,这也是支持他们努力的象征。
原文:
本文为 CSDN 翻译,转载请注明来源出处。
?刘强东卖光碟,周鸿祎“电脑算命”,马云卖鲜花,盘点 IT 大佬摆过的地摊
?从地摊看云计算:规模产业历程大揭秘
?头条和百度“大打出手”时,微信搜索去哪儿了?
?怒肝 8 个月源码,我成为了 Spring 开源贡献者
?干货 | 基于SRS直播平台的监控系统之实现思路与过程
?挖矿仍然有利可图吗?
1. 拥有一个域名
这个步骤我就不详述了,去各大网站上买一个就行,选一个对自己有意义的域名
2. 拥有一个 Github账号
互联网崇尚自由与分享。Github 是一个全世界程序员聚集的地方,大家相互分享自己写的代码,提升别人,也提升自己。大家都在为着开源社区努力着。因为我从开源项目中学到很多知识,所以我也非常愿意分享我的所见所学所得,我的 Github 主页: (欢迎 follow 和对我的项目给个 star 或者 fork 我的项目一起来和我完善项目)
如果还没有 Github 账号的话你就先去注册一个吧,有的话,直接登录就行,后面的操作都要用到 Github 的。
3. Github 上新建个人网站项目
登录 GitHub 之后,在页面右上角点击 + 加号按钮,点击 New repository。
由于我们是新建一个个人网站项目,所有仓库的名称需要安装 GitHub 个人网站项目的规定来写。
规则就是:
YOUR-GITHUB-USERNAME.github.io
比如我的 GitHub 用户名是 zhisheng17,那我就要填写 zhisheng17.github.io。然后选择公开模式,接着点击创建仓库按钮。
创建成功之后,进入了项目主页面。点击设置按钮。
进入之后,滚动页面到下方。点击页面自动生成器按钮。
点击右下方继续去布局按钮。
选择一个模板,点击发布页面按钮。
这个时候,你就可以通过YOUR-GITHUB-USERNAME.github.io来访问此页面了。
4. 上传个人网页到 Github
自动生成页面,肯定不符合我们的要求,我们希望能够自己设计自己的个人网站。我们可以自己编写一个网页文件,命名为 index.html。然后上传到 GitHub个人网站项目上。这里为了节约时间,可以先下载我的个人网站项目代码,然后修改为你的网页上传到 GitHub。
下面介绍详细步骤。
进入此项目,然后下载源码。解压之后,拿到里面的index.html文件。
然后进入自己的个人网站项目主页 YOUR-GITHUB-USERNAME/YOUR-GITHUB-USERNAME.github.io。点击上传文件按钮,进入上传文件页面,将 index.html 文件拖入蓝色大圈圈区域,点击提交按钮即可提交成功。此时打开网址 YOUR-GITHUB-USERNAME.github.io 就可以看到主页已经改变为我们自己的网页了。
通过 zhisheng17.github.io 查看效果:
5. 域名CNAME到个人网站项目
网页上传成功了,我们不想一直通过YOUR-GITHUB-USERNAME.github.io来访问我们的个人网站,而是希望通过自己的域名来访问。
下面讲述详细步骤。
点击我们的个人网站项目设置选项卡,滚动到下面,就会发现一个自定义域名卡片。输入我们买的域名,然后点击保存。
接着我们还要将我们的域名解析到这个个人网站项目上。因为我的域名是在腾讯云上面买的,所以我打开腾讯云域名管理页面,进行相关的设置。
接着,点击添加一条域名解析记录,主机填写www,代表你是一级域名来访问,指向填写YOUR-GITHUB-USERNAME.github.io,然后点击保存按钮。应该要等会,域名的解析时间可能不一样,我的腾讯云就是很慢的
6. 访问你的域名
所有这些步骤做完之后,在浏览器里输入自己的域名,回车键一按,就会返回我们刚刚上传到 GitHub 的index.html 页面了。
这里只是入门了 GitHub 搭建个人网站的功能,GitHub 官方推荐 Jekyll 博客系统来发布自己的页面。以后有数据更新,都可以通过 Jekyll 来重新编译整个网站。(期待后续我的使用 Jekyll 博客系统发布自己博客的文章吧)
7. 注意事项
尽管GitHub个人网站项目是免费的,但是却有一些限制。总体来说,完全够用,甚至太多了。
单个仓库大小不超过1GB,上传单个文件大小不能超过100MB,如果通过浏览器上传不能超过25MB
个人网站项目也不例外,最大空间1GB
个人网站项目每个月访问请求数不能超过10万次,总流量不能超过100GB
个人网站项目一小时创建数量不能超过10个
当然了,这些政策可能随时改变,可以通过此网页查看最新政策。 #recommended-limits