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

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、付费专栏及课程。

余额充值