Jekyll静态网站后台引擎使用教程

以前总想搭建一个自己的个人网站,由于不懂php后台,所以在点点网开过自己的博客,后来慢慢向程序员转变,点点网的博客已经不能满足这个职业特定的需求,于是用worldpress搭建了自己的第一个网站,鼓捣过几天worldpress,从购买域名空间,修改空间域名解析,添加模板,修改模板,了解了worldpress的强大之处,但是鼓捣玩了worldpress之后,没有了写文章的动力,也没有用足够的时间来管理,以至于这个网站夭折。直到现在又开始鼓捣Jekyll静态网站后台引擎,下面就讲讲Jekyll的学习,以及在用Jekyll创建网站的时候遇到的问题。

1.Jekyll基于github.com或者bitbucket.org,后者我没有验证,应该也是支持的。不需要数据库,不需要后台知识,用Jekyll搭建个人中小型网站就是这么简单。

2.搭建流程(因为我是在windows上安装Jekyll,所以会比较麻烦):

注册一个github.com账号,记住自己的用户名和注册时的邮箱,会在git shell验证时用到。

因为Jekyll是基于Ruby写的,所以首先安装Ruby环境,和Ruby包管理工具gem

①Ruby安装地址,根据自己的系统选择32和64bit,在链接的页面同时安装DEVELOPMENT Kit

下载安装后需要配置Ruby的环境变量,在系统的高级属性里面设置系统的Path,之后,可以在控制台检查Ruby是否安装成功。输入Ruby -v即可。

ruby dk.rb init//初始化Ruby

在Ruby安装的config文件里面配置一下Ruby的安装目录:

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - D:/ruby19trunk
# - D:/ruby192dev
#
---
- D:/Ruby

②安装DEVELOPMENT Kit工具使用的命令行

 ruby dk.rb install

③在命令行工具中输入gem install jekyll来安装Jekyll。输入Jekyll -v检查是否安装成功。如果成功会返回版本号。

④同时,需要安装python环境,下载2版本或者3版本都可以。Python安装地址
.之后就可以安装博客所需要的工具了。

  4.1需要安装一个easy_install插件

  4.2安装自己喜欢的高亮工具(highlight),例如pygments、rouge。在你的工程目录的_config.yml里面需要设置:highlighter:rough或者highlighter:pygments,不然会在生成项目是出错。

easy_install Pygments

⑤创建一个简单的默认博客命令:

jekyll new Blog
 cd Blog      //cd是一个常用命令,到达相应的文件夹
 jekyll serve  //使用serve和server是一样的效果

在你的localhost:4000就会有一个默认的博客模板产生。

期间会遇到一些错误:

1.配置文件报错

D:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/posix-spawn-0.3.9/lib/posix/spawn.rb:164
: warning: cannot close fd before spawn
'which' is not recognized as an internal or external command,
operable program or batch file.
 Liquid Exception: undefined method `[]' for nil:NilClass in _posts/2014-08-01-
welcome-to-jekyll.markdown
jekyll 2.2.0 | Error: undefined method `[]' for nil:NilClass

解决办法:在项目的配置文件里面需要设置highlighter:rouge/pygments,传送门

2.下载RubyGems问题

ERROR: Could not find a valid gem 'jekyll' (>= 0), here is why:
      Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server ce
 rtificate B: certificate verify failed (https://rubygems.global.ssl.fastly.net/quick/Marshal.4.8/jekyll-1.3.0.gemspec.rz
 )

解决办法:下载安全证书文件,在命令行运行下面的命令,如果提示curl不是外部或内部指定命令,则是你的电脑没有安装curl插件,需要下载该插件安装,很棒的一个教程,传送门

 curl http://curl.haxx.se/ca/cacert.pem -o cacert.pem

3.安装Ruby不成功,提示错误,可以试试淘宝提供的国内镜像传送门

那么怎么通过github创建自己独有的个人网站呢?

1.下载git客户端,下载地址,下载后会有github图形界面客户端和git shell命令行工具两个,咱们使用git shell。

2.在git shell客户端输入

git init

来初始化项目;

git checkout --orphan gh-pages

创建一个gh-pages分支,该分支用来存放你的博客的所有文件,并且只能为该名称,因为github.com默认创建分支就是该名称;

git add .
git commit -a -m'just a test'

开始准备发布项目,记住,不要漏掉后面的英文小数点;

git remote add origin https://github.com/username/projectName.git
git push origin gh-pages

这样的话你的项目就创建成功。

(0)

相关推荐

  • Jekyll静态网站后台引擎使用教程

    以前总想搭建一个自己的个人网站,由于不懂php后台,所以在点点网开过自己的博客,后来慢慢向程序员转变,点点网的博客已经不能满足这个职业特定的需求,于是用worldpress搭建了自己的第一个网站,鼓捣过几天worldpress,从购买域名空间,修改空间域名解析,添加模板,修改模板,了解了worldpress的强大之处,但是鼓捣玩了worldpress之后,没有了写文章的动力,也没有用足够的时间来管理,以至于这个网站夭折.直到现在又开始鼓捣Jekyll静态网站后台引擎,下面就讲讲Jekyll的学习

  • 用PHP制作静态网站的模板框架

    模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运用模板控制页面布局. 提纲: =================================== 分离功能和布局 避免页面元素重复 静态网站的模板框架 =================================== 分离功能和布局 首先我们来看看应用模板的两个主要目的: 分离功能(PHP)和布局(HTML) 避免页面元素重复 第一个目的是谈论得最多的目的,它设想的情形是

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

    在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一) 1. 引入路由工具vue-router,切换视图 # 安装vue-router cnpm install vue-router --save-dev 2. 使用vue-router main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routeConfig f

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

    1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

  • 用PHP制作静态网站的模板框架(一)

    模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运用模板控制页面布局. 提纲: =================================== 分离功能和布局 避免页面元素重复 静态网站的模板框架 =================================== 分离功能和布局 首先我们来看看应用模板的两个主要目的: 分离功能(PHP)和布局(HTML) 避免页面元素重复 第一个目的是谈论得最多的目的,它设想的情形是

  • js iframe网站后台左右收缩型页面脚本

    mobaihuo网站后台免费提供_我们_www.jb51.net .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .a2{BACKGROUND-COLOR: A4B6D7;} mobaihuo网站后台免费提供 if(self!=top){top.location=self.location;} function switchSysBar(){ if (switchPoint.innerTe

  • 用PHP制作静态网站的模板框架(四)

    静态网站的模板框架 首先,我们象前面一样为所有的页面公用元素以及页面整体布局编写模板文件:然后从所有的页面删除公共部分,只留下页面内容:接下来再在每个页面中加上三行PHP代码,如下所示: <?php <!-- home.php --> <?php require('prepend.php'); ?> <?php pageStart('Home'); ?> <h1>你好</h1> <p>欢迎访问</p> <img

  • 基于VuePress 轻量级静态网站生成器的实现方法

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. VuePress是怎样运作的 一个VuePress应用实际上就是基于Vue.VueR

  • 阿里云快速搭建一个静态网站的方法步骤

    前言: 作为一个初级程序员,都梦想着自己能搭建一个自己的个人网站,同时展示给其他人浏览.如果你刚开始接触可看一下,我建议先给自己的静态网站发布到服务器上去. 准备: 1.申请注册一个服务器 申请注册一个云服务器,可以阿里云.腾讯云等等.学生党使用服务器有优惠哈~ 2.配置ftp\ssh环境 ps:我知道的是阿里云已经把ftp和ssh配置好了,如果有可以跳过此步骤. 具体步骤: 为了方便你后期的操作和使用,你需要配置ftp和ssh环境.(ftp:文件传输协议,通俗说就是上传下载文件:ssh:安全外

  • 基于vue-ssr的静态网站生成器VuePress 初体验

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. 参考官方文档可知该项目有一下特点: 内置markdown(基础功能) 支持PWA 集

随机推荐