有一种强烈的预感 如果真的是想做一个个人博客的人是不会来翻这篇文章的 当然…不想做的更不来浪费时间 我只是单纯的想…以后的我不要忘了这个漫长的流程

首先 你要有一个充足的时间 比如…一个空闲的下午茶时间 其次 你需要有一个Github账号或者、你有一个已购买的注册域名 一个主机服务器等等…

你应该是不会有那些的

这篇文章很有限的介绍怎样基于Mac环境下在Github上部署一个免费的jeklly博客 Jekyll是什么我也不知道 具体请去官网详查

按照官网的安装教程 你可以将jekyll先下载到本地 你需要打开一个黑色背景的小窗口 它叫‘Terminal’ 也许在你的电脑上它已经改名叫‘iTerm’了

第一步 安装jekyll

 gem install jekyll

必要时候请 ‘sudo’

 sudo gem install jekyll

第二步 新建一个jekyll博客

jekyll new my-new-blog

第三步…

请到你的新建博客下

cd ~/PATH/my-new-blog/

第四步 开启jekyll server

jekyll server --watch

不要打小鼓默默碎碎念为什么要加watch 我也不知道…

不加watch在编辑中会有莫名的假bug让你误以为自己总是写错 其实可能只是你需要重新 ‘ctrl+c’ 再 ‘jekyll server’重新开启一下

接着你就能在浏览器中的’localhost:4000’看到你的页面了 应该跟下面一样

image

然后嘛…我们要来先看一下刚刚我们 ‘new’ 的这个jeyll文件夹里面有什么 下面这个就是你的文件夹


├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
|   └── head.html
├── _layouts
|   ├── default.html
|   └── post.html
|   └── page.html
├── _posts
|   ├── 20015-10-29-welcome-to-jekyll.markdown
├── _data
|   └── members.yml
├── _sass
|   ├── base.scss
|   └── layout.scss
|   └── syntax-hoghlight.scss
├── _css
|   ├── main.scss
├── _site
├── feed.xml
└── index.html

好，我们先来看一下最基本的‘.yml’配置文件 在这个configuration文件中包含了网页的基本信息 诸如你的网页名称之类的 其中 ‘baseurl’这一项需要特别注意 最后我们上传到Github page上面需要特别注意这一项的设置 在本地时我们不要做修改 将 ‘baseurl’这一项保持

baseurl=""

jekyll默认的用liquid template来定义网页界面 我们来看第二和第三个子文件夹 ‘ _includes’ 和 ’ _layout‘ 在’_includes‘中的三个’html‘文件被分别引用安排在页面的不同位置 ‘_layout’中的’html’文件就是用来定义这些界面安排的

接下来你所看到的这个文件夹’ _posts’就是存放所有博客的地方 jekyll用markdown文件来让你专注于写作这件事情 所有在’ _posts’文件夹中的文件都以markdown文件形式存在 而对于你来说 写博客只需要将文字简单的输入完成思想到文字形式的转换就可以了 推荐一个Mac上我比较常用的markdown文本编辑器 ‘Mou’ 当然markdown编辑器还有很多 或许你平时已经习惯于用文本编辑器来写代码 sublime vim也可以作为写博客的好手 只要你去认真搜索一下相关的插件

最后对于这个本地正常运行的静态文件博客 你需要做的也就是添添补补把显示页面变成你喜欢的样子 这些你将以修改’ _sass‘和 ‘_includes’文件夹中的文件来完成 如果你暂时还没有什么做网页的经验那么CSS也就无关紧要了 五搜索一下你想要的页面Template吧 这里有很多别人做好的主题可供下载直接使用

当然 除了很多ruby的插件可以让你的博客完成更多的事情以外 原生的jekyll也提供了一些基本的功能 诸如页面分页pagetination

pagetination的具体官方文档可以在这里 用法相当简单 这是一个可以让你的’index‘主页分页显示你的博客 这时我们需要打开configuration文件也就是开头所讲的 ‘ _config.yml’文件 在该文件后面加上：

gems: [jekyll-paginate]
paginate: 5
paginate_path: "/blog/page:num/"

这里面 ‘paginate: 5’代表了每页显示5个博客 接下来paginate会自行generate出第二页第三页…直到你’ _posts ‘ 文件中的最后一个博客 而所设定的路径也就是 ‘ paginate_path ‘就是生成的第二页第三页的URL地址

接下来你会需要这些代码放在你的’index.html’文件中以便看到paginate的效果



{% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
  {% else %}
    <span>&laquo; Prev</span>
  {% endif %}

  {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      <em>{{ page }}</em>
    {% elsif page == 1 %}
      <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
  {% endfor %}

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}

以上这些都能在上面的官方文档链接中找到 虽然默认的可能不符合你的审美 但是基本实现了翻页的功能

接下来就可以开始上传到你的Github page上 当然你确实需要一个Github账号 新建一个repository 创建一个新的Github page

重新打开你的’ _config.yml’ 文件将原来空的baseurl换成 ‘ /新建的Github repository地址名字/ ‘ 比如你的Github page的URL为 ‘YOUR_NAMW.github.io/PAGE_NAME/’ 那么你的baseurl在这里就应该是 ’ /PAGE_NAME/‘

将本地的文件上传到你的Github上之后 一切似乎就差不多准备就绪了

最后你就可以开始专注于你的博客了….

好吧、我承认这样实在是太麻烦了 但是…万一你也很感兴趣想做一个可以去看一下 反正也花不了太长的时间