文档章节

用jekyll和github Pages写博客

laichendong
 laichendong
发布于 2015/08/30 16:37
字数 1208
阅读 1213
收藏 3

题外话,在当今这个微博都还没来得及高兴一下就被朋友圈拉下神坛的年代,说如何搭建自己的博客系统似乎已经太过于过时了。 如果你有这样的想法,恐怕这篇文章不是非常适合你了。建议你把它关了去刷朋友圈。如果你和我一样,还是愿意折腾,并且愿意将折腾记录下来。那么,我们交个朋友吧。一起去刷朋友圈。

工欲善其事,必先利其器。介绍一下我们要用到的两个工具。 首先登场的是:github pagesgithub提供的,免费的,类似于网页空间,一样的一种服务,每个账号和每个项目都可以对应一个pages站点。 今天的另一个主角叫jekyll是一个用ruby写的,开源在github上的将纯文本文件转换成静态博客网站的一个工具。

其实,有了github pages你就完全可以想怎么玩就怎么玩了。因为他就是一个网页空间。将html文件扔上去就行了。下面我们一步一步看如何配置你的github pages。我们要做的是个人博客,当然是账号级别的比较好。

第一步,当然是要在github里建立一个仓库。注意:这个仓库的名字特别重要,需要这种格式:你的用户名.github.io, 比如我,就是laichendong.github.io

第二步,将这个仓库克隆到本地。

~ $ git clone https://github.com/username/username.github.io

第三步,写一个hello world到你的博客里。

~ $ cd username.github.io
~ $ echo "Hello World" > index.html

第四步,提交,推到远端。

~ $ git add --all
~ $ git commit -m "Initial commit"
~ $ git push -u origin master

第五步,没有第五步了。浏览器里访问一下:http://username.github.io

到这里,你已经拥有了一个你自己的博客站点。想写什么就写什么了!但是,开什么玩笑!我来是想些博客的。不是想来做网站的!这个时候就该jekyll上场了。

第一步,安装jekyll

~ $ gem install jekyll

很悲催的是,国内的网络环境可能导致你在这一步就失败了。于是,我们求助于万能的淘宝,http://ruby.taobao.org/是淘宝搭建的ruby gems镜像。感谢! 换源:

~ $ gem sources --remove https://rubygems.org/
~ $ gem sources -a https://ruby.taobao.org/
~ $ gem sources -l
	*** CURRENT SOURCES ***
	https://ruby.taobao.org

这时候再运行安装命令应该就没问题了。

第二步,新建一个博客

~ $ jekyll new myblog

第三步,运行博客服务器

~ $ cd myblog
~/myblog $ jekyll serve

这时候你你再浏览器里敲http://localhost:4000就能看到效果了。

虽然在浏览器里你看到了一个页面,但你可能还有点蒙。我们回到myblog文件夹里看看,都是怎么回事儿。文件夹里的目录大概应该像这样,不完全一样也别大惊小怪。都是些一看就懂的东西

.
├── _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 // 最终生成的博客站点
├── .jekyll-metadata // jekyll自己用的一些元数据,最好别把它放到git里区管理
└── index.html // 这个你懂的拉

假如你新写了一篇文章在_posts里。先运行一下build在server就能看到了。

~ $ jekyll build
~ $ jekyll s

你不会想问我,怎么将jekyll生成的网站弄到github pages上去吧?额,很简单。把整个目录 注意是整个目录,包括源文件配置文件等等,都扔到你的username.github.io这个仓库里去就行了。github pages能自动识别出来 _site 下才是你的站点。真是太tmd贴心了!

如果你看到这了都还没放弃,说明我们已经是朋友了。 就再说两招吧:

一,没事儿多看官网的文档。这才是王道。英文头疼的话,jekyll还有好心人翻译了中文的:http://jekyllcn.com/

二,如果你像我一样,有自己的域名,切不喜欢github.io的二级域名的话,也可以配置解析,让github pages用自己的域名

第一步是在你的仓库里建立一个CNAME文件。这个文件里就写你的域名就行了,比如laichendong.com,别有别的了。如果正确设置了CNAME文件,在你的仓库设置页面,应该能看到这样一行字。

 Your site is published at http://laichendong.com

第二步就是将你的域名解析指向到你的github给你的二级域名上就ok了。

器已经善了,工才是王道。博客已经搭建起来了,里面的博文才是最重要的。愿你记录非凡人生。


© 著作权归作者所有

laichendong
粉丝 10
博文 85
码字总数 71483
作品 0
朝阳
程序员
私信 提问
加载中

评论(2)

Aceslup
Aceslup
请问编辑文章的流程。是不是在本地更新生成好静态文件,然后在push到github.io上。然后才可在提供的域名上访问到?编辑文章时是页面操作还是命令行操作?
seaman-7
seaman-7
十分感谢,一个坑一个坑的跳过了,到你这终于整好了,感动哭~_~
在win10子系统ubuntu平台下使用jekyll和github pages搭建自己的静态博客网站

前言 总喜欢在自己闲得无聊的时候,折腾一些东西。最近喜欢上了markdown的方便简洁,就想借助jekyll和github pages来搭建一个静态博客网站,然后只需要跟平时写代码一样,上传自己的.md文件就...

qq992817263
2017/08/09
0
0
Github Pages的时间设置问题

Github Pages的时间设置问题 最美·流年2013-11-06157 阅读 时间github Jekyll写blog,托管在Github Pages上的时间和本地时间不匹配的问题解决方法 使用Jekyll在写blog时,通常会在YAML Fron...

最美·流年
2013/11/06
0
0
Ubuntu15.04+Jekyll+Github Pages搭建静态博客

Ubuntu15.04+Jekyll+Github Pages搭建静态博客 1. Jekyll简介 简单: 无需数据库、无需评论功能,不需要不断更新版本,只需要关心博客内容。 静态: 只用 Markdown (或 Textile)、Liquid、HTM...

我家有宝
2016/01/28
71
0
Jekyll + Github = 简单搭建一个个人博客

在我成功试水,搭建了自己的个人博客后,我体会到了 Jekyll 制作网站的轻便性。而 GitHub Pages 对 Jekyll 的支持,又省去了建站时服务器和域名的搭建过程。在查阅网上的资料时,大牛们都是先...

cometeme
2018/08/20
0
0
github-pages使用简介

ssh,git等基础知识就不介绍了。 1. 使用github-pages 参考链接:https://pages.github.com/ 基本上参照首页的指南就可以创建一个个人站点。选择User or organization site选项,然后会看到下...

1689LiYong
2016/02/28
35
0

没有更多内容

加载失败,请刷新页面

加载更多

3分钟看懂Activity启动流程

背景介绍 从事开发到了一定阶段,想要提高就必须搞明白系统的一些工作原理。为什么?因为只有明白了这些,你才能针对平台的特性写出优质的代码。当遇到棘手的问题时,你才能更快速的结合系统...

天王盖地虎626
29分钟前
1
0
机器学习算法GPU版本安装配置

##XGBoost for GPU安装https://blog.csdn.net/weixin_30963287/article/details/79145107https://blog.csdn.net/wl2858623940/article/details/80546140https://blog.csdn.net/u01164186......

KYO4321
31分钟前
1
0
微软展开训练AI来推Windows 10 1903版自动更新

Windows 10 May 2019(1903版)正式释出将近一个月,或许已经有用户自主安装更新了,不过微软认为还不够多。微软表示将开始训练机器学习(machine learning)技术,帮助1803版本以前的PC更新...

yisy5566
今天
0
0
前后端分离-前端搭建(Vue)(2)

先安装node.js以及npm 现在基本的node.js都包含有npm,下载安装后, 可以在cmd命令里输入 node -v 和npm -v 分别查看安装的版本 两个都显示了版本就是安装ok 这次我们使用JetBrains WebStor...

咸鱼-李y
今天
0
0
好程序员web前端教程分享三大前端框架相关问题

  好程序员web前端教程分享三大前端框架相关问题,三大前端框架,有没有哪个框架的组件间交互像js的方法传值一样简单? 首先框架组件通信是为了方便组件模块之间进行数据交互的,因为框架的...

好程序员IT
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部