當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

GitHub博客开发上线实战

發(fā)布時間：2024/9/27 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 GitHub博客开发上线实战小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

1. git代碼管理工具
- 1.1 git簡介
- 1.2 git的下載與安裝
- - 1.2.1 MAC電腦
  - 1.2.2 Windows系統(tǒng)
- 1.3 如何開始使用git
- 1.4 git常用命令介紹
- - 1.4.1 初始化本地倉庫
  - 1.4.2 本地的代碼如何提交到遠程網(wǎng)站中
  - 1.4.3 遠程的代碼如何下載/合并到本地中
  - 1.4.4 本地如何進行分支管理
  - 1.4.5 其他命令
2. 注冊GitHub
- 2.1 注冊賬號
- 2.2 配置SSH
3. GitHub Pages
- 3.1 什么是GitHub Pages
- 3.2 Jekyll
- - 3.2.1 Jekyll是什么？
  - 3.2.2 Jekyll配置
- 3.3 創(chuàng)建博客主題網(wǎng)站
- - 3.3.1 創(chuàng)建博客頁面
  - 3.3.2 訪問博客頁面
  - 3.3.3 克隆（clone）到本地倉庫
  - 3.3.4 博客網(wǎng)站創(chuàng)建的網(wǎng)頁基礎(chǔ)
  - - 1）HTML的主體結(jié)構(gòu)
    - 2）網(wǎng)絡(luò)請求初步認知
  - 3.3.5 修改模板并發(fā)布
- 3.4 用Docker搭建服務(wù)器
- - 3.4.1 購買服務(wù)器及域名
  - 3.4.2 購買域名（此項略，不懂的可自行百度）
  - 3.4.3 遠程連接服務(wù)器
  - 3.4.4 使用Docker搭建環(huán)境
- 3.5 上線博客
- - 3.5.1 安裝Ruby
  - 3.5.2 上傳網(wǎng)站
  - 3.5.3 訪問博客

1. git代碼管理工具

1.1 git簡介

用于團隊協(xié)作開發(fā)（相當(dāng)于中轉(zhuǎn)站；GitHub，號稱程序員的Facebook。也被戲稱為全球最大的男性交友網(wǎng)站）
用于分支（本地/遠程）管理

簡單說，它是一個具有版本管理功能的代碼倉庫，每個項目都有一個主頁，列出項目的源文件。

Git是一個分布式的版本控制系統(tǒng)，與集中式的版本控制系統(tǒng)不同的是，每個人都工作在通過克隆建立的本地版本庫中。也就是說每個人都擁有一個完整的版本庫，查看提交日志、提交、創(chuàng)建里程碑和分支、合并分支、回退等所有操作都直接在本地完成而不需要網(wǎng)絡(luò)連接。

對于Git倉庫來說，每個人都有一個獨立完整的倉庫，所謂的遠程倉庫或是服務(wù)器倉庫其實也是一個倉庫，只不過這臺主機24小時運行，它是一個穩(wěn)定的倉庫，供他人克隆、推送，也從服務(wù)器倉庫中拉取別人的提交。

1.2 git的下載與安裝

1.2.1 MAC電腦

命令行安裝：運行brew install git即可直接在線安裝。

下載安裝程序安裝
下載地址：https://sourceforge.net/projects/git-osx-installer/

1.2.2 Windows系統(tǒng)

不能直接命令行安裝，要先下載，然后雙擊運行exe文件來完成安裝。
下載地址：https://git-scm.com/downloads/

安裝之后，在任意一個文件夾中單擊鼠標(biāo)右鍵，均可看到git bash here菜單項。單擊該菜單項，即可在該文件夾中打開終端命令行工具。

軟件自帶一個命令行工具（cmd/powerShell）

1.3 如何開始使用git

在常用驅(qū)動器（如d盤、f盤）中新建一個文件夾（例如命名為projectCSDN），打開這個文件夾，右鍵，點擊git bash here項，此時即是在項目根目錄中打開命令行工具。

注意，如果此時馬上要在這個空白文件夾內(nèi)開始一個項目，需要在git bash here命令行內(nèi)先git init初始化本項目文件夾后（即本地倉庫）再開始項目。

如圖所示：

1.4 git常用命令介紹

1.4.1 初始化本地倉庫

git init

——本質(zhì)：在項目根目錄中新建了一個隱藏文件夾（.git）

1.4.2 本地的代碼如何提交到遠程網(wǎng)站中

// 將本地代碼推到本地倉庫中的暫存區(qū) git add

注：刪除文件后需要 git add -A, 光 git add. 不行，區(qū)別如下：
git add -A 保存所有的修改 git add . 保存新的添加和修改，但是不包括刪除 git add -u 保存修改和刪除，但是不包括新建文件。所以默認使用git add -A就行。

// 將暫存區(qū)的代碼正式提交到本地本地版本庫 git commit -m "本次提交描述"

注：此命令會將git add .存入暫存區(qū)的修改文件提交至本地倉庫中，若文件未添加至?xí)捍鎱^(qū)，則提交時不會提交任何修改。

// 將本地版本庫中的代碼提交到遠程版本庫（將本地分支的更新，推送到遠程主機） git push <遠程主機名> <本地分支名>:<遠程分支名> git push origin master

注：上面命令表示，將本地的master分支推送到origin主機的master分支。如果master不存在，則會被新建。
手動添加遠程主機別名：

git remote add <別名> <真實主機名> // 別名習(xí)慣上常用 origin 表示

如果省略本地分支名，則表示刪除指定的遠程分支，因為這等同于推送一個空的本地分支到遠程分支。

$ git push origin :master // 等同于 $ git push origin --delete master

上面命令表示刪除origin主機的master分支。如果當(dāng)前分支與遠程分支之間存在追蹤關(guān)系，則本地分支和遠程分支都可以省略。

$ git push origin

上面命令表示，將當(dāng)前分支推送到origin主機的對應(yīng)分支。如果當(dāng)前分支只有一個追蹤分支，那么主機名都可以省略。

$ git push

1.4.3 遠程的代碼如何下載/合并到本地中

// 當(dāng)你本地還沒有項目代碼的時候，需要完整的下載一個遠程項目，要用到此命令 git clone -b 遠程分支名遠程地址

如果不加-b 也就是不指定哪個分支會默認master分支

// 拉取遠程版本庫中所有有變化的分支中的內(nèi)容 git fetch // 合并某個拉取下來的分支中的代碼 git merge 指定遠程某分支

1.4.4 本地如何進行分支管理

// 查看本地有哪些分支 git branch git checkout 分支名 // 切換分支 git branch 分支名 // 新建分支

1.4.5 其他命令

2. 注冊GitHub

2.1 注冊賬號

1）訪問GitHub官網(wǎng)主頁：https://github.com/
2）點擊Sign up切換到注冊頁,填寫好注冊信息后點擊 Sign up for GitHub 注冊

2.2 配置SSH

為了免密碼登陸，就得需要一個“憑證”（電腦憑證：指代當(dāng)前電腦）在命令行工具中輸入以下命令：

// 查詢電腦中是否已存在這個憑證（本質(zhì)：獲取憑證） cat ~/.ssh/id_rsa.pub // 生成憑證（如果沒有） ssh-keygen -t rsa -C "郵箱"

注：此郵箱為你在Github注冊時的郵箱（僅作為標(biāo)識）

3. GitHub Pages

3.1 什么是GitHub Pages

GitHub的超高人氣和強大的功能，但是對于一個新手來說，看到一大堆源碼，只會讓人頭暈?zāi)X漲，不知何處入手。他希望看到的是，一個簡明易懂的網(wǎng)頁，說明每一步應(yīng)該怎么做。因此，github就設(shè)計了Pages功能，允許用戶自定義項目首頁，用來替代默認的源碼列表。所以，github Pages可以被認為是用戶編寫的、托管在github上的靜態(tài)網(wǎng)頁。

簡單的說，它的作用是：

◎ 可用較為簡單的語言上線自己的一個項目；◎ 提供了gitHub域名服務(wù)器中的一部分空間。

github提供模板，允許站內(nèi)生成網(wǎng)頁，也允許用戶自己編寫網(wǎng)頁，然后上傳。有意思的是，這種上傳并不是單純的上傳，而是會經(jīng)過Jekyll程序的再處理。

3.2 Jekyll

3.2.1 Jekyll是什么？

Jekyll（發(fā)音/'d?i?k ?l/，“杰克爾”）是一個靜態(tài)站點生成器，它會根據(jù)網(wǎng)頁源碼生成靜態(tài)文件。它提供了模板、變量、插件等功能，所以實際上可以用來編寫整個網(wǎng)站。

然后，你需要事先在本地編寫符合Jekyll規(guī)范的網(wǎng)站源碼，然后上傳到GitHub，由GitHub生成、托管整個網(wǎng)站。

這種做法的好處是：

　◎ 免費，無限流量。◎ 享受git的版本管理功能，不用擔(dān)心文章遺失。◎ 你只要用自己喜歡的編輯器寫文章就可以了，其他事情一概不用操心，都由GitHub處理。

它的缺點是：

◎ 有一定技術(shù)門檻，你必須要懂一點git和網(wǎng)頁開發(fā)； ◎ 生成的是靜態(tài)網(wǎng)頁，添加動態(tài)功能必須使用外部服務(wù)，比如評論功能就只能用disqus。 ◎ 不適合大型網(wǎng)站，因為沒有用到數(shù)據(jù)庫，每運行一次都必須遍歷全部的文本文件，網(wǎng)站越大，生成時間越長。

3.2.2 Jekyll配置

_config.yml文件：這是需要使用者進行自定義的文件，項目中會進行讀取。

3.3 創(chuàng)建博客主題網(wǎng)站

3.3.1 創(chuàng)建博客頁面

1）點擊 http://jekyllthemes.org/ 進入博客主面后，選擇自己中意的模板，再點擊 Homepage 按鈕，進入GitHub項目倉庫。

2）單擊屏幕右上角的叉子（意為克隆代碼倉庫）；

3）修改項目名稱

注意：這里的名稱的格式為：

github用戶名.github.io

單擊 Rename ，保存重命名。

3.3.2 訪問博客頁面

通過上面的操作，就可以在瀏覽器訪問博客頁面啦~

例如，訪問我新建的博客頁面：https://oldriveres.github.io/

3.3.3 克隆（clone）到本地倉庫

注意，問號左邊的文字必須是“Clone with SSH ”，如果不是，請點擊右邊的“Use SSH”。再復(fù)制下邊的鏈接，粘貼到Git Bash Here命令行中，如：

$ git clone git@github.com:oldriveres/oldriveres.github.io.git

在命令行窗口里paste（粘貼），再跟上一個文件夾名稱，回車即開始克隆。

3.3.4 博客網(wǎng)站創(chuàng)建的網(wǎng)頁基礎(chǔ)

1）HTML的主體結(jié)構(gòu)

HTML不屬于標(biāo)準(zhǔn)的圖靈完備語言（圖靈完備語言：可以參與任何情況下的計算的語言）。它僅僅是一種標(biāo)記語言，通俗的說是被一組尖括號包裹著的英文單詞，這樣的一組標(biāo)記稱之為標(biāo)簽。
基本格式如下：

<標(biāo)簽名屬性名1=“屬性值” 屬性名2=“屬性值”> 內(nèi)容 </標(biāo)簽名>

HTML的屬性 —— 根據(jù)不同的屬性設(shè)置可以展示出不同的樣式效果。
除了常見的雙標(biāo)簽（一組尖括號）外，還有一些標(biāo)簽采用單標(biāo)簽的形式，例如：<meta />。

2）網(wǎng)絡(luò)請求初步認知

請求地址：任何一個請求都需要完整的URL
例如：” http://www.w3school.com.cn:80/html/index.asp；

發(fā)起網(wǎng)絡(luò)請求需要具備的要素：

協(xié)議
包括：http、https、ws、wss、ftp、sftp、rtmp…

1）協(xié)議雙方

客戶端：即發(fā)送請求的軟件（例如瀏覽器：谷歌瀏覽器火狐瀏覽器 …… ）；
服務(wù)端：即接收并處理請求的軟件（webServer：nginx apache tomcat…）。

2）協(xié)議的內(nèi)容：亦即處理請求的方式。

域名
1）服務(wù)器：其本質(zhì)就是一臺高配的電腦。
2）IP地址：任何一臺聯(lián)網(wǎng)的電腦都有一個IP—— 在浩瀚的網(wǎng)絡(luò)中你的電腦的唯一標(biāo)示，相當(dāng)于門牌地址。
3）域名就是IP的別名，一般由三段組成（你花錢購買的是“名+后綴”）；

端口
1）端口作用：為一個軟件“運行”提供的一個入口；
2）為webServer的運行提供的一個入口；
3）如果你發(fā)送的是https請求，那么就會在完整URL地址末尾自動拼接上:443；
4）如果你發(fā)送的是https請求，那么瀏覽器就會自動的在完整URL地址末尾拼接上:80；例如：

https://www.w3school.com.cn:443/tags

只不過這個瀏覽器自動拼接的端口號對普通使用者來說是看不到的。

地址
1）網(wǎng)絡(luò)請求的本質(zhì)是：打開遠程電腦中的一個文件，讀取其中的內(nèi)容并返回數(shù)據(jù)（返回數(shù)據(jù)的術(shù)語叫做響應(yīng)）；
2）你要打開的那個文件的路徑（絕對路徑、相對路徑）
絕對路徑：相對于根文件夾而言的路徑；
相對路徑：相對于當(dāng)前文件夾而言的路徑（參照物：網(wǎng)站根目錄（是可以自定義的）；

參數(shù)
是訪問網(wǎng)頁中需要攜帶的一些數(shù)據(jù)；
在URL地址中，?后面是參數(shù)，多個參數(shù)之間用&鏈接，例如：
https://www.baidu.com:443/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd=2325

3.3.5 修改模板并發(fā)布

1）Git Bush Here命令行中，輸入命令:

cd blog // blog是clone 遠程倉庫時，在項目根目錄下創(chuàng)建的文件夾，里面存放有clone下來的網(wǎng)站文件。

2）然后鍵入ls命令，可以查看當(dāng)前目錄下的文件。

3）由于我修改了倉庫中的代碼，這里鍵入git status 后回車，這時可以看到修改過的 _config.yml這個文件變成了紅色，表示還沒有推到暫存區(qū)。

4）依次輸入下面兩行代碼后，發(fā)現(xiàn) _config.yml這個文件的標(biāo)識色已經(jīng)變綠了，這就表示已推到了暫存區(qū)，但還沒有正式推到本地版本庫。

git add .

git add . ：將本地代碼推到本地倉庫中的暫存區(qū)。

git status

5）再執(zhí)行以下命令：

// 執(zhí)行提交到版本庫的命令。git commit -m "first config" git commit -m：將暫存區(qū)的代碼正式提交到本地版本庫 “first config” 僅作為本次提交的備注信息，可隨便寫

注：如果報錯，請確認您的git工具是否是首次安裝，并且是首次提交（見下圖）。

執(zhí)行完這兩行代碼，再回頭執(zhí)行g(shù)it commit -m 即可。

6）再次執(zhí)行 git status ，查看工作區(qū)中的文件狀態(tài)如下：

顯示已經(jīng)沒有東西需要提交，工作區(qū)是干凈的（即上一步的操作已提交成功！），此時即可執(zhí)行g(shù)it push命令，命令格式如下：

git push 遠程地址本地分支名:遠程分支名

這里要說明一下遠程地址的獲取：

注意這里也一定要像clone時一樣，用SSH鏈接。如果不是，請切換。代碼示例如下：

// $ 這個符號不需要輸入 $ git push git@github.com:oldriveres/oldriveres.github.io.git master:master

稍等片刻即可完成。。。如下所示：

至此，修改文件代碼并提交本地版本庫工作完成，網(wǎng)站已可正常訪問：
本文Demo訪問地址：https://oldriveres.github.io/

3.4 用Docker搭建服務(wù)器

如果不想忍受Github蝸牛般的速度，可自己搭建個人博客的服務(wù)器

3.4.1 購買服務(wù)器及域名

可選系統(tǒng)（鏡像）
- windows
- linux
  - ubuntu（推薦）
- mac
工具軟件
- Xshell：用來登陸遠程服務(wù)器用終端控制遠程服務(wù)器
- Xftp ：給遠程服務(wù)器上傳文件（網(wǎng)站程序）

本實例采用阿里云進行介紹，阿里云官方網(wǎng)址：https://www.aliyun.com/

進入官網(wǎng)，點擊免費注冊，在注冊框中錄入應(yīng)信息并完成注冊。已有帳號的直接點擊登錄。

登錄后，選擇 “產(chǎn)品分類”→“云計算基礎(chǔ)”→ “云服務(wù)器ECS”，如圖：

點擊后，進入購買頁面：

點擊立即購買，轉(zhuǎn)到如下頁面，根據(jù)自身需求選擇相關(guān)選擇：

本頁配置好后，點擊進入下一步：

再點下一步，進入第三個頁面：

進入下一步：

接下來，進入控制臺

記錄下IP(公網(wǎng))，打開Xshell，連接到服務(wù)器。

3.4.2 購買域名（此項略，不懂的可自行百度）

3.4.3 遠程連接服務(wù)器

輸入cd / 進入根目錄，鍵入 ls（查看命令）可以看到當(dāng)前目錄下的文件列表。cd + ls 配合使用相當(dāng)于windows的雙擊。

cd /

這樣就能看到Ubantu系統(tǒng)的所有文件夾。再次輸入cd ，回到購買登錄時的位置。

cd // m01sfae3Z:~#

3.4.4 使用Docker搭建環(huán)境

博客是一個純粹靜態(tài)網(wǎng)頁，想把博客放上去運行，只需要WebServer就可以實現(xiàn)需求。這里我們采用Docker（當(dāng)前幾乎所有的商業(yè)環(huán)境都是用Docker搭建的，也可以用nginx搭建）。
1）修改鏡像源
進入阿里云鏡像站

2）備份鏡像源那個文件

終端中輸入命令如下：

mv /etc/apt/sources.list /etc/apt/sources.list.bak

3）新建鏡像源文件

輸入以下命令進入編輯器，然后按a鍵進入編輯模式。接著復(fù)制阿里云官方ubuntu16.04的配置，并粘貼到 vim編輯器中。

vim /etc/apt/sources.list

Ubuntu 16.04配置如下：

deb http://mirrors.aliyun.com/ubuntu/ xenial main deb-src http://mirrors.aliyun.com/ubuntu/ xenial maindeb http://mirrors.aliyun.com/ubuntu/ xenial-updates main deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates maindeb http://mirrors.aliyun.com/ubuntu/ xenial universe deb-src http://mirrors.aliyun.com/ubuntu/ xenial universe deb http://mirrors.aliyun.com/ubuntu/ xenial-updates universe deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates universedeb http://mirrors.aliyun.com/ubuntu/ xenial-security main deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main deb http://mirrors.aliyun.com/ubuntu/ xenial-security universe deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security universe

鍵盤上按ESC，退出編輯模式，再在命令行輸入:wq，敲回車保存修改。

4）更新源信息
鍵入以下命令：

apt-get update

如圖：

5） ubuntu 16.04 安裝docker 以及docker-compose

安裝Docker：

apt-get install docker.io

出現(xiàn)提示，敲 Y 后回車開始安裝。

安裝已完成，查看是否安裝成功：

docker -v

回車運行后如圖：

出現(xiàn)版本號即安裝成功！

在Linux系統(tǒng)中如何查看某個軟件是否安裝成功
- 該軟件名(命令名) -v 或者該軟件名(命令名) --version
這兩個命令幾乎在所有的Linux系統(tǒng)中都支持

6）更換Docker鏡像源

訪問https://cr.console.aliyun.com/cn-beijing/instances/mirrors
分別執(zhí)行類似以下的代碼

sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-'EOF' {"registry-mirrors": ["https://tmnlz401.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo systemctl restart docker

執(zhí)行完畢即完成了鏡像源更換。

7）安裝docker-compose

a、執(zhí)行安裝命令：

sudo curl -L "https://get.daocloud.io/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

b、給docker-compose添加執(zhí)行權(quán)限

chmod +x /usr/local/bin/docker-compose

將課件中的docker文件夾拖拽到服務(wù)器中的家目錄（你一開始進入服務(wù)器時所在的文件夾）
docker文件夾下載：https://pan.baidu.com/s/18-YvgN_WrDDoP8PlYG8DKQ 　　提取碼：kf8n

說明：上傳前，請將docker\phpdocker\nginx下的nginx.conf文件修改為正確的域名，如下圖

c、查看docker-compose是否安裝成功

docker-compose -v

出現(xiàn)版本號即為成功。

安裝nginx 搭建環(huán)境

在Xshell中鍵入命令：

// 進入docker文件夾cd docker

執(zhí)行 docker-compose up -d命令啟動docker

3.5 上線博客

上線博客
- 在你本機安裝ruby
- 在本機終端敲擊 gem install jekyll(大概5分鐘左右)
- 在本機終端敲擊jekyll -v 出現(xiàn)版本號即為成功
- 在項目根目錄中 jekyll build 就會出現(xiàn)_site
在linux系統(tǒng)中如何查看某個軟件是否安裝成功
- 該軟件名（命令名） -v 或者軟件名（命令名） --version
- 出現(xiàn)版本號即為安裝成功
為了上線那我們的博客，我們只需要安裝nginx——webServer即可

3.5.1 安裝Ruby

下載地址：https://rubyinstaller.org/downloads
選擇2.6版本，下載后直接安裝，并在本機運行cmd 命令行工具，輸入如下命令：

gem install jekyll

查看是否安裝成功：

ekyll -v

進入blog項目文件夾，執(zhí)行項目打包：

jekyll build

用ls查看項目文件夾，會發(fā)現(xiàn)多了一個_site文件夾（這個文件夾里的所有文件就是要放到網(wǎng)站上的文件）。然后用Xftp將文件上傳到服務(wù)器。

3.5.2 上傳網(wǎng)站

逐級點開文件夾：/root/docker/www/blog
即：把文件放到docker文件夾下面的www文件夾下的blog文件夾里。

刪除原有的html測試文件。將左邊本地的文件全部選中拖拽到右側(cè)服務(wù)器blog文件夾下(稍等即上傳成功)。

3.5.3 訪問博客

如果沒有域名，可直接用IP地址訪問，如下格式：
http://47.125.149.121（注：此鏈接僅為舉例，不可訪問）

至此案例完成。

總結(jié)

以上是生活随笔為你收集整理的GitHub博客开发上线实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue 过渡效果的组件
下一篇： linux-centos7 常用的基本命