Octopress + GitHub Page 搭建个人博客
2017-04-27 10:16
483 查看
Tips:博客已搬家,新地址:http://wanxudong.top
首先说明两个关键术语:
它为我们提供了现成的美观的主题模板,并且配置简单,使用方便,大大降低了我们建站的门槛。
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.
大致思路是通过Octopress生成本地静态博客网页,然后将静态网页布置到GitHub提供的GitHub Pages上面。
如果ruby版本 >=
更新
接下来,安装依赖:
最后安装 Octopress
可以看到如下代码:
确保在octopress目录,执行命令
在浏览器输入
将本地代码仓库同步到
绑定远程仓库
创建一篇文章
生成新的文章在source/_posts/目录下
这个时候会在目录里看到
编辑完成后生成静态站点,终端执行命令:
预览本地的站点,执行指令:
在浏览器打开
打开GitHub稍等一会儿,就会看到我们的静态网页已经被同步到GitHub仓库的
最后,创建
git操作代码如下:
原文地址:http://wanxudong.top/blog/2017/04/07/octopress-plus-github-page-da-jian-ge-ren-bo-ke/
制作个人博客站(一):Mac系统下使用 Octopress + GitHub Pages 搭建个人博客
octopress博客搭建和个性化配置
Octopress重装或者多台电脑上并行写作同步
首先说明两个关键术语:
Octopress
Octopress是基于
Jekyll的博客框架。他们的关系就像
jQuery与
js的关系一样。
它为我们提供了现成的美观的主题模板,并且配置简单,使用方便,大大降低了我们建站的门槛。
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 |
1.9.3-p0,跳过RVM和Ruby的安装。
安装RVM
1 | curl -L https://get.rvm.io | bash -s stable --ruby |
安装Ruby 1.9.3
12 | rvm install 1.9.3 rvm use 1.9.3 rvm rubygems latest |
安装 Octopress
将 Octopress的项目clone到本地:
12 | git clone git://github.com/imathis/octopress.git octopress cd octopress |
ruby源,将官方的
ruby源替换成国内淘宝的源。
12 | gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/ gem sources -l |
12 | gem install bundler # 若遇权限问题加上sudo重新执行,并输入密码。 bundle install |
1 | rake install # 安装octopress默认主题 |
修改Octopress初始配置
12 | ls # 查看当前目录所有文件 vim _config.yml # 通过vim编辑主要配置 |
可以看到如下代码:
12 | # ----------------------- # # Main Configs # # ----------------------- # #网站地址,这里是GitHub项目地址,为必填 url: http://userName.github.io #网站标题 title: user的博客 #网站副标题 subtitle: 天行健,君子以自强不息。 #网址作者 author: userName #搜索引擎 simple_search: https://www.google.com/search #网站的描述,出现在HTML页面中的 meta 中的 description description: |
12 | rake generate # 生成静态站点 rake preview # 预览静态站点,在http://localhost:4000 |
localhost:4000可看到生成的博客。
Tips:最好把里面的twitter相关的信息全部删掉,否则由于
GFW的原因,将会造成页面load很慢。
部署到GitHub Pages上
在 GitHub 上创建一个New repository,
Repository name即项目名称命名规则为
userName.github.io,
userName必须与用户名称一致。
Tips:最好不要勾选
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"] |
12 | 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服务器 |
master分支上了。浏览器访问访问
username.github.io,就会发现个人博客已经创建成功。
最后,创建
source分支。Octopress的Git仓库(
repository)有两个分支,分别是
master和
source。
source分支存储的是生成博客的源文件,在octopress根目录下。
master分支存储的是博客网站本身master的内容,在根目录的
_deploy文件夹内,当你
push源文件时会忽略,它使用的是
rake deploy命令来更新的。
12 | git checkout source git add . git commit -m "comment" #"comment"为提交的log日志 git push origin source |
12 | 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/
参考文章:
象写程序一样写博客:搭建基于github的博客制作个人博客站(一):Mac系统下使用 Octopress + GitHub Pages 搭建个人博客
octopress博客搭建和个性化配置
Octopress重装或者多台电脑上并行写作同步
相关文章推荐
- 利用Octopress在github pages上搭建个人博客
- 使用github+octopress搭建个人技术博客
- 在github Pages上部署octopress搭建个人博客系统
- 在github Pages上部署octopress搭建个人博客系统
- 在github Pages上部署octopress搭建个人博客系统
- Mac下利用Octopress和Github搭建自己的技术博客
- 零基础Github Page免费无限流量个人博客搭建教程
- 用Github和Octopress搭建博客
- 利用octopress在github搭建博客时遇到的若干问题
- 在github上搭建octopress博客 Mac
- 使用github + Octopress 搭建免费博客 + 碰到问题的解决方法
- Octopress+Github博客搭建
- 使用github与Octopress 搭建GitHub Pages博客
- octopress+github管理个人博客
- 在github上用octopress搭建博客过程纪要
- 利用Octopress在Github上搭建博客及后续问题总汇
- 使用Octopress和Github Pages搭建博客的高级技巧
- 使用github page搭建个人博客
- Mac下利用Octopress和Github搭建自己的技术博客
- 使用Octopress在Github上搭建博客系统