使用Github+Hexo搭建我的博客

隨着互聯網時代的到來,國內外涌現出愈來愈多的社交網站讓用戶之間分享信息變得更加便捷,那麼你是否也曾想過擁有一個屬於本身的網站,寫文章記錄生活?若是你曾經或如今擁有這樣的想法,就請跟隨這篇文章,充分發揮你的動手能力,快速搭建屬於你本身的我的博客網站,記錄下生活中的美好。
node

搭建步驟

1.GitHub建立我的倉庫git

2.安裝Gitgithub

3.安裝Node.jsshell

4.安裝Hexonpm

5.推送網站windows

6.更換主題瀏覽器

7.發佈文章緩存

Hexo簡介

image
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其餘渲染引擎)解析文章,在幾秒內,便可利用靚麗的主題生成靜態網頁。服務器

Github簡介

image
GitHub 是一個面向開源及私有軟件項目的託管平臺,由於只支持 Git 做爲惟一的版本庫格式進行託管,故名 GitHub。GitHub 於 2008 年 4 月 10 日正式上線,除了 Git 代碼倉庫託管及基本的 Web 管理界面之外,還提供了訂閱、討論組、文本渲染、在線文件編輯器、協做圖譜(報表)、代碼片斷分享(Gist)等功能。目前,其註冊用戶已經超過百萬,託管版本數量也是很是之多,其中不乏知名開源項目 Ruby on Rails、jQuery 等。markdown

搭建過程

Github建立我的倉庫

首先咱們須要註冊一個Github帳號,註冊成功後,使用剛纔註冊的帳號密碼進行登錄。
註冊地址:https://github.com/join?source=header-home
點擊GitHub中的New建立新倉庫,倉庫名應該爲:用戶名.github.io
這個用戶名使用你的GitHub賬號名稱代替,這是固定寫法,好比個人倉庫名爲:1sniper.github.io
image

安裝Git

Git是開源的分佈式版本控制系統,用於敏捷高效地處理項目。
Git下載地址:https://git-scm.com/downloads

Windows 用戶
因爲衆所周知的緣由,從上面的連接下載git for windows最好掛上一個代理,不然下載速度十分緩慢。也能夠參考這個頁面,收錄了存儲於百度雲的下載地址。

安裝完成後,在命令行裏輸入git測試是否安裝成功,若安裝失敗,參看其餘詳細的Git安裝教程。
image
安裝成功後,將你的Git與GitHub賬號綁定,在任意位置鼠標右擊打開Git Bash,或者在菜單裏搜索Git Bash,使用以下代碼設置user.name和user.email配置信息:

git config --global user.name "你的GitHub用戶名"
git config --global user.email "你的GitHub註冊郵箱"

以下圖所示:
image
而後利用如下命令生成ssh密鑰文件:

ssh-keygen -t rsa -C "你的GitHub註冊郵箱"

以下圖所示:
image
而後找到生成的.ssh的文件夾中的id_rsa.pub密鑰,將內容所有複製
image
打開GitHub_Settings_keys 頁面,新建new SSH Key
image
image
Title爲標題,任意填便可,將剛剛複製的id_rsa.pub內容粘貼進去,最後點擊Add SSH key。
添加完成後,頁面以下:
image
另外,當咱們添加ssh密鑰成功後,會收到一封來自Github的郵件,或者咱們能夠在Git頁面檢測是否設置成功,命令以下:

ssh git@github.com

如圖所示:
image
如上則說明成功。這裏之因此設置GitHub密鑰緣由是,經過非對稱加密的公鑰與私鑰來完成加密,公鑰放置在GitHub上,私鑰放置在本身的電腦裏。GitHub要求每次推送代碼都是合法用戶,因此每次推送都須要輸入帳號密碼驗證推送用戶是不是合法用戶,爲了省去每次輸入密碼的步驟,採用了ssh,當你推送的時候,git就會匹配你的私鑰跟GitHub上面的公鑰是不是配對的,如果匹配就認爲你是合法用戶,則容許推送。這樣能夠保證每次的推送都是正確合法的。

安裝Node.js

簡單的說 Node.js 就是運行在服務端的 JavaScript。Node.js 是一個基於Chrome JavaScript 運行時創建的一個平臺。Node.js是一個事件驅動I/O服務端JavaScript環境,基於Google的V8引擎,V8引擎執行Javascript的速度很是快,性能很是好。
Node.js下載地址:https://nodejs.org/en/download/
下載完成後進行安裝,注意安裝Node.js會包含環境變量及npm的安裝,安裝後,檢測Node.js是否安裝成功,在命令行中輸入

node -v

檢測npm是否安裝成功,在命令行中輸入

npm -v

如圖所示:
image

安裝Hexo

Hexo是咱們的我的博客網站的框架, 須要本身在電腦常裏建立一個文件夾,能夠命名爲Blog,Hexo框架與之後你本身發佈的網頁都在這個文件夾中。
建立好後,進入文件夾,按住shift鍵,鼠標右鍵點擊"在此處打開Powershell窗口",使用npm命令安裝Hexo,輸入:

npm install -g hexo-cli

安裝時間較長耐心等待
image
安裝完成後,在剛纔建立的文件夾內點擊鼠標右鍵,選擇"Git Bash Here",初始化咱們的博客,輸入命令:

hexo init

如圖所示:
image
而後按順序輸入如下命令,在本地部署博客,用於檢查網站雛形:

hexo g
hexo s

如圖所示:
image
完成後,打開瀏覽器輸入地址:localhost:4000
能夠看到咱們的網站雛形以下:
image
附:Hexo經常使用命令簡介

npm install hexo -g #安裝Hexo
npm update hexo -g #升級 
hexo init #初始化博客

hexo n "個人博客" == hexo new "個人博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #啓動服務預覽
hexo d == hexo deploy #部署

hexo server #Hexo會監視文件變更並自動更新,無須重啓服務器
hexo server -s #靜態模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定義 IP
hexo clean #清除緩存,如果網頁正常狀況下能夠忽略

推送網站

上面介紹的只是用於本地預覽,接下來要作的是推送網站,也就是發佈網站,讓咱們的網站能夠被更多的人訪問。在進行部署以前,須要解釋一個概念,在blog根目錄裏的_config.yml文件稱爲站點配置文件,以下圖:
image
進入根目錄裏的themes文件夾,裏面也有個_config.yml文件,這個稱爲主題配置文件,以下圖:
image
下一步將咱們的Hexo與GitHub關聯起來,打開站點的配置文件_config.yml,將最後的代碼修改成:

deploy: 
type: git
repo: 這裏填入你以前在GitHub上建立倉庫的完整路徑,記得加上 .git
branch: master

注意:在冒號以後有一個空格(英文格式)
參考以下:
image
保存站點配置文件。
其實就是給hexo d 這個命令作相應的配置,讓hexo知道你要把blog部署在哪一個位置,很顯然,咱們部署在咱們GitHub的倉庫裏。最後安裝Git部署插件,在網站根目錄文件夾下按住shift點擊鼠標右鍵選擇"在此處打開Powershell窗口",輸入命令:

npm install hexo-deployer-git --save

以下圖所示:
image
而後咱們在網站根目錄文件夾下按住shift點擊鼠標右鍵選擇"Git Bash Here",依次輸入三條命令:

hexo clean 
hexo g 
hexo d

如圖所示:
image
image
image
咱們第一次部署的時候會要求輸入Github的帳號密碼,按要求輸入便可,如圖所示:
image
完成後,打開瀏覽器,在地址欄輸入你的放置我的網站的倉庫路徑,即 http://xxxx.github.io 好比個人xxxx就是個人GitHub用戶名,你就會發現你的博客已經上線了,能夠在網絡上進行訪問了。
image

更換主題

若是你不喜歡Hexo的默認主題,能夠在網絡上下載其餘主題進行更換
主題下載地址:https://hexo.io/themes/
將本身喜歡的主題下載以後進行解壓,注意由於大多數主題在Github上下載,咱們須要將文件名更改,例如hexo-theme-next-master,須要更改成next,而後放在網站根目錄下的theme文件夾下,最後修改網站的配置文件中theme這一行爲你的主題名稱,例如:
image
而後咱們在網站根目錄文件夾下按住shift點擊鼠標右鍵選擇"Git Bash Here",依次執行如下命令進行部署:

hexo g
hexo d

咱們能夠看到博客的主題已經更改了:
image

發佈文章

咱們能夠用markdown語法編寫完文章後,將md文件放置於網站根目錄的\source_posts下,而後從新進行部署,或者能夠利用如下命令:

hexo new "博客名字"

直接在\source_posts下生成md文件,而後進行編輯,從新部署。 這樣一篇章新的文章就發表了。

相關文章
相關標籤/搜索