1. 程式人生 > >搭建 Github Pages 個人部落格網站

搭建 Github Pages 個人部落格網站

目錄

引言

關於部落格

寫部落格對於程式猿來說,應該是個優秀的習慣,個人也覺得蠻高大上的 ^_^。網上的部落格論壇網站也多種多樣,個人覺得在長久以來的不斷競爭淘汰中,各大網站的功能等可能都相差無幾了,選擇自己稍微偏好的就可以了。

我的個人情況就是結合CSDN部落格和Github Pages的獨立個人部落格網頁,因為聽說擁有自己的Github主頁也是一件蠻高大上的事 -_- 。

關於Github

然後簡單介紹一下Github以及其Github Pages功能。

GitHub是一個面向開源及私有軟體專案的託管平臺,也是一個分散式版本控制系統,詳情見百度百科

。說到分散式,自然也有另外一種集中式版本控制系統:SVN,有興趣小夥伴可以瞭解百度百科。GIt是SVN的發展版,而且現在主流也是GIt,但某些大公司依然在使用SVN,二者各有優劣,自行體會,此處不做詳解,用一張圖簡單說明:

svn-git

GIthub Pages則是github上的一項功能,可以放置網頁檔案到指定資料夾,然後給你一個專屬域名用於展示一些專案,但現在大多用來開發製作個人部落格網站。接下來就一步步按照我曾經的步驟來搭建個人部落格,順便講講沿途遇到過的坑,如沒有的提及請自行百度。

建立Github賬號

github pages 功能依賴於github賬號,沒有的話先去官網註冊一個:
git-reg


然後好像要郵箱驗證,就是填寫的那個,點選那個驗證連結就註冊成功了。

建立倉庫

有了自己的賬號後,可以跟著官網的引導,建立自己的第一個倉庫,就是 repository
repository

填好資訊
creat-repo

建立完成
complete

到這裡就建立好了自己的倉庫,可以上傳檔案到這個目錄下,接下我們用這個倉庫來使用github pages功能。

填充倉庫

倉庫建好了,接下來就是往裡面裝東西了,就是支撐部落格首頁的一些網頁檔案和配置檔案,對於新手來說要自己編寫這些檔案就有點開玩笑了,所以可以選擇使用已有的主題,你可以選擇複製我的https://github.com/knightyun/knightyun.github.io

,然後選擇自己倉庫,網頁基礎好的同學以後修改網頁內容就行了。

嫌修改麻煩可以跳過這一步,到後面的步驟選擇喜歡的主題

fork

配置Github Pages功能

然後我們來配置github pages

setting

重新命名,注意格式
rename

把上面的頁面向下滑,現在就可以訪問了
website

當然github也提供了一些主題供選擇,點選上面的“choose a theme”按鈕進行選擇
theme

部落格的書寫與上傳

Git基礎

git配置

  • 安裝好後cmd輸入 git 有反應則安裝成功:
    git-cmd

  • 進行如下配置:

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"
NAME指你的暱稱,EMAIL ADDRESS是你的註冊郵箱
  • 然後生成相應的令牌,本地一份,Github 一份,這樣 Github 可以在你使用倉庫的時候,進行校驗確定你的身份。
cd ~/.ssh
mkdir key_backup
ssh-keygen -t rsa -C "*[email protected]*"
注意這裡不是在cmd裡輸入,是使用剛安裝的 git bash 軟體,可以在電腦選單裡面搜尋

然後會生成如下兩個檔案:
git-bash

id_rsa.pub 就是我們待會需要的公鑰檔案,使用命令 cat id_rsa.pub 再將內容複製到剪下板,然後進入github賬號設定裡面貼上

up-setting

選擇新增SSH key:
ssh-key

把剛才複製的內容貼上進去
add-key

然後輸入 ssh -T [email protected] 測試連通狀態

我的Windows版沒有成功,不知道Linux是否成功,報錯如下 ,應該是windows ssh配置問題

error

git Desktop版

如果你也出現以上狀況,不必擔心,git還能使用https協議連線,只不過要每次輸入賬號和密碼,但是可以選擇github官方提供的git desktop軟體:

這裡我是下載過的

git-desktop

介面如下,需要登入,以後提交檔案就方便了,cmd也能使用git提交,不用每次輸入密碼
desktop-face

可以檢視變化檔案,甚至檔案內變化的內容,commit 後點擊 fetch 按鈕提交
這裡寫圖片描述

軟體功能不算複雜,自己摸索一會就會了,圖形介面的軟體使得一些命令列的操作變得容易、友好。

建立本地倉庫

選擇一個本地資料夾,用作儲存本地倉庫檔案,儘量是空資料夾,然後使用命令 git init 初始化資料夾,其實是在當前資料夾下生成一個叫 .git 的隱藏資料夾,裡面是一些配置檔案,不要隨意更改。

使用 git clone https://github.com/name/repository.git 將遠端倉庫克隆到本地此資料夾下,
name 是自己的暱稱,repository 是自己的倉庫名,不要忘記末尾的 .git 字尾。

然後此資料夾下會多一個和你倉儲名一樣的資料夾,內部檔案與遠端倉庫一樣。
local-repo
繫結遠端倉庫,方便提交:

git remote add origin [email protected]:username/username.github.io.git

介紹幾個常用命令:

git add . //新增檔案
git commit -m "commit-messages" //提交本地倉庫
git push origin master //提交遠端倉庫
git pull //拉取遠端檔案,與以下命令類似
git branch temp //建立本地分支
git fetch origin master:temp
git merge master

安裝Jekyll

關於Jekyll

Jekyll是一個簡單免費的生成部落格網頁的工具,可以繫結github,詳情參考官網:https://jekyllrb.com/, 也有一箇中文版的:https://www.jekyll.com.cn/ 方便閱讀。我的部落格就是通過jekyll建立了,上面那個主題網站也是jekyll的,還有一個類似的工具叫“hexo”,自行了解。

上傳修改後的檔案到github倉庫後需要一段時間才能看到網頁的變化或修改效果,所以可以選擇安裝本地jekyll工具進行本地快速預覽。

安裝步驟

  • 安裝Ruby:jekyll依賴於Ruby,需要提前安裝,官網下載連結:http://www.ruby-lang.org/en/downloads/,windows/Linux/Mac的版本都有。
  • 安裝jekyll:cmd命令列輸入 gem install jekyll
    install-jekyl

開啟jekyll

直接輸入 jekyll s 開啟jekyll服務,windows可能會遇到以下問題:
jekyll-error

* 使用 bundle exec jekyll s 命令就可以運行了,如果提示沒有安裝 bundler ,就 gem install bundlerbundle install
* 可能還會提示沒有安裝其他元件,記下名稱, gem install xxx 就可以了

然後就可以成功運行了,退出按 ctrl + c
jekyllstart

* 執行時保持這個視窗不要關閉,瀏覽器輸入 127.0.0.1:4000localhost:4000 進行預覽
* 不過我的windows預覽效果不太好,載入不出圖片,其他系統沒試過

寫部落格與上傳

Markdown基礎

Jekyll使用Markdown語言書寫部落格,markdown是一種簡單易讀的標記性語言,不同於 html,大量的標籤不易於閱讀,寫著也麻煩,用markdown寫部落格很合適。

工具介紹

https://blog.csdn.net/KNIGH_YUN/article/details/79718481這篇文章最後有介紹一些好用的markdown編輯器,自行選擇。
不過每次都用編輯器寫好 .md 檔案然後用 git 上傳到 github 根目錄下的 _post 資料夾好像很繁瑣,Jekyll官方提供了一款方便的部落格編輯器,方便書寫、預覽、上傳,官網連結:http://jekyllwriter.com/,三種系統版本都有。接下來簡單介紹一些使用:

安裝後主介面:
jekyll-writer

新增賬號
add-github

配置 token
add-token
儲存後會生成一個 token ,返回軟體貼上進輸入框就行了
git-token

寫完後儲存並上傳
blog-commit

可以在這裡檢視和修改賬戶下的部落格
look

refresh

軟體其他功能還在完善,自行摸索

圖床介紹

寫部落格就無法避免上傳圖片,圖床就是這麼一個地方,就是一個網站,你發自己的圖片上傳到它的網站,然後它給你一個這個圖片的連結,插入部落格中就能顯示圖片了。

然後在 jekyll writer中配置一下:
qiniu

當然我用的是CSDN線上編輯器寫部落格,圖片能直接上傳到CSDN上,直接生成連結,其工具也能用

關於圖片尺寸

markdown的圖片插入方式 ![title](http://xxx.com/xxx.png/) 是沒辦法修改圖片尺寸的,可以使用html中的 <img>標籤:
<img src="http://xxx.com/xxx.png/" alt="title" width=XXpx height=XXpx>
widthheight 新增想要的尺寸。

域名配置

自己的部落格網站就建好了,想要分享出去的小夥伴就要想辦法讓自己的網頁能被百度等搜尋引擎搜到,或者這樣,百度搜索: site:name.github.io ,出現錯誤頁面就表示搜不到。

很遺憾,百度是禁止抓取 github pages 的內容的,可以購買一個自己的專屬域名,有很多選擇,阿里雲、騰訊、花生殼域名等,百度站長平臺有個連結提交功能,但是它只是加速爬取,並未解決收錄:
shoulul

貌似它們的熊掌號服務可以解決這問題:
bear

然後,就沒有然後了 -_-
shenhe

以花生殼域名為例,其它大同小異,配置一下:
cname

再新增兩條 github 的ip的 A記錄值 :192.30.252.153 192.30.252.154

最後搜尋: "site:你的域名" 有結果就成功了

最後就開始自己的部落格生涯吧。

返回頂部

技術文章推送
手機、電腦實用軟體分享