利用GitHub和HEXO免費搭建個人博客

寫在前面 昨天為了搭建博客,硬是愣愣的搞到兩點多鐘,來來回回裝了十幾遍還沒弄好。今天終于完成了。趁著現在手熟馬上寫一下博客,強化一下記憶。

前言 前天在逛 蟲部落社區 時看到一個帖子。免服務器如何建立個性簡約博客 因為好奇建博客還能免費,就點進去看了一下。別說思路還真行的通,更牛的是作者還是個高中生。厲害了。不過他文章寫得太簡單,估計很少有人能照他寫的做出來。

一、準備

這里講一下搭建博客的好處: 我為什么寫博客 一直沒動手寫

  • 網上有不少的寫作平臺,程序員有各種博客站點。業余的也有「知乎」「簡書」等平臺。不過他們的板式太不夠個性化了。身為 90后的你 00后的我怎么能容忍。
  • 擁有自己命名的博客,里面什么內容都是自己決定。寫個人隨筆,學習心得筆記等,最重要的是足夠

下面簡單梳理搭建博客的主要步驟:

  1. 安裝 node 和 git 軟件
  2. 安裝 Hexo 配置 Hexo
  3. 注冊 GitHub 并創建 且生成 GitHub Pages
  4. 配置SSH秘鑰
  5. 本地的Hexo文件更新到Github的庫中
  6. 新建第一個博客

相關名詞解釋:
Hexo:一種常用的博客框架,有了它建立博客非常簡單。你可以認為它是就是一種博客模板,若想詳細了解Hexo的使用,移步 Hexo官方網站 。其作用相當于(以下「相當于」這三個字后面加粗的內容是給有基礎的小伙伴看得,不理解的可以跳過不影響閱讀)建博客的WordPress

Github:一個全世界程序猿聚集的知名網站。免費的遠程倉庫和開源協作社區。我們需要利用網站里的Github Pages功能來托管需發布到網上的博客的相關文件和代碼。相當于阿里云騰訊云提供 域名 服務器 提的供商

Git: 一種版本控制系統。我們在自己的本地電腦寫博客,如何把博客同步到Github,然后發布到網上去?就需要用這個軟件去寫幾行代碼然后就能搞定,后期用的最多的就是它。相當于電腦的操作系統

Node.js: 提供JavaScript的開發環境,安裝好以后就不用跟它再打交道,所以不用太關注它。相當于我們的電腦吧。

把以上步驟熟讀至背誦,因為操作過程出現的問題多半是不熟導致的。OK
了解大致步驟我們一起來操作。

操作平臺:Win7 64位 其他系統步驟類似

二、安裝 node 和 git 軟件

1.安裝node.js
進入 Nodejs 官網下載適配自己系統的版本
官網:https://nodejs.org/en/download/
除了改一下安裝路徑,其他不懂一路默認就行。

2. 安裝git
進入官網 Git 選擇適配版本下載
官網:https://git-scm.com/download/win
除了改一下安裝路徑,其他不懂一路默認就行。
PS:git官網下可能下載不了文件。原因:只能講請遵守社會主義法律法規。這里送你個下載方法:訪問鏈接: https://github.com/waylau/git-for-win
如果你會翻墻請忽略此方法。

3. 查看安裝效果
檢查以上兩個軟件是否安裝成功。技巧 cmd制作
電腦桌面最左下方>右擊>在搜索程序和文件里輸入 cmd 回車 >分別輸入以下內容

git version
node -v
npm -v

輸入一次回車一次。將會返回版本號(version)。未返回請重新安裝。
圖示如下:


三個版本號

至此,軟件安裝步驟完成。

三、安裝 Hexo 配置 Hexo

  • 安裝Hexo
  1. 安裝npm淘寶源 打開cmd下運行
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    安裝淘寶源只是為了讓接下來的下載地址更換為國內下載鏈接,試了下載速度和安不安沒啥區別,除非你下的東西特別多才能體現出來速度的差別。

下圖里面出現WARN警告,沒事,只要下面有版本號出現,就安裝成功了。


安裝淘寶源
  1. 下載Hexo及其插件
    在桌面右擊,選擇Git Bash Here
    cnpm install hexo-cli -g
    回車 自動下載hexo安裝包
    cnpm install hexo-deployer-git --save
    回車 自動下載支持git的插件包
    ps:如果你沒安裝第一步的淘寶源請把所有的cnpm換成npm,另外如果你重裝系統或者因為別的原因卸載了git文件,但本地的文件還在那就只需要執行上兩行代碼,即可本地部署查看。
    安裝圖示
  2. 解壓安裝配置hexo
    首先建立一個不在C盤的文件夾,我演示是建在D盤里 D:/blog 在此目錄下右擊鼠標點擊Git Bash Here 進入Git命令框,執行下列操作:
    hexo init
    回車 hexo的初始化 相當于解壓

解壓步驟

cnpm install
回車 hexo的安裝

安裝步驟

hexo generate #回車 構建靜態文件
hexo server #回車 啟動server 服務
其中這兩行代碼可以合成一行,如下:
hexo s -g

生成網頁

啟動服務后訪問http://localhost:4000/,即可查看本地服務器效果

最后效果圖

說明:如果提示錯誤 ctr+c 停止本地服務器生成的網頁也就無法訪問了。
hexo server -p 4000

到此本地服務器設置完成。

四、注冊 GitHub 并創建 且生成 GitHub Pages

1. 第一步:注冊或者登陸GIthub賬戶

已有賬號可跳過到第二步
Guthub官網:https://github.com/
點擊sign in

圖一

圖二

完成是可能會有郵件驗證。打開輸入賬號密碼驗證下就行了。

第二步:創建項目代碼庫(reposistory)

1.登陸后點擊New repository

創建庫

2.配置倉庫信息如下圖所示:
[圖片上傳失敗...(image-2523a0-1548604607943)]

注意:倉庫名字的格式為 username(用戶名).github.io 與你剛剛注冊的最好一樣。最下面的 initialize請打上勾。點擊 create repository 創建。

3. 第三步開啟gh-pages功能

點擊github主頁點擊頭像下面的 Your profile,找到新建立的username.github.io文件打開,點擊settings,往下拉動鼠標到GitHub Pages。點擊選擇choose a theme,隨便選擇一個,(之后我們要更改這些丑陋的模板),然后select theme保存就行了。


設置setting

select scheme

ps:第三步可以不做,因為下面鏈接本地和GitHub頁面時,會覆蓋掉。寫在這里熟悉一下,順便練練手。上面注冊賬號很像買域名,創建庫就是買服務器,生成靜態頁面就是兩者的綁定。
至此,服務器也完成了配置。

五、配置SSH密鑰

到上面我們已經完成了一大半了。現在讓我們電腦上生成的頁面放GitHub上,上網輸入網址就能看到我們的網址頁面內容了。但首先的讓它們認識一下。我稱之為「握手」,也就是這里的「秘鑰」,讓它們打開彼此的大門。

第一步 看看是否存在SSH密鑰(keys)

檢查本機用戶home目錄下是否存在.ssh目錄,防止萬一兩人提前認識,我們不是瞎忙活了嗎!桌面右擊,打開Git Bash,并運行:
cd ~/.ssh
返回:bash: d:command ont found
這種簡單的英語不用解釋了吧。沒有,緊接著我們創建秘鑰。

第二步 創建一對新的SSH密鑰(keys)

繼續輸入下面代碼:
ssh-keygen -t rsa -C "your_email@example.com"
這將按照你提供的郵箱地址,創建一對密,「your_email@example.com」里面是你的電子郵件地址。
連續回車三次,你會看到如下代碼

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 

第一行問你是否創建公鑰;第二行文件存儲位置,不手動輸入,默認方式存儲;第三行輸入密碼;第四行密碼確認。我們并沒輸入,因為沒密碼才是最安全的。其實是因為沒用。哈哈哈。


效果圖

這里還要復制一下秘鑰,留著第三步粘貼用,兩種方法:

  • 使用物理路徑 根據上圖 /c/Users/you/.ssh/id_rsa路徑找到文件使用文本編輯器打開復制。
  • 代碼方法 運行如下命令,會將公鑰的內容復制到系統粘貼板(clipboard)中。
    clip < ~/.ssh/id_rsa.pub
    第三步 GitHub寫入密鑰(keys)

打開Github官網登錄后點擊頭像,打開Settings設置

setting

New SSh keys

這里面title 是自己隨便起的名字, key里面粘貼第二步復制的秘鑰,然后點擊添加
ADD keys

第四步 測試是否添加秘鑰成功
繼續寫入代碼:
ssh -T git@github.com
回車后根據提示輸入yes后會得到以下信息,在最后一行看到「Hi username」username你的用戶名,說明ssh配置成功

The authenticity of host 'github.com (192.30.255.113)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.
Hi condorheroblog! You've successfully authenticated, but GitHub does not provide shell access.

第五步 設置用戶信息
現在你已經可以通過SSH鏈接到GitHub了,還有一些個人信息需要完善的。 Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來做權限的處理,輸入下面的代碼進行個人信息的設置,把名稱和郵箱替換成你自己的,名字根據自己的喜好自己取,而不是GitHub的昵稱。分別輸入回車(如果想重新設置 用戶名和郵箱,同樣的方法):

git config --global user.name "username"http://用戶名
git config --global user.email  "youremail@163.com"http://填寫自己的郵箱

電腦和 GitHub 握手成功。繼續下一個握手。

補充如何查看自己的 user.name 和 user.email
git config user.name
git config user.email

六、本地的Hexo文件更新到Github的庫中

  1. 登陸GitHub打開自己的項目 username.github.io
  2. 復制Github項目倉庫地址,即點擊clone or download 綠色按鈕,然后復制文本框里的url地址


    image.png
  3. 修改hexo配置文件 _config.yml
    在我們創建D盤里的blog目錄下找到_config.yml文件,然后右擊用文本編輯器進行修改,打開直接滑到最后,進行替換或手寫都行。其中repo后跟的是Github里復制的地址。
deploy:
  type: git
  repo: https://github.com/condorheroblog/condorheroblog.github.io.git
  branch: master

注意:repo冒號后面一定要是英文的一個空格,我就在這出錯了。

  1. 將hexo部署到Github
    在本地blog目錄下右擊打開Git Bash,輸入一下命令:
    hexo g -d
    命令執行后,會提示輸入Github的賬號和密碼,輸入登陸后,blog項目會自動部署到Github上。
    logo in

    假如這時候,報錯 ERROR Deployer not found: git,那么就是你的deployer沒有安裝成功,你需要執行如下命令再安裝一次:
    cnpm install hexo-deployer-git --save
    這樣,你再執行hexo g -d,你的博客就部署到Github上了。
  2. 訪問博客
    以上操作完成后,我們的博客就會部署到Github上了,我們只需要輸入username.github.io就可以訪問自己的博客了。


    這個頁面可以通過網址訪問表示成功

七、新建第一個博客

接下來你可以自己新建一個文檔來寫下你的第一篇博客并在網頁上測試。

同樣在根目錄D:\blog中右擊git Bash here運行下面命令:

hexo new 第一篇博客
注:第一篇博客是名稱可以隨便修改
然后打開D:\blog\source_posts文件夾,就可以看到一個第一篇博客.md的文件。也可以直接在D:\blog\source_posts中新建一個md文件,我就是這么做的。用支持markdown語法的軟件打開該文件進行編輯即可。
執行以下命令即可在我們的站點看到新的文章。
hexo clean #清除緩存
hexo g #生成文件夾
hexo d#部署 # hexo d與hexo g可合并為 hexo d -g
更多hexo命令參考hexo官方文檔
然后,在網址中輸入username.github.io即可看到你的博客上,出現第一篇博客這篇新的文章。

至此,你的個人博客初步搭建過程就完成了。

以上就是建博客的基本流程,基本上裝個十幾二十遍就熟了。下次寫高級篇,進行博客美化。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容