搭建 Github Pages 個人部落格網站
目錄
引言
關於部落格
寫部落格對於程式猿來說,應該是個優秀的習慣,個人也覺得蠻高大上的 ^_^。網上的部落格論壇網站也多種多樣,個人覺得在長久以來的不斷競爭淘汰中,各大網站的功能等可能都相差無幾了,選擇自己稍微偏好的就可以了。
我的個人情況就是結合CSDN部落格和Github Pages的獨立個人部落格網頁,因為聽說擁有自己的Github主頁也是一件蠻高大上的事 -_- 。
關於Github
然後簡單介紹一下Github以及其Github Pages功能。
GitHub是一個面向開源及私有軟體專案的託管平臺,也是一個分散式版本控制系統,詳情見百度百科
GIthub Pages則是github上的一項功能,可以放置網頁檔案到指定資料夾,然後給你一個專屬域名用於展示一些專案,但現在大多用來開發製作個人部落格網站。接下來就一步步按照我曾經的步驟來搭建個人部落格,順便講講沿途遇到過的坑,如沒有的提及請自行百度。
建立Github賬號
github pages 功能依賴於github賬號,沒有的話先去官網註冊一個:
然後好像要郵箱驗證,就是填寫的那個,點選那個驗證連結就註冊成功了。
建立倉庫
有了自己的賬號後,可以跟著官網的引導,建立自己的第一個倉庫,就是 repository:
填好資訊
建立完成
到這裡就建立好了自己的倉庫,可以上傳檔案到這個目錄下,接下我們用這個倉庫來使用github pages功能。
填充倉庫
倉庫建好了,接下來就是往裡面裝東西了,就是支撐部落格首頁的一些網頁檔案和配置檔案,對於新手來說要自己編寫這些檔案就有點開玩笑了,所以可以選擇使用已有的主題,你可以選擇複製我的https://github.com/knightyun/knightyun.github.io
嫌修改麻煩可以跳過這一步,到後面的步驟選擇喜歡的主題
配置Github Pages功能
然後我們來配置github pages
重新命名,注意格式
把上面的頁面向下滑,現在就可以訪問了
當然github也提供了一些主題供選擇,點選上面的“choose a theme”按鈕進行選擇
部落格的書寫與上傳
Git基礎
git配置
安裝好後cmd輸入
git
有反應則安裝成功:
進行如下配置:
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 軟體,可以在電腦選單裡面搜尋
然後會生成如下兩個檔案:
id_rsa.pub
就是我們待會需要的公鑰檔案,使用命令 cat id_rsa.pub
再將內容複製到剪下板,然後進入github賬號設定裡面貼上
選擇新增SSH key:
把剛才複製的內容貼上進去
然後輸入 ssh -T [email protected]
測試連通狀態
我的Windows版沒有成功,不知道Linux是否成功,報錯如下 ,應該是windows ssh配置問題
git Desktop版
如果你也出現以上狀況,不必擔心,git還能使用https協議連線,只不過要每次輸入賬號和密碼,但是可以選擇github官方提供的git desktop軟體:
這裡我是下載過的
介面如下,需要登入,以後提交檔案就方便了,cmd也能使用git提交,不用每次輸入密碼
可以檢視變化檔案,甚至檔案內變化的內容,commit 後點擊 fetch 按鈕提交
軟體功能不算複雜,自己摸索一會就會了,圖形介面的軟體使得一些命令列的操作變得容易、友好。
建立本地倉庫
選擇一個本地資料夾,用作儲存本地倉庫檔案,儘量是空資料夾,然後使用命令 git init
初始化資料夾,其實是在當前資料夾下生成一個叫 .git
的隱藏資料夾,裡面是一些配置檔案,不要隨意更改。
使用 git clone https://github.com/name/repository.git
將遠端倉庫克隆到本地此資料夾下,
name
是自己的暱稱,repository
是自己的倉庫名,不要忘記末尾的 .git
字尾。
然後此資料夾下會多一個和你倉儲名一樣的資料夾,內部檔案與遠端倉庫一樣。
繫結遠端倉庫,方便提交:
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
開啟jekyll
直接輸入 jekyll s
開啟jekyll服務,windows可能會遇到以下問題:
* 使用
bundle exec jekyll s
命令就可以運行了,如果提示沒有安裝bundler
,就gem install bundler
再bundle install
* 可能還會提示沒有安裝其他元件,記下名稱,
gem install xxx
就可以了
然後就可以成功運行了,退出按 ctrl + c
鍵
* 執行時保持這個視窗不要關閉,瀏覽器輸入
127.0.0.1:4000
或localhost: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/,三種系統版本都有。接下來簡單介紹一些使用:
安裝後主介面:
新增賬號
配置 token
儲存後會生成一個 token ,返回軟體貼上進輸入框就行了
寫完後儲存並上傳
可以在這裡檢視和修改賬戶下的部落格
軟體其他功能還在完善,自行摸索
圖床介紹
寫部落格就無法避免上傳圖片,圖床就是這麼一個地方,就是一個網站,你發自己的圖片上傳到它的網站,然後它給你一個這個圖片的連結,插入部落格中就能顯示圖片了。
然後在 jekyll writer中配置一下:
當然我用的是CSDN線上編輯器寫部落格,圖片能直接上傳到CSDN上,直接生成連結,其工具也能用
關於圖片尺寸
markdown的圖片插入方式 ![title](http://xxx.com/xxx.png/)
是沒辦法修改圖片尺寸的,可以使用html中的 <img>
標籤:
<img src="http://xxx.com/xxx.png/" alt="title" width=XXpx height=XXpx>
width
和 height
新增想要的尺寸。
域名配置
自己的部落格網站就建好了,想要分享出去的小夥伴就要想辦法讓自己的網頁能被百度等搜尋引擎搜到,或者這樣,百度搜索: site:name.github.io
,出現錯誤頁面就表示搜不到。
很遺憾,百度是禁止抓取 github pages 的內容的,可以購買一個自己的專屬域名,有很多選擇,阿里雲、騰訊、花生殼域名等,百度站長平臺有個連結提交功能,但是它只是加速爬取,並未解決收錄:
貌似它們的熊掌號服務可以解決這問題:
然後,就沒有然後了 -_-
以花生殼域名為例,其它大同小異,配置一下:
再新增兩條 github 的ip的 A記錄值 :192.30.252.153
192.30.252.154
最後搜尋:
"site:你的域名"
有結果就成功了
最後就開始自己的部落格生涯吧。