> 前言

最近决定要写一个博客,先后注册了博客园和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. Beginning and Ending the Speech

    Beginning and Ending the Speech Just as musical plays need appropriate beginnings and endings, so do ...

  2. 02. css3有哪些新特性?

    2.css3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  3. Angular material mat-icon 资源参考_File

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  4. my.工坊_ZZ

    1.查了下,可以将 考古升上去,但是 还是使用 2级的考古技能,这样比较赚,高级的反而不赚.但是看到有人说 考古升到 3/4 不能再用 洛阳铲 了. 于是有了两种情况,我暂定的做法:先将 考古升到2级 ...

  5. 【OpenCV-Python】-几何变换

    涉及函数: cv2.getPerspectiveTransform()cv2.warpAffine() 接收的参数是2✖️3的变换矩阵cv2.warpPerspective() 接收的参数是3✖️3的 ...

  6. 配置idea解决乱码

    在项目开发过程中,我们一般希望在修改完代码之后不重启项目即可提现出修改的结果,那么热部署项目就显得十分必要了.在idea中将项目热部署至tomcat中的方法如下: 首先打开tomcat配置界面,在se ...

  7. CentOS7 wget 安装Redis,开机启动配置

      安装 GCC yum install gcc yum install tcl 安装wget yum install wget 1. 下载Redis wget http://download.red ...

  8. selenium+python(模块化驱动测试)

    模块化驱动测试,就是借鉴编程语言中模块化的思想,把重复的操作独立成功公告模块,懂用例执行过程中需要用到这一模块操作时则被调用,这样可以极大的消除重复从而提高测试用例的可维护性 下面具体以126邮箱为例 ...

  9. 带有Apache Spark的Lambda架构

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 目标 市场上的许多玩家已经建立了成功的MapReduce工作流程来每天处理以TB计的历史数据.但是谁愿意等待24小时才能获得最新的分析结果? ...

  10. 使用idea开发工具,nginx服务部署Extjs6,SpringBoot项目到服务器

    编译ExtJs文件 1.输入命令 2.开始编译 3.找到编译后的文件 E:\idea_project\BaiSheng_Model\fin-ui\build\production\Admin 4.将文 ...