> 前言

最近决定要写一个博客,先后注册了博客园和CSND的博客,但是他们的界面主题都不是很符合自己的要求,还没有足够个性化的发挥空间,遂决定自己建一个博客。

网上找了一下教程,感觉都不太详细,容易踩坑,所以就想详细一下自己的搭建过程,不能算作教程吧。

希望大家踩少点,如有错误,各位看官老爷们拍轻点。

既然选择了自己建一个,就需要选择一个合适自己用的博客引擎了,主要就这几大引擎:

  • wordpress
  • jekyll
  • octopress
  • hexo
  • 还有FarBox和Ghost,这两个没有太多了解就不说了

wordpress:

老牌博客引擎,网上很多前人踩过的坑

功能强大,需要服务器数据库,插件丰富,扩展功能方便

搭建需要基本PHP和MySQL知识,搭建好后就傻瓜式操作

wordpress相对臃肿,迁移麻烦

jekyll:

静态网页生成引擎,不需要数据库

搭配github或gitcafe就可以不用自己的服务器

用Ruby开发,需要基本GIT知识,支持markdown语法

octopress:

基于jekyll的静态网页生成引擎,类似于javascript和JQuery的关系,就是已经打包好了一些博客框架

hexo:

一样是静态网页生成引擎,不需要数据库

搭配github或gitcafe就可以不用自己的服务器

用node.js开发,作者是台湾大学生@tommy351

相比jekyll,安装和命令更简单,生成速度更快

同样需要基本GIT知识,支持markdown语法

这个是作者的网站 Zespia 可以围观一下


只有最适合自己的,没有最好的,根据自己的需要选择,我这里据说jekyll比较能折腾(坑多),所以就选用了jekyll。

我是在window下搭建的,所以linux和mac的老爷们就去下家看看吧。

> 配置环境

>> 安装Ruby

window要用 Rubyinstaller 安装(linux和mac可以直接在官网下载,因为Ruby对window不太友好)

安装时把下面两个勾 勾上

安装好后,运行cmd.exe,输入 ruby -v,出现版本号,则安装成功

>> RubyGems

用RubyInstaller安装Ruby之后都自带Gems的,有需要可以在这里下载 RubyGems

>> 解压DEVELOPMENT KIT

下载 DEVELOPMENT KIT,就在rubyinstaller下载页面的最下面。

下载好后解压到随意位置

进入刚才解压的文件夹,空白处 Shift + 右键打开 命令窗口(cmd.exe),执行以下两条命令

ruby dk.rb init
ruby dk.rb install

如果安装的是64bit的Ruby,可能会报错,需要修改dk.rb文件

用文本编辑器打开,在 REG_KEYS中添加一条:

REG_KEYS = [
'Software\RubyInstaller\MRI',
'Software\RubyInstaller\Rubinius',
'Software\Wow6432Node\RubyInstaller\MRI'
]

>> 换镜像源

因为墙的问题,需要把原来的镜像源换了,我目前是用阿里云的镜像,有人用淘宝的,但我那时不行了,可能以后阿里云的也会失效。

执行命令

gem sources --add http://mirrors.aliyun.com/rubygems/ --remove http://rubygems.org

>> 升级Gem

换了镜像后,执行命令:

gem update

然后等升级完成,这个步骤需要联网

>> 安装bundler

如果配置过Jekyll环境或者安装过bundler,可以跳过这步。

更新完了,然后安装bundler,执行命令:

gem install bundler

成功安装bundler后,bundler 也需要换镜像源

> 安装Jekyll

前面弄了这么就,终于可以入正题了,执行命令:

$ gem install jekyll

Jekyll需要的gem包都会自动安装

> 创建博客站点

打开你需要创建博客的目录下,比如我在E盘下创建,执行创建博客的命令,等待完成:

jekyll new yourBlogName

> 开启服务器

创建完博客站点后,用cd命令进入博客的目录下,执行以下命令:

cd yourBlogName
jekyll serve --watch

不加--watch则不会检测文件夹内的变化,修改文件后需要重新启动jekyll。

Jekyll服务器默认端口是4000,所以打开浏览器输入:http://localhost:4000 即可看到生成的博客页面。

> Jekyll目录结构

  Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是: 你用你最喜欢的标记语言来写文章,可以是 Markdown,也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。

  在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。

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

blog
.sass-cache
_posts
2017-04-21-welcome-to-jekyll.markdown
_site
.gitignore
_config.yml
about.md
Gemfile.lock
Gemfile
index.md

根据实际需要,可能还需要创建如下文件或文件夹:

1、 _includes:用于存放一些固定的HTML代码段,文件为.html格式,可以在模板中通过liquid标签引入,常用来在各个模板中复用如 导航条、标签栏、侧边栏 之类的在每个页面上都一样不变的内容,需要注意的是,这个代码段也可以是未被编译的,也就是说也可以使用liquid标签放在这些代码段中

2、 image和js等自定义文件夹:用来存放一些需要的资源文件,如图片或者javascript文件,可以任意命名

3、 CNAME文件:用来在github上做域名绑定的,将在后面介绍

4、 favicon.ico:网站的小图标

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

到此,博客初步搭建算是完成了

> 使用Jekyll写博文

所有的文章都是放在 _posts 目录下,文件格式为 mardown 格式,要注意文件名的格式前面必须为必须为 年-月-日-文章名,且最好不要用中文。

此文件上的日期跟实际页面显示的日期没关系,页面的日期由YAML头信息中的date来决定(没有date时才由文件名决定)

必须在文章头部添加YAML头信息(YAML front- matter):

---
layout: post
title: "Jekyll和Github搭建个人静态博客"
date: 2016/6/26 13:03:42
categories: original
--- 正文...
  • layout表示使用post布局
  • title 是文章标题
  • date是自动生成的日期

    必须按照y-m-l的语法来写,否则就会出现编译错误,可以只用YYYY-MM-DD来显示日期在后面加上 HH:MM:SS+00:00 来表示更具体的时间
  • categories

    是该文章生成html文件后的存放目录,也就是文章的分类属性,可以在_site/original下找到。(category

    只能添加一个分类属性, categories 可以添加多个分类属性,各属性使用空格隔开)

> 报错处理

常见的报错是Bundler和镜像源问题,上面已经处理好了,一般不会有问题。

>>Error: jekyll-sitemap

这个是因为Jekyll 3.1.1版本的问题,这个版本无法使用jekyll-sitemap,错误信息提示:

Configuration file:...
Dependency Error: Yikes! It looks like you don't have jekyll-sitemap or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-sitemap' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
jekyll 3.1.1 | Error: jekyll-sitemap

解决办法:

  • 打开当前目录下的 _config.yml 文件,把 gems: [jekyll-paginate,jekyll-sitemap] 换成

    gems: [jekyll-paginate] ,也就是去掉jekyll-sitemap。
  • 升级 jekyll 版本

>>其他错误

暂时我遇到的坑就这些了,如果还是报错的话,我推荐大家到各工具的github或stackoverflow上找一下原因:

Ruby问题 (其实大多报错是Ruby的问题)

镜像源问题 (就是有SSLError,connect之类的报错信息)

Jekyll问题stackoverflow

另外还有Jekyll的官网中文网

最后说一句,这个只是自己搭建过程中踩过的坑,分享给大家,不算很好的教程,其实最好的教程是官方文档,Jekyll有中文网,并不用担心英语读不懂。

完.

window下Jekyll建站过程的更多相关文章

  1. FarBox的建站过程

    FarBox的建站过程 本文转自:http://mosir.org/html/y2012/How-to-build-your-website-by-farbox.html 作者: mosir 时间:  ...

  2. SEO 建站过程复盘

    今天在A5看到一篇关于一个牛站的复盘,整个建站过程值得借鉴. https://www.admin5.com/article/20200218/943930.shtml

  3. Python+Flask+MysqL的web技术建站过程

    1.个人学期总结 时间过得飞快,转眼间2017年就要过去.这一年,我学习JSP和Python,哪一门都像一样新的东西,之前从来没有学习过. 这里我就用我学习过的Python和大家分享一下,我是怎么从一 ...

  4. 《Dotnet9》建站-记录建站过程中使用的一些网址

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  5. Drupal建站过程思考——不识庐山真面目,只缘身在此山中

    使用drupal与没有使用drupal,在网站的设计过程上本质是一样的!所以,我们在使用drupal建一个新网站时,要时刻联想自己在没有drupal时是如何设计开发的. 不使用drupal时,我们通常 ...

  6. Hexo建站过程总结

    Hexo 是一个基于 Node.js 快速.简洁且高效的博客框架,可以将 Markdown 文件快速的生成静态网页,托管在 GitHub Pages 上. 由于原来博客的主机费用问题,我没有办法再在那 ...

  7. 利用阿里云Centos7建站过程

    以下可能不尽详述,如有问题欢迎指出 准备过程:1. 阿里云主机一台2.域名一个 3.github个人帐号开始: 1.以root帐号登录云主机 2.安装apache [root@192 ~]# yum ...

  8. jekyll建站详细教程

    Jekyll是一款静态博客生成器,也是github page支持的后台引擎,所以如果你有以下需求,极力推荐使用jekyll搭建博客,>>浏览我的博客 个性化的展示界面,站点逻辑 个性化的域 ...

  9. Web网站建站过程(白嫖)——域名

    目录 1.域名注册商(选一个吧) 2.域名注册 没有域名建啥站? 1.域名注册商(选一个吧) 到时候你们就会想起: ...... 但是我们不用上面的,因为上面的太费Q,我们要用的是-- 2.域名注册 ...

随机推荐

  1. python为何需要虚拟环境--Python虚拟环境的安装和配置-virtualenv

    一 虚拟环境 virtual environment 它是一个虚拟化,从电脑独立开辟出来的环境.通俗的来讲,虚拟环境就是借助虚拟机docker来把一部分内容独立出来,我们把这部分独立出来的东西称作“容 ...

  2. 【转载】Thrift概述

    来自 <https://www.ibm.com/developerworks/cn/java/j-lo-apachethrift/#ibm-pcon> 一个简单的 Thrift 实例 首先 ...

  3. python学习笔记1.3

    温度转换实例 #TempConvert.pyTempStr = input("请输入带有符号的温度值: ")if TempStr[-1] in ['F', 'f']:C = (ev ...

  4. js获取窗口宽度、高度

    1.获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 2.获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen ...

  5. python 库 、包 、模块

    概念: 模块: 模块是一种以.py为后缀的文件,在.py文件中定义了一些常量和函数.模块的名称是该.py文件的名称.模块的名称作为一个全局变量__name__的取值可以被其他模块获取或导入. 模块的导 ...

  6. js中报错"Maximum call stack size exceeded"解决方法

    Uncaught RangeError: Maximum call stack size exceeded 错误直译过来就是“栈溢出”,出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件, ...

  7. GoldenGate安装配置

    GOLDENGATE安装 1. 下载与数据库对应版本的goldengate安装介质. 2. 创建goldengate系统用户,设置用户环境变量,如果是oracle,建议直接使用oracle作为用户安装 ...

  8. leetcode有意思的题目总结

    231. 2的幂 2^3=8 得  8是2的幂 判断一个整数是不是2的幂,可根据二进制来分析.2的幂如2,4,8,等有一个特点: 二进制数首位为1,其他位为0,如2为10,4为100 2&(2 ...

  9. 手写css按钮组

    css: .lf{float:left} .btn{ width:60px; height:24px; color:#fff; border-radius:4px; cursor:pointer; b ...

  10. WPF Window对象的生命周期

    WPF中所有窗口的基类型都是System.Windows.Window.Window通常用于SDI(SingleDocumentInterface).MDI(MultipleDocumentInter ...