用github建立我的網站

時間 2019-11-11

標籤 github 建立我的網站欄目 Git 简体版

原文原文鏈接

這篇文章徹底參考這個博客，應爲寫的很清楚，因此我要備份一下。感謝大神。css

不少開源項目託管平臺都支持爲託管的項目創建主頁，但主頁的維護方式都沒有GitHub這麼酷。大多數託管平臺無非是開放一個FTP或相似服務，用戶把製做好的網頁或腳本上傳了事，而在GitHub用戶經過建立特殊名稱的Git版本庫或在Git庫中創建特別的分支實現對主頁的維護。html

1. 建立我的主頁

GitHub 爲每個用戶分配了一個二級域名<user-id>.github.io，用戶爲本身的二級域名建立主頁很容易，只要在託管空間下建立一個名爲<user-id>.github.io的版本庫，向其master分支提交網站靜態頁面便可，其中網站首頁爲index.html。下面以gotgithub用戶爲例介紹如何建立我的主頁。python

用戶gotgithub建立一個名爲gotgithub.github.io的Git版本庫。git

在GitHub上建立版本庫的操做，參見「第3.1節 建立新項目」。github

在本地克隆新創建的版本庫。web

$ git clone git@github.com:gotgithub/gotgithub.github.io.git
$ cd gotgithub.github.io/

在版本庫根目錄中建立文件index.html做爲首頁。編程
```
$ printf "<h1>GotGitHub's HomePage</h1>It works.\n" > index.html
```

創建提交。瀏覽器

$ git add index.html
$ git commit -m "Homepage test version."

推送到GitHub，完成遠程版本庫建立。ruby
```
$ git push origin master
```
訪問網址： http://gotgithub.github.io/ 。服務器

最多等待10分鐘，GitHub就能夠完成新網站的部署。網站完成部署後版本庫的全部者會收到郵件通知。

還有要注意訪問用戶二級域名的主頁要使用HTTP協議非HTTPS協議。

2. 建立項目主頁

如前所述，GitHub會爲每一個帳號分配一個二級域名<user-id>.github.io做爲用戶的首頁地址。實際上還能夠爲每一個項目設置主頁，項目主頁也經過此二級域名進行訪問。

例如gotgithub用戶建立的helloworld項目若是啓用了項目主頁，則可經過網址http://gotgithub.github.io/helloworld/訪問。

爲項目啓用項目主頁很簡單，只須要在項目版本庫中建立一個名爲gh-pages的分支，並向其中添加靜態網頁便可。也就是說若是項目的Git版本庫中包含了名爲gh-pages分支的話，則代表該項目提供靜態網頁構成的主頁，能夠經過網址http://<user-id>.github.io/<project-name>訪問到。

下面以用戶gotgithub的項目helloworld爲例，介紹如何維護項目主頁。

若是本地還沒有從GitHub克隆helloworld版本庫，執行以下命令。

$ git clone git@github.com:gotgithub/helloworld.git
$ cd helloworld

當前版本庫只有一個名爲master的分支，若是直接從master分支建立gh-pages分支操做很是簡單，可是做爲保存網頁的gh-pages分支中的內容和master分支中的可能徹底不一樣。若是不但願gh-pages分支繼承master分支的歷史和文件，即想要建立一個乾淨的gh-pages分支，須要一點小技巧。

若使用命令行建立乾淨的gh-pages分支，能夠從下面三個方法任選一種。

第一種方法用到兩個Git底層命令：git write-tree和git commit-tree。步驟以下：

基於master分支創建分支gh-pages。
```
$ git checkout -b gh-pages
```
刪除暫存區文件，即至關於清空暫存區。
```
$ rm .git/index
```
建立項目首頁index.html。
```
$ printf "hello world.\n" > index.html
```
添加文件index.html到暫存區。
```
$ git add index.html
```

用Git底層命令建立新的根提交，並將分支gh-pages重置。

$ git reset --hard $(echo "branch gh-pages init." | git commit-tree $(git write-tree))

執行推送命令，在GitHub遠程版本庫建立分支gh-pages。
```
$ git push -u origin gh-pages
```

第二種方法用到Git底層命令：git symbolic-ref。步驟以下：

用git symbolic-ref命令將當前工做分支由master切換到一個尚不存在的分支gh-pages。
```
$ git symbolic-ref HEAD refs/heads/gh-pages
```
刪除暫存區文件，即至關於清空暫存區。
```
$ rm .git/index
```
建立項目首頁index.html。
```
$ printf "hello world.\n" > index.html
```
添加文件index.html到暫存區。
```
$ git add index.html
```
執行提交。提交完畢分支gh-pages完成建立。
```
$ git commit -m "branch gh-pages init."
```
執行推送命令，在GitHub遠程版本庫建立分支gh-pages。
```
$ git push -u origin gh-pages
```

第三種方法沒有使用任何Git底層命令，是從另外的版本庫獲取提交創建分支。操做以下：

在helloworld版本庫以外建立另一個版本庫，例如helloworld-web。
```
$ git init ../helloworld-web
$ cd ../helloworld-web
```
在helloworld-web版本庫中建立主頁文件index.html。
```
$ printf "hello world.\n" > index.html
```
添加文件index.html到暫存區。
```
$ git add index.html
```
執行提交。

實際提交到master分支，雖然提交說明中出現的是gh-pages 。
```
$ git commit -m "branch gh-pages init."
```
切換到helloworld版本庫目錄。
```
$ cd ../helloworld
```
從helloworld-web版本庫獲取提交，並據此建立gh-pages分支。
```
$ git fetch ../helloworld-web
$ git checkout -b gh-pages FETCH_HEAD
```
執行推送命令，在GitHub遠程版本庫建立分支gh-pages。
```
$ git push -u origin gh-pages
```

不管哪一種方法，一旦在GitHub遠程版本庫中建立分支gh-pages，項目的主頁就已經創建。稍後（不超過10分鐘），用瀏覽器訪問下面的地址便可看到剛剛提交的項目首頁：http://gotgithub.github.io/helloworld/ 。

除了以上經過命令行建立gh-pages分支爲項目設定主頁以外，GitHub還提供了圖形操做界面。如圖3-19所示。

圖3-19：項目管理頁面中的GitHub Pages選項

當在項目管理頁面中勾選「GitHub Pages」選項，並按照提示操做，會自動在項目版本庫中建立gh-pages分支。而後執行下面命令從版本庫檢出gh-pages分支，對項目主頁進行相應定製。

$ git fetch
$ git checkout gh-pages

3. 使用專有域名

不管是用戶主頁仍是項目主頁，除了使用github.com下的二級域名訪問以外，還可使用專有域名。實現起來也很是簡單，只要在master分支（用戶主頁所在版本庫）或gh-pages分支（項目版本庫）的根目錄下檢入一個名爲CNAME的文件，內容爲相應的專有域名。固然還要更改專有域名的域名解析，使得該專有域名的IP地址指向相應的GitHub二級域名的IP地址。

例如worldhello.net[1]是個人我的網站，若計劃將網站改成由GitHub託管，並由帳號gotgit經過我的主頁提供服務，可作以下操做。

首先按照前面章節介紹的步驟，爲帳號gotgit設置帳戶主頁。

在帳戶gotgit下建立版本庫gotgit.github.io以維護該帳號主頁。

地址： https://github.com/gotgit/gotgit.github.io/
將網站內容提交併推送到該版本庫master分支中。

即在gotgit.github.io版本庫的根目錄下至少包含一個首頁文件，如index.html。還可使用下節將要介紹到的 Jekyll 技術，讓網頁有統一的顯示風格，此時首頁文件可能並不是一個完整的HTML文檔，而是套用了頁面模版。
至此當訪問網址http://gotgit.github.io時，會將帳號gotgit的版本庫gotgit.github.io中的內容做爲網站內容顯示出來。

接下來進行以下操做，使得該網站可以使用專有域名www.worldhello.net提供服務。

在帳號gotgit的版本庫gotgit.github.io根目錄下添加文件CNAME，文件內容爲：www.worldhello.net。

參見： https://github.com/gotgit/gotgit.github.io/blob/master/CNAME
而後更改域名www.worldhello.net的IP地址，指向域名gotgit.github.io對應的IP地址（注意不是github.com的IP地址）。

完成域名的DNS指向後，可試着用ping或dig命令確認域名www.worldhello.net和gotgit.github.io指向同一IP地址。
```
$ dig @8.8.8.8 -t a www.worldhello.net
...
; ANSWER SECTION:
www.worldhello.net.     81078   IN      A       204.232.175.78

$ dig @8.8.8.8 -t a gotgit.github.io
...
; ANSWER SECTION:
gotgit.github.io.      43200   IN      A       204.232.175.78
```

設置完成後用瀏覽器訪問 http://www.worldhello.net/ 便可看到由帳號gotgit的版本庫gotgit.github.io維護的頁面。若將域名worldhello.net（不帶www前綴）也指向IP地址204.232.175.78，則訪問網址http://worldhello.net/會發現GitHub體貼地將該網址重定向到正確的地址http://www.worldhello.net/。

在帳號gotgit下的其餘版本庫，若包含了gh-pages分支，亦可由域名www.worldhello.net訪問到。

網址 http://www.worldhello.net/doc 實際對應於版本庫 gotgit/doc 。
網址 http://www.worldhello.net/gotgit 實際對應於版本庫 gotgit/gotgit 。
網址 http://www.worldhello.net/gotgithub 實際對應於版本庫gotgit/gotgithub 。

4. 使用Jekyll維護網站

Jekyll是一個支持Textile、Markdown等標記語言的靜態網站生成軟件，還支持博客和網頁模版，由Tom Preston-Werner（GitHub創始人之一）開發。Jekyll用Ruby語言實現，項目在GitHub的託管地址： http://github.com/mojombo/jekyll/ ，專有的URL地址爲：http://jekyllrb.com/。

GitHub爲用戶帳號或項目提供主頁服務，會從相應版本庫的master分支或gh-pages分支檢出網頁文件，而後執行 Jekyll 相應的命令對網頁進行編譯。所以在設計GitHub的用戶主頁和項目主頁時均可以利用Jekyll，實現用Markdown等標記語言撰寫網頁及博客，並用頁面模版實現網頁風格的統一。

安裝Jekyll最簡單的方法是經過RubyGems安裝，會自動將Jekyll依賴的directory_watcher、liquid、open四、maruku和classifier等Gem包一併安裝。

$ gem install jekyll

若是安裝過程因編譯擴展模組遇到錯誤，多是由於還沒有安裝所需的頭文件，須要進行以下操做：

對於Debian Linux、Ubuntu等能夠用以下方法安裝所需軟件包：
```
$ sudo apt-get install ruby1.8-dev
```
若是是Red Hat、CentOS或Fedora等系統，使用以下命令安裝：
```
$ sudo yum install ruby-devel
```
對於Mac OSX，可能須要更新RubyGems，以下：
```
$ sudo gem update --system
```

Jekyll安裝完畢，執行下面的命令顯示軟件版本：

$ jekyll -v
Jekyll 0.11.0

要學習如何用Jekyll設計網站，能夠先看一下做者Tom Preston-Werner在GitHub上的我的網站是如何用Jekyll製做出來的。

克隆版本庫：

$ git clone git://github.com/mojombo/mojombo.github.com.git

版本庫包含的文件以下：

$ cd mojombo.github.com
$ ls -F
CNAME           _config.yml     _posts/         css/            index.html
README.textile  _layouts/       atom.xml        images/         random/

版本庫根目錄下的index.html文件不是一個普通的HTML文件，而是使用Liquid模版語言[2]定義的頁面。

 1 ---
 2 layout: default
 3 title: Tom Preston-Werner
 4 ---
 5
 6 <div id="home">
 7   <h1>Blog Posts</h1>
 8   <ul class="posts">
 9     {% for post in site.posts %}
10       <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
11     {% endfor %}
12   </ul>
   ...
63 </div>

爲方便描述爲內容添加了行號，說明以下：

第1-4行是YAML格式的文件頭，設定了該文件所使用的模版文件及模版中要用到的變量。

凡是設置有YAML文件頭的文件（目錄_layouts除外）不管文件擴展名是什麼，都會在Jekyll編譯時進行轉換。若源文件由Markdown等標記語言撰寫（擴展名爲.md、.textile等），Jekyll還會將編譯後的文件還將以擴展名.html來保存。
其中第2行含義爲使用default模版。

對應的模版文件爲_layouts/default.html。
第3行設定本頁面的標題。

在模版文件_layouts/default.html中用{{ page.title }}語法嵌入所設置的標題。下面是模版文件中部份內容：
```
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>{{ page.title }}</title>
```
第6行開始的內容絕大多數是標準的HTML語法，其中夾雜少許Liquid模版特有的語法。
第9行和第11行，對於有着Liquid或其餘模版編程經驗的用戶，不難理解其中出現的由「{%」和「%}」標識的指令是一個循環指令（for循環），用於逐條對博客進行相關操做。
第10行中由「{{」和「}}」標識的表達式則用於顯示博文的日期、連接和標題。

非下劃線（_）開頭的文件（包括子目錄中文件），若是包含YAML文件頭，就會使用Jekyll進行編譯，並將編譯後的文件複製到目標文件夾（默認爲_site目錄）下。對於包含YAML文件頭並用標記語言Markdown等撰寫的文件，還會將編譯後的文件以.html擴展名保存。而如下劃線開頭的文件和目錄有的直接忽略不予處理（如_layouts、_site目錄等），有的則須要特殊處理（如_post目錄）。

目錄_post用於保存博客條目，每一個博客條目都以<YYYY>-<MM>-<DD>-<blog-tiltle>格式的文件名命名。擴展名爲.md的爲Markdown格式，擴展名爲.textile的爲Textile格式。這些文件都包含相似的文件頭：

---
layout: post
title: How I Turned Down $300,000 from Microsoft to go Full-Time on GitHub
---

即博客使用文件_layouts/post.html做爲頁面模版，而不是index.html等文件所使用的_layouts/default.html模版。這些模版文件都採用Liquid模版語法。保存於_post目錄下的博客文件編譯後會以<YYYY>/<MM>/<DD>/<blog-title>.html文件名保存在輸出目錄中。

在根目錄下還有一個配置文件_config.yml用於覆蓋Jekyll的默認設置，例如本版本庫中的設置。

markdown: rdiscount
pygments: true

第1行設置使用rdiscount軟件包做爲Markdown的解析引擎，而非默認的Maruku。第2行開啓pygments支持。對於中文用戶強烈建議經過配置文件_config.yml重設 markdown 解析引擎，默認的 Maruku 對中文支持很差，而使用 rdiscount 或 kramdown 都可。關於該配置文件的更多參數詳見Jekyll項目維基[3] 。

編譯Jekyll編輯網站只需在根目錄執行jekyll命令，下面的命令是GitHub更新網站所使用的默認指令。

$ jekyll --pygments --safe

如今執行這條命令，就會將整個網站建立在目錄_site下。

若是沒有安裝Apache等Web服務器，還可使用Jekyll的內置Web服務器。

$ jekyll --server

默認在端口4000開啓Web服務器。

網址 http://gitready.com/ 是一個提供Git使用小竅門的網站，如圖3-20所示。

圖3-20：Git Ready 網站

你相信這是一個用Jekyll製做的網站麼？看看該網站對應的IP，會發現其指向的正是GitHub。研究GitHub上 gitready 用戶託管的版本庫，會發現en版本庫的gh-pages分支負責生成gitready.com網站，de版本庫的gh-pages分支負責生成德文網站de.gitready.com，等等。而gitready版本庫則是各類語種網站的彙總。