用github搭建博客

用github搭建blog

个人学习整理的笔记，自己没有截图了，大部分是盗图。@_@~

法一：

Jekyll 用 Ruby写的，jekyll是把原文上传github，可以直接生成博客，也可以用在线编辑器处理。

1. 搭建ruby环境，详见：http://leolan.top http://blog.csdn.net/lan842632/article/details/52859119
2. 安装kramdown

gem install kramdown

3. 安装rouge

gem install rouge

安装ruby工具集管理工具Bundler

gem install bundler

安装jekyll （在linux或Windows中）

Mac： mkdir -p /usr/local/Cellar/ruby/bin

sudo gem install jekyll -n /usr/local/Cellar/ruby/bin

关闭终端窗口再打开，输入jekyll看这个指令是否存在，如果提示不存在，那就再修改/Users/LeoLan/.bash_profile文件，把Jekyll的路径写进去。

export PATH=/usr/local/Cellar/ruby/bin:$PATH

再重新打开终端，这时候Jekyll指令应该ok了。

【 whereis gem 可以看到路径是/usr/bin/gem,当前的gem路径是系统默认的gem版本，这个版本用了是会报错的，用这个版本安装Jekyll默认安装Jekyll到相同目录下，所以同样会出现permission denied的报错信息。有人说可以用symlink，但即使用了sudo也会是permission denied的报错。所以直接安装Jekyll并同时指定安装路径了】

1 2 3 4

gem install jekyll jekyll new my-awesome-site    #创建新站点 cd my-awesome-site      #进入站点目录下一步才能开启服务 jekyll serve --watch    #加--watch参数修改后会自动刷新页面，而不用手动重启jekyll

这样就能在本地搭建一个简单的服务器，然后访问localhost:4000就能看到blog的页面了。

一个基本的 Jekyll 网站的目录结构一般是像这样的：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

├── _config.yml ├── _drafts | ├── begin-with-the-crazy-ideas.textile | └── on-simplicity-in-technology.markdown ├── _includes | ├── footer.html | └── header.html ├── _layouts | ├── default.html | └── post.html ├── _posts | ├── 2007-10-29-why-every-programmer-should-play-nethack.textile | └── 2009-04-26-barcamp-boston-4-roundup.textile ├── _data | └── members.yml ├── _site └── index.html

对应的用途如下：

目录	描述
_config.yml	保存配置数据。很多配置选项都会直接从命令行中进行设置，但是如果你把那些配置写在这儿，你就不用非要去记住那些命令了。
_drafts	drafts 是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。
_includes	你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {\% include file.ext \%} 来把文件 _includes/file.ext 包含进来。
_layouts	layouts 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。
_posts	这里放的就是你的文章了。文件格式很重要，必须要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制，但是数据和标记语言都是根据文件名来确定的。
_site	一旦 Jekyll 完成转换，就会将生成的页面放在这里（默认）。最好将这个目录放进你的 .gitignore 文件中。
index.html	如果这些文件中包含 YAML 头信息 部分，Jekyll 就会自动将它们进行转换。当然，其他的如 .html， .markdown， .md，或者 .textile 等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。
Other Files/Folders	其他一些未被提及的目录和文件如 css 还有 images 文件夹， favicon.ico 等文件都将被完全拷贝到生成的 site 中。

安装完成后，如果你要配置你自己的站点信息，那么你就要修改 _config.yml 这个文件。里面可以配置站点名称，描述，多说，统计，友链等等。参考： http://pwnny.cn/original/2016/06/26/MakeBlog.html中的 Jekyll目录结构解读

使用Hux主题

默认的主题不是很喜欢？客官可以在 http://jekyllthemes.org/ 这个上面找找，个人觉得 Hux 这个主题还是不错的，喜欢的直接下载，重新修改里面配置就能为自己所用了。

关于配置文件里面多说的duoshuo_username是什么，在多说创建站点的时候，这个框框里面填的就是你的duoshuo_username：

配置完在本地预览没有问题了，就可以直接把代码上传到github，然后访问yourusername.github.io就能看到你刚刚创建的blog了。

用Github Pages生成个人博客

#Github Pages生成网站的两种方式的基本原理

方式一：

一个Github账号对应一个用户或者一个组织，Github会给这个用户分配一个域名：  username.github.io

在Github上有一个账号，名为  username  （任意），有一个项目，名为  username.github.io  （固定格式，username与账号名一致），项目分支名为  master  （默认固定），这个分支有类似下面的目录结构：

这样，当你访问  http://username.github.io/  时，Github会使用Jekyll解析用户  username  名下的  username.github.io  项目中，分支为  master   的源代码，为你构建一个静态网站，并将生成的index.html 展示给你。

方式二：

Github还为每个项目提供了域名，例如你的项目名为  blog  ，Github会为这个项目提供一个  username.github.io/blog  的域名

在Github上有一个账号，名为  username  （任意），有一个项目，名为  project  （任意），项目分支名为  gh-pages  （固定），这个分支也有上面那种结构。

那么当你访问  http://username.github.io/project  时，Github会去解析  username  用户下， project  项目的  gh-pages  分支下的源代码，为你构建网站。

---

所以要搭建自己的博客你有两种选择：

• 建立名为 username.github.io 的项目，在 master 分支下存放网站源代码
• 建立名为 blog 的项目，在 gh-pages 分支下存放网站源代码

接下来我们用第二种方式搭建博客

> 创建个人仓库

因为我们使用第二种方式创建，所以仓库的名称可以随意取。在这以Test01为名字。

在Repossitory name处填入Test01，选择Public类型，然后点击下面的Create respository按钮：

> 为仓库创建Github Pages

点击Settings设置：

翻到下面，选择Launch automatic page generator：

再接着编译一下内容，选择页面上的元素，再点Continue to layouts：

选好模板，点击Publish page，就生成了Github Pages：

并且，分支自动设置为了gh-pages：

让我们打开这个网站看看效果吧！在浏览器输入：  http://zyc8904.github.io/Test01  (zyc8904换成你的github名称，Test01换成项目名)：

可能有人会问，地址栏怎么和我输入的网址不一样。这是因为我把域名绑定到了我的github上， zyc8904.github.io  被自动指向为我的域名，不要着急，后面我会教大家如何绑定域名

> 将本地Jekyll代码部署到Gihub仓库

我们的目的就是在本地利用Jekyll搭建好博客，并且测试开发，写文章，然后推送到Github仓库里，发布到线上。前面已经教大家搭建好了本地Jekyll，接下来就教大家把它推送到Github仓库中。

> 把仓库克隆到本地

这里我以windows下的Git客户端： Github for windows  为例来为大家讲解（如果想用Git Bash命令行克隆，请移步 这里 ）

首先打开我们的Github for windows客户端，点击左侧的  +  号按钮：

选择 Clone ，并且找到刚才新建的 Test01 仓库，然后点击最下方的 Clone 按钮：

然后选择存放位置，这里我放到D盘，然后点击确定：

这样我们的Test01就被克隆到了本地。打开D盘可以看见这个文件夹。这时我们启动Jekyll服务，别忘了 进入Test01目录 下：

cd d:\Test01jekyll serve --watch

现在我们打开[http://localhost:4000]，就可以看见我们在Github上创建的Pages页面了。

> 拷贝本地Jekyll目录到版本库中

删除Test01下的示例文件和文件夹： _site  、 stylesheets  、 index.html  、 params.json 。

再把本地Jekyll创建的blog里的所有文件和文件夹全都拷贝到Test01里面。

如果你前面和我用的是一样的命令的话

jekyll serve --watch

这时你可能会发现cmd命令行中，自动处理了一些操作并且显示：

这就是我加 --watch  的原因，不用再自己去生成，Jekyll服务器检测到你有变化会自动再生成页面，这时你在刷新浏览器，那么就会看到Github页面就会被Jekyll生成的页面代替了：

我们进入_post目录，撰写的markdown语法的博文都放在这里。默认会有一篇测试文章：2016-03-04-welcome-to-jekyll.markdown. 拷贝测试博文

cp 2016-03-04-welcome-to-jekyll. markdown 2016-03-04-test. markdown

然后刷新一下浏览器、发现页面并没有变化.因为我们还没有通过Jekyll build去生成。

jekyll build

默认情况下，服务会以前台的方式挂起，如果希望用后台进程运行服务，我们可以使用  --detach 参数，缩写参数为 -B (应该是Background的首字母)

jekyll serve build -- detach

或者

jekyll serve build - B

值得注意的是：如果用vagrant虚拟机去安装jekyll，那么启动服务时还需要加上-H参数，指定访问主机号为0.0.0.0，即 jekyll serve build -B -H 0.0.0.0 ,否则vagrant下可能启动失败

再查看首页，发现已经有两篇文章了！因为没有更改标题，所以都是一样的。

打开复制的 2016-03-04-test.markdown-test.markdown,可以看见开头有如下几个东东。

--- layout: post title: "Welcome to Jekyll!" date: 2016 - 03 - 04 10 : 52 : 19 + 0100 categories: jekyll update ---

layout 表示使用的是post布局， title 是文章标题， date 是自动生成的日期， categories 是该文章生成html文件后存放的目录，可以去_site/jekyll/update下找到对应日期下面的html文档。当然你也可以只设置jekyll单一的目录，甚至是更多级别的目录，用空格分开即可。头信息设置完成后就可以书写正文了。

如果每次都输入这些头信息，还要去整理格式，那么一定很烦躁，这种重复性的东西我们就把它自动化，通过Rakefile去解决，它类似shell这样的脚本，可以使用交互模式。以下是我的Rakefile,可以复制后命名为Rakefile，放在站点根目录直接使用，也可以修改为适合自己的Rakefile：

task :default => :new require 'fileutils' desc "创建新 post" task :new do puts "请输入要创建的 post URL：" @url = STDIN . gets . chomp puts "请输入 post 标题：" @name = STDIN . gets . chomp puts "请输入 post 子标题：" @subtitle = STDIN . gets . chomp puts "请输入 post 分类，以空格分隔：" @categories = STDIN . gets . chomp puts "请输入 post 标签：" @tag = STDIN . gets . chomp @slug = " #{ @url } " @slug = @slug . downcase . strip . gsub ( ' ' , '-' ) @date = Time . now . strftime ( "%F" ) @post_name = "_posts/ #{ @date } - #{ @slug } .md" if File . exist? ( @post_name ) abort ( "文件名已经存在！创建失败" ) end FileUtils . touch ( @post_name ) open ( @post_name , 'a' ) do | file | file. puts "---" file. puts "layout: post" file. puts "title: #{ @name } " file. puts "subtitle: #{ @subtitle } " file. puts "author: pizida" file. puts "date: #{ Time .now} " file. puts "categories: #{ @categories } " file. puts "tag: #{ @tag } " file. puts "---" end exec "vi #{ @post_name } " end

如何使用Rake，输入一下命令：

rake new

rake会启动交互模式，让你依次输入title，subtitle，author，categories，tag等信息，并为你创建好具有头信息的markdown文件。如下一样:

请输入要创建的 post URL：testurl请输入 post 标题：testpost请输入 post 子标题：subtitle 请输入 post 分类，以空格分隔：jekyll请输入 post 标签：技术

我们查看 _post 目录，发现已经有一篇 2016-03-05-testurl.md 文章，打开看下

--- layout: post title: testpost subtitle: subtitle author: pizida date: 2016 - 03 - 05 07 : 31 : 27 + 0800 categories: jekyll tag: 技术 ---

已经为我们创建好头信息了。

> 部署本地Jekyll站点到Github Pages上

打开Github for windows客户端，会看到  changes  上面有个点，说明他已经检测到我们的仓库的变化，并且自动把变化都列举在了下面：

这时我们在下方填入这次改变的名称和描述，点击Commit to gh-pages。然后再点击右上角的Sync把这次改变push到Github远程仓库里：

稍等几分钟，我们再次访问  http://zyc8904.github.io/Test01  就可以看见我们用Jekyll做的站点已经被部署到github上了：

以后你只要在本地 Test01 文件夹下的 _posts 文件夹里写文章，然后推送到远程仓库就可以了。

以后写博客的思路大致就是这样：

#本地开发测试

1. 用markdown写文章，并按规定名称格式保存在_posts里。
2. 用jekyll serve –watch 启动服务器，在浏览器里查看。

#推送远程仓库

1. 用git客户端推送到远程仓库里。
2. 通过域名访问。

法二：

hexo 用 node-js写的，hexo生成静态页面的速度要比较快，hexo是本地生成html再上传。

安装hexo

1 2 3 4 5

npm install hexo-cli -g hexo init blog cd blog npm install hexo server

通过上面简单的操作之后，就能找本地生成一个blog的目录，和jekyll一样也是通过 _config.yml 文件来配置站点信息的。

默认的目录结构如下：

1 2 3 4 5 6 7 8 9 10

├── .deploy ├── public ├── scaffolds ├── scripts ├── source | ├── _drafts | └── _posts ├── themes ├── _config.yml └── package.json

目录	描述
.deploy	执行hexo deploy命令部署到GitHub上的内容目录
public	执行hexo generate命令，输出的静态网页内容目录
scaffolds	layout模板文件目录，其中的md文件可以添加编辑
scripts	扩展脚本目录，这里可以自定义一些javascript脚本
source	文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
_drafts	草稿文章
_posts	发布文章
themes	主题文件目录
_config.yml	全局配置文件，大多数的设置都在这里
package.json	应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

hexo常用的几个命令：

1 2 3 4 5

hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server） hexo deploy #将.deploy目录部署到GitHub

如果你的文章是从jekyll转过来的，要修改 _config.yml 里面的 permalink: :year/:month/:day/:title/ 。

Next主题

hexo也有很多的主题，这里说一下 Next （ http://theme-next.iissnan.com/ ） 这个主题：

安装最新版：

1 2	$ cd your-hexo-site $ git clone https://github.com/iissnan/hexo-theme-next themes/next

修改站点配置文件_config.yml：

1	theme: next

Next 里面有关于这个主题的配置，大家自己试试。

安装插件

hexo支持插件，可以直接通过命令行安装即可：

1 2 3 4 5

npm install plugin-name --save //更新插件 npm update //卸载插件 npm uninstall plugin-name

下面推荐几个常用的插件：

1 2 3 4 5 6

//feed插件 npm install hexo-generator-feed --save //站点地图 npm install hexo-generator-sitemap --save //百度站点地图 npm install hexo-generator-baidu-sitemap --save

SEO优化

更改index.swig文件，文件路径是your-hexo-site\themes\next\layout，将下面代码：

1	{% block title %} {{ config.title }} {% endblock %}

改成

1	{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}

按照 Next进阶设定 使用cdn加速js和css，还有google font。

在 百度站长 提交网站和网站地图。

同时使用coding和github

国内的 gitcafe 也提供了相应的服务，当然现在已经卖给了 Coding 。

所以我们可以同时使用Coding提供的Pages服务和Github提供的Pages服务。

只需要在配置文件中配置一下 deploy 就可以了：

1 2 3 4 5

deploy: type: git repo: github: https://github.com/xxxxxx coding: https://git.coding.net/xxxxxx,coding-pages

先要安装deployer-git

1	npm install hexo-deployer-git --save

国内国外访问不同的Pages服务

同时使用了coding和github之后，由于github访问速度可能有点慢，可以通过DnsPod让国内用户访问coding，让国外用户访问github。

好了，基本介绍的也差不多了。

为你的Github绑定域名

1· 我们的域名只能替换  username.github.io  ，所以你需要按照前面的方式一自己建一个仓库，创建好Github Pages，然后克隆到本地。在本地的 username.github.io  文件夹下新建一个CNAME文件，注意没有后缀名。在里面添加你的域名，如我的就是  pwnny.cn ，然后推送CNAME文件到远程仓库。

2· 到域名服务商那里增加你的CNAME记录。添加两条记录，@和www的主机记录，记录类型为CNAME，记录值为  username.github.io  ，重要的是  io  后面还有一个原点，切记。

过几分钟，刷新博客，就能直接用域名访问了。

个人学习笔记，不当之处还请指正。
----------不定期更新------------