零基礎搭建Hexo炫酷靜態頁面博客

GitHubPages + hexo 簡介

最近花了兩天的時間搭建了一個博客,使用GitHubPages + hexo

為什么選用GitHubPages + hexo 優點如下:

1.超快速度
Node.js 所帶來的超快生成速度,讓上百個頁面在幾秒內瞬間完成渲染。

2.支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多數插件。

3.一鍵部署
只需一條指令即可部署到 GitHub Pages, Heroku 或其他網站。

4.豐富的插件
Hexo 擁有強大的插件系統,安裝插件可以讓 Hexo 支持 Jade, CoffeeScript。

博客地址

blok.png

前期準備

github賬號
node.js
npm
hexo
注意:(node.js 集成帶有npm,因此只要下載 node.js 就可以了)

github上創建GitHubPages倉庫
GitHubPages
官方參考地址

注意

創建倉庫的時候倉庫名一定嚴格按照 git用戶名.github.io 來命名
創建倉庫完成之后,在本地創建一個站點文件夾 git用戶名.github.io/blog

下載node.js

我是在mac系統上搭建的,下載用的終端brew命令,如果其他系統或者沒有翻墻,可能會有問題,如果下載失敗可以移步Node.js官網,下載最新版本一路安裝即可。
檢測安裝是否成功 終端輸入 node -v ,npm -v 成功則顯示版本號

?  blog git:(master) ? npm -v
5.3.0
?  blog git:(master) ? 

下載 hexo

hexo官方
有詳細的windows和mac用戶的安裝文檔,如果因為防火墻等原因安裝失敗,請使用下面命令安裝,sudo賦予命令最高權限,避免權限不足

?  blog git:(master)  sudo npm install hexo --no-optional

下載git

文檔說明,上面有各個平臺的git下載安裝步驟,按照步驟安裝即可

本地關聯github倉庫

git下載安裝完成之后,需要跟你的github倉庫關聯起來,你需要一個私鑰和公鑰,首先查看本地有沒有

?  ~ git:(master) ? cd ~/.ssh 
?  .ssh git:(master) ? ls
config      id_rsa      id_rsa.pub  known_hosts
?  .ssh git:(master) ? 

如果沒有id_rsa(私鑰)和id_rsa.pub(公鑰)就需要手動生成一個,執行命令

?  ~ git:(master) ? ssh-keygen 

生成雙鑰,然后把公鑰放到github倉庫上,點擊頭像選擇settings

githubkey1.png

左側找到SSH,然后點擊New SSH key,把公鑰的文本內容粘貼進去,就可以了

githubkey2.png

部署hexo

命令介紹

準備工作完成,就可以部署看一下博客界面效果了,先介紹一下hexo常用命令

  • hexo clean 清除編輯后生成的靜態文件,一般部署前都會執行一遍,防止上次部署結果影響新的文件內容
  • hexo generate 編輯生成靜態頁面等
  • hexo server 啟動服務
  • hexo develop 部署到遠程github,需要修改配置文件,稍后介紹

基本上用到的就是這些命令,為了方便可以設置快捷指令,執行如下命令,會在跟目錄生成一個.bash_profile文件,同時打開.bash_profile進入編輯模式

?  ~ git:(master) ? cd ~
?  ~ git:(master) ? vi .bash_profile 

然后輸入以下內容,進行保存,linux命令

alias hexo clean=hexo c
alias hexo generate=hexo g
alias hexo server=hexo s
alias hexo develop=hexo d
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
-- INSERT --

執行如下命令,讓文件生效

?  ~ git:(master) ? source .bash_profile

至此,快捷指令設置完成

本地部署

然后cd進入本地博客根目錄,執行命令

?  ~ git:(master) ? hexo c
?  ~ git:(master) ? hexo d
?  ~ git:(master) ? hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

看到如下信息就可以在本地訪問http://localhost:4000/ 查看博客主頁了

遠程部署

部署到元辰github上需要修改一下本地博客配置文件,找到根目錄的_config.yml文件,修改以下內容

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:你的github名/你的github名.github.io.git
  branch: master

然后就可以執行如下命令部署到github

?  ~ git:(master) ? hexo d

看到如下信息說明部署完成,就可以通過https://你的github名.github.io/ 訪問你的主頁了

INFO  Deploy done: git

部署完成

至此,一個博客模板搭建完成,hexo還支持豐富的插件,包括RSS訂閱,評論系統的接入,文章閱讀量,打賞功能,第三方鏈接,如微博,發郵件等。

接入以上功能,讓自己的博客更加炫酷!可以聯系博主,博客主頁有郵箱,微博,文章底部有微信公眾號等聯系方式。

謝謝!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容