聊聊起初

每次看到大牛们的博客,都会激起一颗一定要搭建自己博客的心,毕竟有着一颗向大牛们看齐的心。但是一直不知道如何下手,从最初的csdn写写博客到在github上建立仓库写代码分享,虽然也能够记录一些事情,但是总感觉缺少点什么——对,就是像是这东西并不是自己的。后来偶然机会知道了github的gh-pages功能可以搭建个人博客,然后兴致冲冲地去折腾了一番,但是了解到并不能搭建后台,突然间又像浇了一盘冷水一样,知道现在都还存留着这个博客的残骸,看这里http://rynxiao.github.io/blog/#/

之前是想着用react搭建前台页面,后台用bmob,但是放置久了,心也就冷了,索然不做了。最近才发现原来github的gh-pages也可以使用jekyll来搭建,好吧,怪自己孤陋寡闻。然后就试着了解了一下jekyll,也就是这博客的由来。

经历过程

闲话说了,聊聊经历过程吧,顺便记录自己踩下的坑。本人是在windows上进行操作,至于其他平台上的操作,请小伙伴们自行搜索。

搭建博客有两种安装过程:1.使用jekyll搭建;2.从jekyll模板中找到一个自己喜欢的,fork进自己的博客,然后修改_config.yml文件,下面分别来讲讲两种方式的搭建。

一、使用jekyll服务搭建

1.1 安装ruby以及ruby相关工具(DevKit)

由于jekyll是基于ruby语言开发的,因此我们需要安装ruby以及ruby相关的工具(DevKit)。具体的ruby可以到官网上去下载,不过毕竟是国外网站,如果没有好的翻墙工具还是比较慢的。这里我已经准备好了,点rubyDevKit下载。点击exe文件进行自定义目录安装。安装完成之后,确保ruby的环境已经配置到了系统的变量中。比如我的DevKit安装目录是:D:\develop\DevKit。进入DevKit目录,输入如下命令:

C:\Users> cd D:\develop\DevKit

C:\Users> D:

D:\develop\DevKit> ruby dk.rb init

D:\develop\DevKit> ruby dk.rb install

可以使用gem -vruby -v来确认是否已经安装成功

1.2 更改gem sources

使用gem sources发现是https://rubygems.org/,国外网站的通病就是下载很慢,因此我们需要替换一个国内的源。

gem sources -add https://gems.ruby-china.org/ --remove https://rubygems.org/ 替换源

gem sources -u 更新缓存

gem sources 查看替换后的源

看到更新之后的源被替换成了http://gems.ruby-china.org/,没错,就是http,我试了用https一直是不成功的。

1.3 安装jekyll

经过上面两步之后,我们就可以安装jekyll了。调用命令:

gem install jekyll

之后使用jekyll -v来查看jekyll版本,可以看到我的版本是3.4.0。记录一下,本人并没有安装3.0.0以前的版本,这是在网上看到的:

这里稍微强调一下,这个版本和之前的2.x. x版本有些许不一样,可能在后面_config.yml的写法上可能有差异,不过没关系,这并不影响我继续前进

1.4 创建博客

至此我们就可以用jekyll来创建博客了,具体命令如下:

jekyll new myblog

cd myblog

jekyll server

然后在http://127.0.0.1:4000端口来查看你创建的博客。

1.5 可能会遇到的坑

  • 端口占用

看到jekyll启动服务的4000端口已经被占用,我们需要找到占用的程序,然后干掉它。

// 1.查看所有的端口使用情况,显示PID

netstat -ano 

// 2.找到端口被占用的PID,比如PID为14325

tasklist /svc /FI "PID eq 14325"

// 3.打开任务管理器,找到相应的程序,杀掉就好

// FoxitProtect.exe 默认会绑定4000端口,因此杀掉这个进程就行

如下图,正常启动如下:

在浏览器中输入127.0.0.1:4000就可以看到我们的博客模样:

1.6 后话

这只是jekyll提供的最基本的博客原型,当然你可以更改其中的样式、结构来变成自己喜欢的模样,同时还可以安装高亮插件、数学公式插件等等,这里就不再赘述,请小伙伴们自行搜索安装。

jekyll的目录结构,最重要的就是_includes,_layouts,_posts

_config.yml : 配置文件,用来定义你想要的效果,设置之后就不用关心了。

_includes : 可以用来存放一些小的可复用的模块,方便通过{ % include file.ext %}(去掉前两个{中或者{与%中的空格,下同)灵活的调用。这条命令会调用_includes/file.ext文件。

_layouts : 这是模板文件存放的位置。模板需要通过YAML front matter来定义,后面会讲到,{ { content }}标记用来将数据插入到这些模板中来。

_posts : 你的动态内容,一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定,必须是2012-02-22-artical-title.md这样的形式,MARKUP是你所使用标记语言的文件后缀名,根据_config.yml中设定的链接规则,可以根据你的文件名灵活调整,文章的日期和标记语言后缀与文章的标题的独立的。

_site : 这个是Jekyll生成的最终的文档,不用去关心。最好把他放在你的.gitignore文件中忽略它。

2.在github中展示你刚才搭建的博客

2.1 注册一个github账号

比如我的github账号名称就是rynxiao,注册请点击这里https://github.com/

2.2 配置ssh
  • 安装git客户端

安装地址 https://git-scm.com/download/win,快一点可以直接在百度上搜索下载。

  • 检查是否生成了ssh key

如果生成了ssh key,那么会在windows的C盘用户目录下生成一个.ssh的文件夹(比如我的地址就是C:\Users\huyh.ssh),如果没有,则进行下一步。

  • 在本地创建ssh key
ssh-keygen -t rsa -C "yuzhongzi91@sina.com" //这里以我的邮箱为例子,自行替换
  • 将公钥中的内容复值到github中的ssh keys中

连续三次回车之后会在.ssh文件夹中生成id_rsa(私钥)和id_rsa.pub(公钥),使用编辑工具打开id_rsa.pub,复制内容。

进入自己的github主页,点击settings -> SSH and GPG keys -> New SSH key -> 填写title以及复制刚才公钥中的内容

  • 验证

在cmd中输入命令,显示出自己的用户名,则说明已经成功连上github。

ssh -T git@github.com

  • 设置git的username和email
git config --global user.name "rynxiao"

git config --global user.email "yuzhongzi91@sina.com"
2.3 上传自己的代码到github仓库

进入自己的github主页,然后新建一个仓库,名称叫做你的用户名.github.io,例如我的就叫做Rynxiao.github.io

然后进入你本地的博客目录,例如是myblog,输入如下命令,下面以我的用户名为例:

git init                                                                // 初始化git仓库

git add .                                                               // 添加文件夹中的所有内容到本地仓库

git commit -m "first commit"                                            // 添加评论

git remote add origin https://github.com/Rynxiao/Rynxiao.github.io.git  // 添加远程github仓库地址

git push -u origin master                                               // 提交本地仓库代码到远程仓库

连上仓库之后会让你输入用户名和密码,然后就可以提交代码了。然后在浏览器中输入Rynxiao.github.io,就可以看到我们在本地中搭建的博客样子了

二、复制别人现有的博客模板

  • 进入http://jekyllthemes.org/,挑选一个自己喜欢的模板
  • 进入主页,然后fork至自己的仓库下
  • 进入自己github主页,找到刚才的那个仓库,然后点击settings,更改名称,格式为你的账户名.github.io,例如我的就叫Rynxiao.github.io
  • 更改仓库中的config.yml文件,换成自己的信息。详细的更改配置可以在模板的主页中读取,一般都会有介绍
  • 在浏览器中输入你的账户名.github.io,就可以看到你喜欢的博客模样了

参考链接

https://bigballon.github.io/posts/jekyll-github.html

http://blog.csdn.net/u014015972/article/details/50497254

使用github+jekyll搭建个人博客的更多相关文章

  1. 使用 github + jekyll 搭建个人博客

    github + jekyll 本地写markdown,然后push到github,就成了博客 其实我一早就知道这两者可以搭建个人博客,因为本人有个很好的习惯——每天都会去看看一些热门文章,了解行业最 ...

  2. 使用GitHub Pages+Jekyll搭建个人博客

    GitHub Pages 免费无限容量的站点数据托管工具(国内访问速度较慢),内置Jekyll服务,能将特定名称的代码仓库动态编译为静态网页 Jekyll 基于Ruby的静态网页生成系统,采用模板将M ...

  3. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  4. 使用github + Octopress 搭建免费博客 + 碰到问题的解决方法

    使用github + Octopress 搭建免费博客,先说碰到的问题,具体创建方法见下面. 问题1, 添加ruby淘宝链接问题,显示无法获取, 解决: source “http://ruby.tao ...

  5. 使用github pages搭建个人博客

    一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...

  6. Octopress + GitHub Page 搭建个人博客

    Tips:博客已搬家,新地址:http://wanxudong.top 首先说明两个关键术语: Octopress Octopress是基于 Jekyll 的博客框架.他们的关系就像 jQuery 与 ...

  7. 在github上搭建个人博客并在线更新

    换博客比更博还勤的我终于决定写一篇博客搭建教程了.. FAQ Q:\(hexo\)需要本地编译.\(jekyll\)虽然可以直接上传\(md\)..但是如果在github上直接编译也太难受了叭,毕竟不 ...

  8. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  9. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

随机推荐

  1. robotframework自动化系列:新增流程

    刚接手项目的时候,要求所有流程在上线之前必须确保正向操作是正确的:这个时候又有新的模块需要测试,所以引入自动化测试是非常有必要的!通过对比,尝试使用RF进行自动化的回归测试. 测试中最常见的操作就是增 ...

  2. AsciidocFX编辑器小贴士

    I. AsciidocFX支持UML生成: 要生成UML,记得要下载GRAPHVIZ,并配置GRAPHVIZ_DOT环境变量,路径是Graphviz\bin\dot.exe. II. Asciidoc ...

  3. SimpleMembership续

    自上篇SimpleMembership之后,好久不用,也没有研究,最近把以前写的老程序改进下,原有用户系统升级为SimpleMembership,在升级的过程中发现还有许多问题,经过几天的试验,小有收 ...

  4. Spring 高级依赖注入方式

    1.处理自动装配的歧义性 1.1 标记首选的bean ​ 使用@Primary 来说明一个bean是首选的. @Component @Primary public class GuoRongCD im ...

  5. ReentrantLock可重入锁的使用场景

    摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a.用在定时任务时,如果任务执行时间可能超过下次 ...

  6. 小程序基于疼讯qcloud的nodejs开发服务器部署

        腾讯,疼讯,很疼. 请慎重看腾讯给出的文档,最好做一个笔记. 我只能说我能力有限,在腾讯云小程序的文档中跳了n天. 最后还是觉得记录下来,以防止我的cpu过载给烧了. 此文档是对<小程序 ...

  7. app打包常用操作

    1.修改appId android:打开build.gradle文件 找到defaultConfig{applicationId 'ceshi'} 修改测试.android studio会提示. Gr ...

  8. 《java.util.concurrent 包源码阅读》07 LinkedBlockingQueue

    这篇文章来说说稍微复杂一些的LinkedBlockingQueue.LinkedBlockingQueue使用一个链表来实现,会有一个head和tail分别指向队列的开始和队列的结尾.因此Linked ...

  9. 《java.util.concurrent 包源码阅读》24 Fork/Join框架之Work-Stealing

    仔细看了Doug Lea的那篇文章:A Java Fork/Join Framework 中关于Work-Stealing的部分,下面列出该算法的要点(基本是原文的翻译): 1. 每个Worker线程 ...

  10. Android开发之漫漫长途 Ⅵ——图解Android事件分发机制(深入底层源码)

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...