【Github創建網站】【超詳細】利用github,jekyll,bundler創建gihub網頁

Github創建網頁全過程

一、前期準備

1.安裝Git

官方文檔點擊->set-up git
直接下載點擊->gihub 客戶端

下載安裝客戶端根據嚮導提示安裝即可(當作普通的軟件安裝即可),可以安裝在非系統盤。

客戶端下載後內容包括:Git Bash、Git CMD、Git GUI,其中GUI就是圖形操作界面

2.安裝jekyll

jekyll官方安裝文檔->set-up jekyll

1).下載ruby組件->rubyinstaller download,選擇官方推薦的Ruby+Devkit 2.6.6-1 (x64)。
注意此文撰寫時間爲2020.4,官方推薦的組件隨着時間推移可能會修改,大家根據rubyinstaller download鏈接內的官方說明選擇下載即可。

2).按照安裝嚮導安裝:
安裝路徑隨意

在這裏插入圖片描述
next繼續安裝,在嚮導的最後一頁勾選運行:

ridk install


點擊finish後出現cmd界面:
在這裏插入圖片描述
直接按回車,安裝成功後顯示:
在這裏插入圖片描述
回車完成安裝並關閉。

3).在開始菜單中,啓動“start command prompt with Ruby”,來讓path環境變量生效
在這裏插入圖片描述

4).在打開的command prompt中:
進入剛剛安裝路徑下的/Ruby26-x64/bin/,並輸入以下命令

gem install jekyll bundler

在這裏插入圖片描述
如果按了回車沒有反應就再按一次(不要多按),多等一會比較慢,會出現很多安裝信息,最後沒有報錯退回路徑就行了

5).查看jekyll是否安裝成功(顯示jekyll版本信息即安裝成功)

jekyll -v

在這裏插入圖片描述

3.安裝bundler

bundler官方文檔->set-up bundler
打開命令行窗口並運行如下命令:

gem install bundler

ps:windows命令行窗口打開方式:win+R–>輸入cmd並確認

此時你的bundler還不能用!因爲還沒配置!後面會配置!

二、創建本地網站(jekyll project)

github官方文檔->creating a site
1. 打開Git Bash並進行後續命令行操作

2. 進入你要用來存儲repository的文件夾(沒有就創建文件夾)

cd PARENT-FOLDER

PARENT-FOLDER替換成你創建好的要用來存儲repository的文件夾。

比如你要放在目錄“D:/Git/myrepo/”下面,而這兩個文件夾你都沒創建,那麼你要依次輸入運行以下的命令行:

mkdir Git
cd Git
mkdir myrepo
cd myrepo

筆者的存儲路徑爲:D:/Git/Jekyll/siteSourceFile/

3. 如果你沒有初始化過本地的repository(一般都沒有),那麼要先初始化一個

git init REPOSITORY-NAME

效果如下,mysite就是我的REPOSITORY-NAME,即我的本地倉庫
初始化結果
4. 進入repository文件夾

cd REPOSITORY-NAME

這個時候bash顯示爲:
在這裏插入圖片描述
注意到有一個(master)字樣,因爲如果是創建一個user或organization site是必須把網站源碼放在master brach下的。如果是另外的project下創網站可以參考官方文檔

5. 在 目錄 "XX/REPOSITORY-NAME/” 下新建文件‘Gemfile’並在文件中寫入:

source 'https://rubygems.org'
gem 'nokogiri'
gem 'rack', '~> 2.0.1'
gem 'jekyll', '~> 4.0.0'
gem 'rspec'

jekyll的版本號根據你安裝的爲準,筆者爲4.4.0。
ps:文件名不要加後綴,拿記事本或者vi命令打開就行,這個文件是爲了配置bundler

6. 在命令行中輸入:

bundle install

結束後文件夾內容爲:
在這裏插入圖片描述
7. 創建並進入docs文件夾

mkdir docs
cd docs

你將從master branch的docs文件夾中發表網站

8.用bundler新建jekyll項目

bundle exec jekyll VERSION new .

!!new 後面有個‘.’不要忘了!!,意思是在當前文件夾下創建。
如果你要在別的路徑下放,就把new替換成絕對路徑,或者直接輸文件夾名就會在當前路徑下創建

創建結果爲:
在這裏插入圖片描述
9.打開當前目錄下的Gemfile
找到下圖內容,取消第三行的註釋並且加上這個插件的版本號,版本號查看點擊–>dependency versions
在這裏插入圖片描述
筆者的配置如下,版本號爲204:
在這裏插入圖片描述
保存並退出。

三、將本地網站push到github遠程倉庫中

1. 在github界面新建一個repository

和你本地repository的名字一樣,筆者爲mysite(最好是public,不要學我!且一定要帶readme.md!在這裏插入圖片描述

2. 在Git Bash中將本地repository放入遠程倉庫

在目錄"xxx/REPOSITORY-NAME"中進行以下命令

git init
git add .
git commit -m 'first commit'
git remote add origin https://github.com/USER/REPOSITORY.git
git push -u origin master

USER就是你的gihub賬戶名,REPOSITORY就是開始的那個REPOSITORY-NAME筆者爲mysite
在這裏插入圖片描述
在這裏插入圖片描述
此時你的github頁面爲:
在這裏插入圖片描述
上傳成功。

在這一步可能遇到的問題

1. 在gitpush時彈出界面讓你登錄
用github登錄就行,SSH登錄也一樣

2.fatal: HttpRequestException encountered.
安裝協議:GCM
選擇windows的exe安裝即可

3.git push錯誤failed to push some refs to

  • 檢查你的遠程repository裏有無README.md,沒有就要先建一個
  • 打開Git Bash,在本地的對應repository目錄下運行git pull --rebase origin master,目的是同步遠程倉庫到本地
  • 然後再執行本文中同步到遠程倉庫的步驟

四、運行網頁

1. 在github repository中settings裏找到enable網頁

在這裏插入圖片描述
在這裏插入圖片描述

2. 找到你的網站鏈接

在這裏插入圖片描述

3. 打開網站

在這裏插入圖片描述

成功~~!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章