Octopress + GitHub Page 搭建个人博客

Tips:博客已搬家,新地址:http://wanxudong.top

首先说明两个关键术语:

Octopress

  • Octopress是基于 Jekyll 的博客框架。他们的关系就像 jQueryjs 的关系一样。
  • 它为我们提供了现成的美观的主题模板,并且配置简单,使用方便,大大降低了我们建站的门槛。

    What is Octopress?(摘自Octopress官方文档)

    Octopress is Jekyll blogging at its finest.

  • Octopress sports a clean responsive theme written in semantic HTML5, focused on readability and friendliness toward mobile devices.
  • Code blogging is easy and beautiful. Embed code (with Solarized styling) in your posts from gists, jsFiddle or from your filesystem.
  • Third party integration is simple with built-in support for Pinboard, Delicious, GitHub Repositories, Disqus Comments and Google Analytics.
  • It’s easy to use. A collection of rake tasks simplifies development and makes deploying a cinch.
  • Ships with great plug-ins some original and others from the Jekyll community — tested and improved.

Note: Octopress requires a minimum Ruby version of 1.9.3-p0.

GitHub Pages

  • GitHub Pages 是 GitHub 提供的一项服务。它用于显示托管在 GitHub 上的静态网页。所以我们可以用 Github Pages 搭建博客,当然我们也可以把项目的文档和主页放在上面。

大致思路是通过Octopress生成本地静态博客网页,然后将静态网页布置到GitHub提供的GitHub Pages上面。

安装


下面是具体的安装步骤(这里使用RVM安装,还可以通过rbenv安装,Octopress给出的官方安装文档:Octopress Setup):

查看ruby版本
1
ruby --version  # 根据Octopress官方文档Ruby必须 >= 1.9.3-p0

 

 

如果ruby版本 >= 1.9.3-p0 ,跳过RVM和Ruby的安装。

安装RVM
1
curl -L https://get.rvm.io | bash -s stable --ruby
 

 

安装Ruby 1.9.3

1
2
3
rvm install 1.9.3
rvm use 1.9.3
rvm rubygems latest
 
 

 

安装 Octopress

将 Octopress的项目clone到本地:

1
2
git clone git://github.com/imathis/octopress.git octopress
cd octopress

 

 

更新ruby源,将官方的ruby源替换成国内淘宝的源。

1
2
3
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

 

 

 

接下来,安装依赖:

1
2
gem install bundler # 若遇权限问题加上sudo重新执行,并输入密码。
bundle install

 

 

最后安装 Octopress

1
rake install       # 安装octopress默认主题
 
 
修改Octopress初始配置
1
2
ls                 # 查看当前目录所有文件
vim _config.yml    # 通过vim编辑主要配置

image

可以看到如下代码:

1
2
3
4
5
6 7 8 9 10 11 12 13 14 15 
# ----------------------- #
#      Main Configs       #
# ----------------------- #
#网站地址,这里是GitHub项目地址,为必填
url: http://userName.github.io #网站标题 title: user的博客 #网站副标题 subtitle: 天行健,君子以自强不息。 #网址作者 author: userName #搜索引擎 simple_search: https://www.google.com/search #网站的描述,出现在HTML页面中的 meta 中的 description description:

 

 

 

 

 

 

 

 

 

 

 

确保在octopress目录,执行命令

1
2
rake generate  # 生成静态站点
rake preview   # 预览静态站点,在http://localhost:4000

 

 

 

在浏览器输入localhost:4000可看到生成的博客。
Tips: 最好把里面的twitter相关的信息全部删掉,否则由于GFW的原因,将会造成页面load很慢。

部署到GitHub Pages上

在 GitHub 上创建一个New repository,Repository name即项目名称命名规则为 userName.github.iouserName必须与用户名称一致。 imageTips:最好不要勾选README,免得同步到远程仓库的时候需要做额外的pull操作。


将本地代码仓库同步到GitHub.

1
rake setup_github_pages

 

 

绑定远程仓库

1
git@github.com:your_username/your_username.github.io.git  # 或者https://github.com/your_username/your_username.github.io

 

 

创建一篇文章

1
rake new_post["title"]

 

 

生成新的文章在source/_posts/目录下

1
2
cd source/_posts   # 命令行cd到posts目录下
open ./            # 打开目录文件夹

 

 

 

这个时候会在目录里看到.markdown后缀的文件,我们可以通过一些第三方的Markdown编辑器打开。在这里我使用的是Mou(下载地址:这里),Mou附带实时预览,文档说明里也将markdown语法说的很详细,这里不再赘述。

编辑完成后生成静态站点,终端执行命令:

1
rake generate     # 此命令需在octopress根目录执行,若当前目录为source/_posts,执行两次cd ..返回到根目录再执行此命令。

 

 

预览本地的站点,执行指令:

1
rake preview

 

 

在浏览器打开localhost:4000 查看网页效果效果。如果没有问题可以将静态站点同步到 GitHub远程仓库中。执行命令

1
rake deploy      #同步到GitHub服务器

 

 

打开GitHub稍等一会儿,就会看到我们的静态网页已经被同步到GitHub仓库的master分支上了。浏览器访问访问username.github.io,就会发现个人博客已经创建成功。

最后,创建source分支。Octopress的Git仓库(repository)有两个分支,分别是mastersource

  • source分支存储的是生成博客的源文件,在octopress根目录下。
  • master分支存储的是博客网站本身master的内容,在根目录的_deploy文件夹内,当你push源文件时会忽略,它使用的是rake deploy命令来更新的。
1
2
3
4
git checkout source
git add .
git commit -m "comment"     #"comment"为提交的log日志
git push origin source

 

 

 

git操作代码如下:

1
2
3
4
5
6 
git remote -v               # 显示所有远程仓库
git pull origin source      # 取回远程仓库的变化
git branch                  # 列出所有本地分支
git checkout [branch-name]  # 切换到指定分支,并更新工作区
git merge [branch] # 合并指定分支到当前分支 git log # 查看当前分支的版本历史

 

 

 

 

 

Tips: 关于Octopress的个性化配置和在多台设备间同步使用,会在之后的文章中更新。

原文地址:http://wanxudong.top/blog/2017/04/07/octopress-plus-github-page-da-jian-ge-ren-bo-ke/


参考文章:

转载于:https://www.cnblogs.com/wanxudong/p/6772684.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值