Octopress 搭建静态博客网站

一、环境配置:Git、Ruby、DevKit、MarkdownPad

1、Git(版本管理,将代码托管到GitHub)

2、Ruby+DevKit(生成静态网页)

3.MarkdownPad(markdown语法文本编辑器)

二、安装:

1、安装文件准备

有些软件官网国内速度过慢,下载容易失败,国内可以使用百度网盘下载 密码:31hx

2、Git和MarkdownPad直接点击下一步即可,awesomium软件是用于启用MarkdownPad的实时预览功能。awesomium也是直接一路点击下一步。

出现了图示Git就安装成功了

3、Git环境变量的设置:

设置好用户名、邮箱,以后再提交的时候就能看到是哪个用户提交的,或者这个用户的邮箱信息

4、生成一个与GitHub进行交互传输数据的秘钥,本次选用ssh秘钥,生成后会保存到C盘用户文件夹中.ssh文件夹中

如果是第一次使用可能没有.ssh文件夹,会自动生成一个文件夹

生成两个文件id_rsa(私钥,私密保存)和id_rsa.pub(公钥,提交到GitHub上)。

(1)打开id_rsa.pub文件,复制内容,到GitHub上面,打开settings->SSH Keys 新添加一个key保存即可。

(2)测试公钥是否在GitHub上面配置保存成功

输入:ssh –T git@github.com

输入:yes

(这样会将本地的私钥和GitHub上面的公钥进行对比,看是否加密过的数据能进行正确的解密)

出现成功信息,保存成功。

4、Ruby的安装和配置:

未进行安装之前,在Git Bash中输入ruby命令会提示“bash: ruby: command not found”

(1)安装Ruby

一定要注意勾选第二项,将Ruby添加到环境变量中。

安装完成之后,打开Git Bash,输入ruby –version,出现版本号,安装成功。

(2)安装DevKit,这是一个自解压的安装包,选择解压目录,进行解压。

(3)将Ruby和DevKit进行关联绑定:

进入刚刚解压好的DevKit目录,右击打开Git Bash窗口界面,将dk.rb初始化:

目录下生成了一个配置文件config.yml,将其打开:

将Ruby的安装目录添加到最后,一定要添加正确:

注意:路径前面还有一个“-”,上面一行有“- - -”,也不能少

然后运行:ruby dk.rb install

5、安装Octopress并设置默认主题:

(1)克隆Octopress到本地:

git clone git://github.com/imathis/octopress.git octopress

进入Octopress官网,点击首页最下面start here

可以看到命令提示,

在桌面上打开git bash命令窗口,粘贴Octopress git命令 clone到本地

打开文件夹,可以看到这里面还没有source和XX文件夹,命令行窗口中cd 进入Octopress根目录

(2)安装依赖项:

gem install bundler

如果没有科学上网,软件下载会失败,也可以修改软件源到国内

gem sources --add https://gems.ruby-china.org/

会提示SSL连接错误,解决办法:

下载证书:http://curl.haxx.se/ca/cacert.pem,放置在Ruby安装目录中,然后再环境变量里设置 SSL_CERT_FILE 这个环境变量,并指向 cacert.pem 文件。

在cmd里 输入set SSL_CERT_FILE=ruby路径\cacert.pem

如果提示SSL证书问题:

这时运行gem install bundler进行安装就可以了。

安装bundler软件包:

bundler install

安装成功提示

(3)安装并使用默认主题

rake install

Octopress目录下多了三个文件夹source(写源代码的目录)、sass、public(生成的静态的博客站点文件存放)

测试一下生成站点:

rake generate

本地启动站点:

rake preview(第一次加载比较慢)

成功!!!

三、优化:

chrome开发者工具调试发现有些文件加载缓慢,甚至加载失败(国外CDN站点)

因此,要将其换为国内站点:

(1)jQuery.min.js换成百度的CDN点:

(http://libs.baidu.com/jquery/1.9.1/jquery.min.js)

(2)widgets.js下载下来百度网盘下载 密码:ug6n

上传到自己的服务器上,用notepad++打开所有模板html文件,查找到引用widgets.js的地方,更改为自己的服务器文件地址。

保存,停掉启动的网站,重新生成网站(rake generate),启动一个网站(rake preview)

成功解决,速度提高!!

 

视频教程:极客学院

feihu分享到:

          

You may also like...

Scroll Up