github+jekyll 搭建博客最全教程(一次性完成)

介绍

 Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的

 使用 Jekyll 搭建博客之前要确认下本机环境,Git 环境(用于部署到远端)、Ruby 环境(Jekyll 是基于 Ruby 开发的)、包管理器 RubyGems
  如果你是 Mac 用户,你就需要安装 Xcode 和 Command-Line Tools了。下载方式 Preferences → Downloads → Components。

  Jekyll 是一个免费的简单静态网页生成工具,可以配合第三方服务例如: Disqus(评论)、多说(评论) 以及分享 等等扩展功能,Jekyll 可以直接部署在 Github(国外) 或 Coding(国内) 上,可以绑定自己的域名。Jekyll中文文档Jekyll英文文档Jekyll主题列表

安装Railstaller

这个安装直接按照默认的提示指导安装就可以了
补充一下这步遇到的坑,安装完成后,在dos窗口运行ruby,说没有这个命令,这是因为你的railstaller默认把环境变量设置在了用户变量的窗口里,也就是你的用户变量里也有一个Path,你把用户变量的Path里的关于ruby,jekyll等路径复制到下面的环境变量窗口里的Path上,注意一定要和其他变量用分号;隔开。

Jekyll 环境配置

安装 jekyll

$ gem install jekyll     

创建博客

$ cd   
//选择目录
cd d:
进入了d盘  
这时候很多人会自然先创建一个目录如blog目录,然后
cd blog/
进入blog
因为你进入blog目录后,再使用
jekyll new blog
则这个jekyll新建的blog目录会在d盘根目录下的blog目录里
也就是d/blog/blog 
所以你要
cd d:(或者cd ..)
到d盘根目录下,使用
jekyll new blog
这样你的jekyll 新建的东西会在d盘的blog文件夹里
$ jekyll new blog    

进入博客目录

$ cd blog  

启动本地服务

$ jekyll serve

在浏览器里输入: http://localhost:4000,就可以看到你的博客效果了。

so easy !

目录结构

 
Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是: 你用你最喜欢的标记语言来写文章,可以是 Markdown,也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的:

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2017-03-03-github-jekyll.md
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

这些目录结构以及具体的作用可以参考 官网文档

使用我的博客模板

虽然博客部署完成了,你会发现博客太简单不是你想要的,如果你喜欢我的模板的话,可以使用我的模板。

首先你要获取的我博客,Github项目地址,你可以直接点击下载博客,godkun.github.io/ 目录下。

然后进入我的博客 _config.yml 里面。

如何修改【非常重要】!!!

这里写图片描述

看到上面这张图片,如果我们两个的版本不一致,一样也最好改,你需要把我的_config.yml复制到你的blog里的对应文件里,但是图中这部分要用你自己的_config.yml的内容,除了这部分,其他的内容按照你的个人信息改就可以了【这点很重要!】

第二步你需要把我的博客里的除了Gemfile,Gemfile.block【上一步_config.yml,你已经复制过了,这里也不用再复制了】两个文件,
到此,博客初步搭建算是完成了。其他的所有的文件复制到你的blog目录里,点击替换。
至此博客的转移已经全部完成。

测试

进入blog目录后

jekyll serve

出现

这里写图片描述

这个画面就说明成功了

在浏览器输入 127.0.0.1:4000 , 就可以看到godkun博客效果了。

很费解的是

博客部署到远端

  1. 我这里讲的是部署到 Github Page上。。
  2. 创建一个 github 账号,创建一个跟你账户名一样的仓库,
  3. 在让你填写名字的地方写上username.github.io(username指的是你的github用户名)
  4. 比如我的 github 账户名叫godkun
  5. 我的 github 仓库名就叫 godkun.github.io
  6. 创建好了之后

下面这段话是最难理解的

把刚才建立的 blog 项目 push 到 username.github.io仓库里去(username指的是你的github用户名),检查你远端仓库已经跟你本地 blog 同步了,然后你在浏览器里输入 username.github.io ,就可以访问你的博客了。

第一点

要确保你的新建的仓库不要有任何更新的文件,也就是你不要在把blogpush上之前,对其有任何更新,否则,你的blog将会很难push上。你有可能(极有可能)初始化了仓库,也就是里面有.md或者_config.yml文件,那么有的话请全删掉(因为你用我的模版)

第二点

找到你的blog目录,鼠标选中blog目录 右击后,选择 Git Bash
会自动弹出窗口
一次输入:

git init
git config core.autocrlf false
git add .
git commit -m "我的博客"
git remote add origin git@github.com:godkun/godkun.github.io.git
git push origin master

等待最后一步完成就可以啦!

浏览器输入 username.github.io 就会发现,你有一个漂亮的主题模板了。

编写文章

  所有的文章都是 _posts 目录下面,文章格式为 mardown 格式,文章文件名可以是 .mardown 或者 .md。修改名字为 2017-03-02-article1.markdown。
注意:文章名的格式前面必须为 2017-03-03- ,日期可以修改,但必须为 年-月-日-文章标题 。双击 2016-10-16-article1.markdown 打开


---
layout: post
title:  "Welcome to Jekyll!"
date:   2017-03-02 11:29:08 
categories: jekyll update
---

正文...

title: 显示的文章名, 如:title: 我的第一篇文章
date: 显示的文章发布日期,如:date: 2017-03-03
categories: tag标签的分类,如:categories: 随笔

注意:文章头部格式必须是上面那种格式的,…. 就是文章的正文内容。

我写文章使用的是 Cmd Markdown 编辑器,如果你对 markdown 语法不熟悉的话,可以看看作业部落的教程

用 Jekyll 的优点

使用了 Jekyll 你会发现如果你想使用多台电脑发博客都很方便,只要把远端 github 仓库里的博客 clone 下来,写文章后再提交就可以了。

如果你在搭建博客遇到问题,可以加我QQ:357821351 我会尽可能的帮助你的。

如果你安照我说的方法去做,成功了,那就奖励我一个star吧! 我会更加有动力做出我的贡献

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值