github好多年前,大家都開始玩啦,我這個菜鳥近幾年才開始。github不僅可以管理項目,還可以搭建博客。技術人員,一般用的博客為博客園,CSDN多一些。看到朋友們都弄一個,我也開始弄起來,先找點資料看看,然后開始動手了。
我的電腦是MAC的,其他系統也差不多。先看看我建博客的過程,已經成功了,而且很好用,大家可以看看我的網址https://lu-yuan.github.io .
(1)首先在github上注冊賬號,可以使用github,https://github.com/join?source=header-home
這個比較簡單,填寫用戶名,郵箱,密碼等就可以了。如果有賬號了,我們接着看下面。
(2)搭建github博客,需要用的東西,github page, jekyll模板。
首先打開https://pages.github.com/,按照步驟一步一步來,
第一步,先建一個項目倉庫,名稱很重要,要和用戶名一致。

第二步,github客戶端下載,超好用的,下載客戶端,

客戶端裝成了,
第三步,創建index.html
<!DOCTYPE html> <html> <body> <h1>Hello World</h1> <p>I'm hosted with GitHub Pages.</p> </body> </html>
第四步,先選中change部分,然后commit, 再然后sync

第五步,提交成功,瀏覽頁面,https://username.github.io 記得username換成你的用戶名
github pages完成了,接着jekyll模板部分。
jekyll是靜態站點生成器。根據網頁源碼生成靜態文件。提供了模板,變量,插件等功能,用來編寫整個網站
第一步,創建項目,
在本地先建個文件夾,blog.
$ mkdir jekyll_demo
對該目錄進行git初始化
$ cd blog
$ git init
然后,創建一個沒有父節點的分支gh-pages。因為github規定,只有該分支中的頁面,才會生成網頁文件。
$ git checkout --orphan gh-pages
第二步,創建設置文件
在根目錄下,創建一個名為_config.yml的文本文件。是jekyll的設置文件,我們在里面填入如下內容,其他設置都可以用默認選項,具體解釋參見官方網頁
baseurl: /blog
現在目錄結構變成:
/blog
|-- _config.yml
第三步,創建模板文件,
在根目錄下,創建一個_layouts目錄,用於存放模板文件,
$ mkdir _layouts
進入該目錄,創建一個default.html文件,作為Blog的默認模板。並在該文件中填入以下內容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
Jekyll使用Liquid模板語言,{{ page.title }}表示文章標題,{{ content }}表示文章內容,更多模板變量請參考官方文檔
現在目錄變為
/blog
|-- _config.yml
|-- _layouts
| |-- default.html
第四步,創建文章
在根目錄,創建名為_posts目錄,作為blog的文章。
$ mkdir _posts
進入該目錄,創建第一篇文章,名為2017-04-19-hello-world.html
在該文件中,填入如下內容,注意行首不能為空格,
---
layout: default
title: 你好,世界
---
<h2>{{ page.title }}</h2>
<p>我的第一篇文章</p>
<p>{{ page.date | date_to_string }}</p>
每篇文章的頭部,必須有一個yaml文件頭,用來設置一些元數據。它用三根短划線"---",標記開始和結束,里面每一行設置一種元數據.
"layout:default",表示該文章的模板使用_layouts目錄下的default.html文件;"title: 你好,世界",表示該文章的標題是"你好,世界".
現在目錄結構變成:
/blog
|-- _config.yml
|-- _layouts
| |-- default.html
|-- _posts
| |-- 2012-08-25-hello-world.html
第五步,創建首頁
在根目錄,創建一個index.html文件,填入以下內容
---
layout: default
title: 我的Blog
---
<h2>{{ page.title }}</h2>
<p>最新文章</p>
<ul>
{% for post in site.posts %}
<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
現在目錄結構變成這樣,
/blog
|-- _config.yml
|-- _layouts
| |-- default.html
|-- _posts
| |-- 2012-08-25-hello-world.html
|-- index.html
第六步,發布內容
這個簡單的blog,可以發布了,在github上創建倉庫blog
$ git add .
$ git commit -m "first post"
$ git remote add origin https://github.com/username/blog.git
$ git push origin gh-pages
note: username換成你的用戶名
打開生成的頁面,http://username.github.com/blog/
這個時候,發現,很多年前,這樣的網址是可以打開的,現在打不開了。現在github只能打開http://username.github.io
所以倉庫做了下調整,
blog庫下的用來看blog文章,
username.github.io庫下的用來放首頁,可瀏覽的URL, 及設置文件baseurl.
項目文件結構:我的目錄結構豐富了些,你也可以做的更豐富更好看,紅圈為主要內容

現在你可以使用建好的博客了,為了把頁面做的更好看,可以加入CSS, IMAGE, JS等
可參考我的庫來建博客,http://username.github.io
