手把手教你用github pages搭建博客 最新版

本文來自於我的個人博客,轉載請註明
http://www.woaitqs.cc/2016/06/08/blog-seo-baidu.html

如果給你40分鐘,可以搭建一個如下圖所示的網站,你願意嗎?如果你願意,那我們就開始幹!

woaitqs.cc 博客


背景介紹

搭建博客網站有各種各樣的方法,根據不同的需求,又不同的做法。如果你只是想單純做一個博客,和世界分享你的觀點和視角,那麼我推薦使用 github pages。

  1. github page 學習成本最低,相比其他搭建方式而言,不需要太多的服務器基礎。
  2. 天然基於版本控制,便於對代碼進行遷移。日後若想進行博客的遷移,只需要支持 Jekyll 或者 Hexo 就行。
  3. Github Pages 本身就是一個 git 項目,其他人可以 fork 或者參與到你的博客建設中,這本身可以獨立也可以互相協作,換而言之,這也是你的 contributions , 如下圖所示,當別人進入你的 github 主頁時,就能看到你的活躍程度了。

git contributions

Github Pages 需要相應的博客引擎來驅動,主流的有兩個 https://hexo.io/https://jekyllrb.com/。兩者的使用頻率都比較高,我選擇了 Jekyll,因爲目前國內的 coding.net (國內的github)只支持 Jekyll , 如果日後 github 被牆 (已經短暫發生過…),還可以無縫切換到 coding.net 上。


需要準備的知識和事物

  1. 註冊一個 Github 賬號,點擊這裏進行註冊。
  2. 瞭解一些 git 版本控制系統 的操作原理,如果不熟悉的話,可以通過 git-scm 來進行學習,這個網站在牆外,不能訪問的話,可以參考這個極簡版本 git-guide。在學習 git 的基本操作後,要學會使用這幾個命令 git pull 或者 git fetch, git rebase,以及git push
  3. 購買個人域名(可選),使用 github pages,會給你一個 github
    的域名,例如我的用戶名是 woaitqs,那麼我就有一個 woaitqs.github.io 的域名。如果你想要有一個屬於自己的域名,推薦大家使用 GoDaddy,這個國外的老牌域名服務商。由於這是牆外的服務提供商,在國內還是存在一些不穩定因素,需要搭配 DNSPod 使用。當然如果你嫌需要2個地方折騰麻煩,可以和我一樣選擇用阿里的 萬網 進行域名註冊。

github logo

這麼萌,你確定不要試試嗎?


配置 Github

Github 是出名的版本控制倉庫,所謂倉庫就是存放貨物的地方,而 Github 就是就是存放代碼的倉庫。既然是倉庫,那麼就得要鑰匙,不然別人去我們自己的倉庫裏面偷東西怎麼辦?同時我們也得知道怎麼往倉庫裏放東西,在這一小節,就來看怎麼配置 Github。

  • 安裝 Git 工具,點擊下載並安裝。

  • 使用倉庫前,標明自己的身份(名字和郵箱)。安裝git後,通過命令行打開終端,cmd (windows,需配置環境變量) 或者 Terminal,輸入一下命令。
    git terminal

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"
  • 生成相應的令牌,本地一份,Github 一份,這樣 Github 可以在你使用倉庫的時候,進行校驗確定你的身份。繼續在終端裏面輸入下面的命令。
cd ~/.ssh
mkdir key_backup
ssh-keygen -t rsa -C "*[email protected]*"

這樣在 .ssh 目錄下會有 id_rsa.pub ,使用 cat id_rsa.pub 命令,可參看具體內容。

  • 將 id_rsa.pub(令牌) 傳遞到 Github ,通過 “Account Settings” > Click “SSH Keys” > Click “Add SSH key” 路徑可以提交,如下圖所示
    ass ssh key

  • 再測試一下

ssh -T git@github.com

如果是下面的反應:

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要緊張,輸入yes就好,然後會看到:

Hi <em>username</em>! You have successfully authenticated, but GitHub does not provide shell access.

也可以參考 github 官方教程


博客搭建

後面的 USERNAME 均代表你 Github 的賬號,再使用時請自行替換。

  • 進入你的 github 主頁,選擇 new repository,進入到 新建倉庫 的界面。新建一個 USERNAME.github.com 的倉庫,這裏 USERNAME 是你的 Github 的用戶名,且只能是你 Github 的賬戶名。
    新建倉庫

  • 拉取現有的博客模板進入你的倉庫。這裏https://github.com/plusjade/jekyll-bootstrap.git 也可以是其他博客的倉庫地址,在最開始的階段還是建議選擇 https://github.com/plusjade/jekyll-bootstrap.git 作爲入門的倉庫,該倉庫提供了幾款不錯的樣式。繼續在終端中進行這幾個步驟。

git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
  cd USERNAME.github.com
  git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git
  git push origin master

這裏所完成的事情,就是拷貝一份別人的倉庫,並作爲自己的倉庫,便於日後自己進行自定義的修改。

cheers.jpg

Cheers!來,朋友乾一杯!


第一篇博文

在看到界面之後,現在該看看怎麼寫第一篇博客了。博客的正常工作,需要相關的博客引擎來支持,這就是前文中提及的 jekyll , 在 Github Pages 已經安裝完成了,因而 前面所使用的 http://USERNAME.github.com 才能看到正常的畫面。

那麼如果想在本地也看到效果後,再上傳 Github 的話,可以在本地安裝 Jekyll。Jekyll 的安裝依賴於 Ruby,因而安裝前需要下載 Ruby,具體的步驟如下。

  1. 安裝Ruby : 對於 Windows 用戶而言,非常簡單,從 rubyinstaller.org 下載即可。而 Mac 用戶,最新版的系統已經自帶,無需處理。

  2. 安裝 Gem : 安裝 Ruby 過後,就可以安裝可以在 Ruby 運行的軟件,有一個工具可以幫我們管理 Ruby 軟件,這就是 Gem,類似於 Mac 上的 Homebrew,Ubuntu 上的 apt-get,或者手機上的 豌豆莢 23333。安裝方式也很簡單,rubygems.org 從這個網站上進行下載即可。

  3. 安裝 Jekyll : 有了軟件管理器後,現在要做的事情就是安裝今天的主角 Jekyll ,非常簡單,一行話的事情。

gem install jekyll
  1. 驗證安裝 : 執行 jekyll serve 命令,然後在瀏覽器訪問 localhost:4000 如果一切正常,你就能看到與 Github Pages 上相同的畫面了。

  2. 享受書寫 :首先創建一篇文章,通過 rake 命令即可。rake post title="Hello World" 這樣就創建了一篇 YYYY-MM-DD-title-Hello-world.md 的文章。文章採用的是 markdown 語法進行編寫,關於 markdown 語法,這裏有一篇不錯的文章進行介紹,點擊查看

  3. 本地查看與上傳 : 同樣通過jekyll serve,在瀏覽器中進行查看,如果沒什麼問題的話,現在就可以上傳到服務端。

# 將新添加的文件加入索引中
git add .
# 將這次的修改作爲一個打包
git commit -am "first blood"
# 拉取遠程倉庫的代碼
git fetch
# 與遠程倉庫的代碼進行比對和合並
git rb
# 提交到遠程倉庫
git push origin master

再耐心地等待一小會,訪問這個鏈接 http://USERNAME.github.com 即可查看你提交的內容。


Markdown 語法簡介

markdown 語法十分簡單,非常有利於寫作,這裏做一個簡單介紹,熟悉的讀者可以跳過這一章節。

# 表示標題,## 表示2級標題,同理####表示4級標題

空行表示新的段落,如果不空行的話,markdown 認爲是同一段落

[A](B) 這樣樣式表示爲鏈接,A爲你想要顯示的文字,B爲實際的鏈接

![A](B) 這種樣式表示圖片,A爲圖片的描述文字,B爲圖片鏈接

* 表示無序列表,1,2,3 表示有序列表

以上就是 Markdown 的基本語法。


配置域名

一個小插曲
據說百度爬蟲爬得太猛烈,已經對很多Github 用戶造成了可用性的問題了,而禁用百度爬蟲這一舉措可能會一直持續下去。換而言之,Github Pages 無法被百度索引。這也是我放棄使用 woaitqs.github.io 作爲我域名的緣故。

當然你特有的域名,也是對你自己的一種投資,非常值得。

解決上訴的問題,首先需要買一個域名,因爲萬網自帶雲解析,因爲就直接在萬網買了 woatiqs.cc 的域名。當然也可以使用其他域名服務提供商,建議使用 GoDaddy

接下來需要告知github,現在你有域名了。在根目錄下創建 CNAME 的文件,一定要大寫,在文件中輸入你的域名即可。在 Github 上直接操作,或者在本地操作,與提交博客的方式一樣上傳到 Github 都可以。等上幾分鐘,就可以通過你的域名進行訪問了,點擊 woatiqs.cc 就和 woaitqs.github.io 同樣效果了。

提交 CNAME

接下來解決百度無法索引的問題,從問題出發,既然百度無法對 Github Pages 進行爬蟲,那麼對百度走單獨的通道,不就解決這個問題了嗎?那麼單獨針對百度的鏡像從哪裏來?可以是國內的 Coding.net 也可以是自行搭建的 VPS。方法與配置 Github Pages 類似,就不在贅述,可參考 github屏蔽百度爬蟲的解決辦法

現在針對百度和默認,配置相關的域名解析即可,如下圖所示。
解析配置

當博客訪問量不高的時候,可以試試這個外鏈工具 seo 外鏈生成器


其他資源

在生成相關的博客後,如果想進一步自定義,還需要對 分頁 / 目錄 / 主題 / 摘要 / 圖牀 這些地方進行小的改進,這裏先做簡單介紹,如果讀者有相應需求,可以在詳細說明。

分頁:
通過 jekyll-paginate 來實現,可自定義每頁文章數量。

目錄:
使用 markdown 爲kramdown時,可使用 TOC 工具自動完成。

主題:
繼承他人的樣式,或者自定義修改。

摘要:
我採用了這個註釋的方式,如果檢查到這個註釋,就不再往下顯示。

圖牀:
這裏重點推薦 sm.ms,誰用誰知道。

最後祝大家博客搭建順利,玩的開心!


歡迎各位關注我的公衆號,純手工,分享編程科技方面的前言知識,謝謝大家!
公衆號

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