利用GitHubPages+jekyll+Markdown搭建个人博客

1,656 阅读5分钟

GitHub Pages

我的个人理解就是,GitHub Pages就是一个小型托管云服务,把自己的项目托管上去,就可以直接访问,所以你还可以把他当做云盘来用(但我觉得这种做法还有有点极端):trollface:

所以今天我们就直接使用他的正规用法。 :lemon:

Websites for you and your projects.

  1. 首先你要创建一个GitHub仓库 什么,你还不知道什么是GitHub,赶紧点击这里。 好吧,你已经是GitHub老司机了,赶紧创建一个username.github.io的仓库。

  2. 然后克隆你的仓库到本地,然后创建一个index.html

git clone https://github.com/username/username.github.io
cd username.github.io
echo "Hello World" > index.html
  1. 将本地仓库的修改push到GitHub上
git add --all
git commit -m "Initial commit"
git push -u origin master
  1. ok,现在你可以通过http://username.github.io访问自己的博客了。

做到了这里,聪明的你,如果恰好又是前端大神,ok,可以不用继续了,开始创造你的博客吧。:watermelon:

jekyll

为什么使用jekyll,它能为我们做什么呢?

个人觉得写博客应该关注博客的内容,而不是一些花里胡哨的东西(其实很多模板也相当好看),所以jekyll为我们提供了便捷的方式,让我们将内容转换为静态的页面。

  • 安装jekyll

gem install jekyll bundler

可能很多人不知道gem命令是什么,那我们就先讲讲gem和budler。:tangerine:

RubyGems 是 Ruby 的一个包管理器,它提供一个分发 Ruby 程序和库的标准格式,还提供一个管理程序包安装的工具。

Bundler相当于多个RubyGems批处理运行。在配置文件gemfilel里说明你的应用依赖哪些第三方包,他自动帮你下载安装多个包,并且会下载这些包依赖的包。

所以,你得先安装好上述东西之后,你就可以愉快的安装jekyll了。 什么,不知道怎么安装,快看这里

  • jekyll创建博客
//创建自己的博客目录
~ $ jekyll new myblog

//进入该目录
~ $ cd myblog

//启动服务
~ $ bundle exec jekyll serve

//然后你就可以访问自己的博客了 http://localhost:4000

下面分析一下你的博客目录。

.
├── _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
└── index.html //也可以用index.md代替
文件/目录 描述
_config.yml 保存配置数据。很多配置选项都可以直接在命令行中进行设置,但是如果你把那些配置写在这儿,你就不用非要去记住那些命令了。
_drafts drafts(草稿)是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。学习如何 使用草稿.
_includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 " include file.ext" 来把文件 _includes/file.ext 包含进来。
_layouts layouts(布局)是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。 这将在下一个部分进行介绍。标签 "content" 可以将content插入页面中。
_posts 这里放的就是你的文章了。文件格式很重要,必须要符合: "YEAR-MONTH-DAY-title.MARKUP"。 永久链接 可以在文章中自己定制,但是数据和标记语言都是根据文件名来确定的。
_data 格式化好的网站数据应放在这里。jekyll 的引擎会自动加载在该目录下所有的 yaml 文件(后缀是 .yml, .yaml, .json 或者 .csv )。这些文件可以经由 `site.data` 访问。如果有一个 "members.yml" 文件在该目录下,你就可以通过 "site.data.members" 获取该文件的内容。
_site 一旦 Jekyll 完成转换,就会将生成的页面放在这里(默认)。最好将这个目录放进你的 ".gitignore" 文件中。
.jekyll-metadata 该文件帮助 Jekyll 跟踪哪些文件从上次建立站点开始到现在没有被修改,哪些文件需要在下一次站点建立时重新生成。该文件不会被包含在生成的站点中。将它加入到你的 ".gitignore" 文件可能是一个好注意。
HTML, Markdown, Textile files 如果这些文件中包含 YAML 头信息 部分,Jekyll 就会自动将它们进行转换。当然,其他的如 .html, .markdown, .md, 或者 .textile 等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。

如果自带的模板满足不了你,可以参考这里

关于模板的使用,就是将别人的仓库拷贝到自己的GitHub仓库,然后修改_posts中的博客内容就好了。

Tips:当你发现一些大牛的GitHub Pages很漂亮很实用,克隆他的仓库到本地,拷贝到自己的仓库,然后你就可以愉快的写自己的博客了。

Markdown

我觉得Markdown其实就是一种标记语言,让你的文本通过简单的标签,变得有序,变得格式化。总之,易学实用,值得入手。

我这里就推荐一个参考地址吧,戳这里

将你创作的Markdown博客文件,放入jekyll仓库的_posts目录下,然后push到GitHub上,完工。

Tips: 在push之前最后先在本地bundle exec jekyll build一下看看有没有问题

好了,到这里一个高逼格,专注于内容的博客系统已经搭建好了,请开始你的创作吧。:strawberry: