通用技术建立个人的 Github Page

andward_xu · 2014年08月21日 · 最后由 andward_xu 回复于 2014年08月25日 · 2596 次阅读

本帖已被设为精华帖！

原文：http://andward.github.io/github/git/2014/04/23/Github-blog-setup.html

很久以前（其实也不是很久啦），如果想建立一个个人的 blog,一般的做法是：要么在 sina，csdn 等一些公共站点注册一个 blog，所有的资源都由这个公共站点 host；要么自己搭建一个站点和申请独立的域名，资源都放在本地。如果有精力的话，自己搭建一个独立 blog 还是挺好玩儿的。

但是，像我这样的懒人，租服务器啊申请域名啊搭建应用啊神马的，简直是太麻烦了-_-! 一个独立应用对于一个文字 blog 来讲有点笨重了，而公共站点的 blog 又太不 cool 了。然后我发现 github 上有了 github page 这个玩意儿。

进入正题->

建立 github page

Github page host 在 github 上的分支上,域名是your-github-name.github.io, 这对于一个 git 的使用者来说简直太方便了。我们可以 offline 本地编辑，有网了就往 github 上 push，想回滚了就 reset 再 push,真是异常方便。最关键的是它不！要！钱！

第一步，你得要有一个 github 的账号（没有的话去 github 注册一个）。接着创建一个分支名字叫your-github-name.github.io。假设你的 github 账号名叫 justin-bieber，那建立的分支名字就叫justin-bieber.github.io。

接着，把这个分支 clone 到你的本地：

git clone https://github.com/justin-bieber/justin-bieber.github.io

如果对 github 不熟，请移步这里去看看 github 的设置。

Clone 到本地后，在本地 justin-bieber.github.io 的文件夹中创建一个 Html 文件index.html,写一些 html code 在里面例如:

<html>Hello World!</html>

把这个 html 文件 push 到 github 上去

git add index.html
git commit -m 'init'
git push origin master

如果对 git 也不熟，请移步这里去熟悉一下 git 的用法。

Push 好之后等 2 分钟，去访问域名 justin-bieber.github.io，就会看到 hello world 的页面。更多的 github page 的细节可以移步这里去了解。

个性化 github page

Github page 只能 host 静态页面，如果想把 blog 做得 “动感” 一点，就需要借助一个 blog frame jekyll。它提供结构化的静态页面框架，无需数据库支持，使用 markdown 编辑文本（文字爱好者的福音），使用 Liquid 让页面模板化，并提供许多 blog-style 的标签。更多内容请移步这里。

如果你有一台 mac，恭喜你！所有的环境都已经 ready 了。如果是 window 或者是 linux，你需要先安装一下 Ruby 和 RubyGems。环境设置好后，我们在本地安装一下 jekyll:

gem install jekyll

然后，在 justin-bieber.github.io 的目录下，build 一个 jekyll:

jekyll build

jekyllrb 初始化了一个静态框架，结构如下：

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts // html通用模板，可用标签调用
|   ├── default.html
|   └── post.html
├── _posts // blog文章，以markdown格式存放
|   ├── first-article.markdown
├── _data
|   └── members.yml
├── _site // push到server后的结构目录
└── index.html // 当前页的html

Layout 文件夹里面的通用模板，可以通过标签加入任何 html 文件中。Posts 里存放 blog 的 markdown 文件。index.html 就是当前页的 html 文件。我们也可以在总目录下加上 js 和 css 去修改和添加网页的 animtaion 和 style。

终于可以写 blog 了！在 posts 下面以日期 +blog 名字为文件名，新建一个 markdown 文件。系统会根据文件名去组织结构。在 markdown 中，有许多标签需要注意，请细读文档这里去添加和组织文章。如果你对 markdown 不熟，请移步这里赖熟悉一下 markdown 的语法。

然后请享受写作带来的快感吧。

4 个赞

共收到 8 条回复时间点赞