> 前言

最近决定要写一个博客,先后注册了博客园和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. ajax 常用格式

    $.ajax({ url: "/", //请求路径 type: "post",//请求方式 data: "json", //发送请求的数据格 ...

  2. [蓝桥杯][2016年第七届真题]路径之谜(dfs)

    题目描述 小明冒充X星球的骑士,进入了一个奇怪的城堡. 城堡里边什么都没有,只有方形石头铺成的地面. 假设城堡地面是 n x n 个方格.[如图1.png]所示. 按习俗,骑士要从西北角走到东南角. ...

  3. ASP.NET中类的多语言编译

    App_Code 文件夹中同时使用多种语言编程的方法 在web.config文件里,加入如下的配置 <configuration>  <system.web> <comp ...

  4. cookie session token详解

    cookie session token详解 转自:http://www.cnblogs.com/moyand/ 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, ...

  5. 关于cg语言中求法向量 N=mul(worldMatrix_IT,normal); 的随笔

    解释一下标题,N是变换到世界坐标后的法向量,worldMatrix_IT是变换矩阵worldMatrix的逆的转置矩阵,normal就是模型坐标的法向量. 对于点p,我们根据变换矩阵M(即worldM ...

  6. Mac下配置maven和集成到ecclipse(Mac 10.12)

    1.到官网下载maven,http://maven.apache.org/download.cgi 下载好的tar.gz包解压出来,并重命名为maven3,拷贝到/usr/local目录下 2.配置环 ...

  7. Robot Framework自动化测试二(元素定位)

    前言 在学习的过程中,可能会误认为Robot framework 只是个web UI测试工具,更正确的理解Robot framework是个测试框架,之所以可以拿来做web UI层的自动化是国为我们加 ...

  8. spring自定义标签之 自我实现

     引言: 最近心情比较难以平静,周末的两天就跑出去散心了,西湖边上走走,看日落,还是不错的.回来博客上发现,在自定义标签上,最后一步实现忘记加上了.其实,人生的路程中,我们总是实现着自我的价值,让自己 ...

  9. jenkins配置权限不对导致无法登陆或者空白页面解决办法

    找到.jenkins/config.xml文件:替换为:1.<authorizationStrategy class="hudson.security.AuthorizationStr ...

  10. linux下创建网卡配置

    大家都知道linux系统一般作为服务器来用,而且很多情况的设置都是需要通过字符界面修改配置文件来设置.比如说配置网卡IP是修改/etc下面的 ifcfg-eth0,如果配置文件没有了怎么办呢?本经验以 ...