Hexo - 博客搭建基礎教程

概述

建立個人博客的需求由來已久,能擁有自己的技術博客是廣大程序員的夢想。相比於早些時候的WordPress、織夢等框架,就個人站點來說,用Hexo搭建博客可以用“怎一個爽字了得”形容。Hexo基於Node.js開發,具有輕量、方便、易部署等特點,主題豐富簡約,依賴github即可構建站點,近些年受到廣泛關注。此篇文章旨在和與我一樣的初學者分享經驗,有疑問歡迎在評論區交流。

準備工作

  • github賬號:需要申請一個屬於你的github賬號,可以在這裏申請

  • git bash: 需要有git bash運行環境,相關安裝和使用教程請詢問度娘

  • Node.js: 必須安裝 Node.js 開發環境,建議參考Hexo 環境搭建

  • 個人域名(可選):申請自己的域名可以有自己專用的地址解析鏈接,我使用百度智能雲申請的域名,用着還不錯,也比較便宜。

  • markdown:Hexo使用Markdown解析文章,不熟悉的同學可以移步Markdown 簡明教程

  • html\css\js基礎: 有最好,沒有也沒關係。

Hexo的安裝、初始化、本地預覽

安裝Hexo

在git bash環境下輸入命令:

npm install -g hexo-cli

初始化Hexo

在選好的文件夾下運行命令,我們以 TestHexo 爲例設立我們的第一個Hexo 站點。

hexo init TestHexo

安裝

cd TestHexo
npm install

完成後在TestHexo 文件夾中會有如下內容:
初始化Hexo文件

如果你堅持到了這裏,那麼恭喜你:

此時本地的Hexo站點已經完成了(什麼不是剛開始麼?? 是的已經結束了)。

本地預覽

爲了查看本地站點實際效果,輸入命令:

hexo server

hexo s

會在本地搭建服務器掛載生成的本地站點,通過訪問 http://localhost:4000 瀏覽自己的網站。
預覽頁面

Hexo 部署到Github

在Github端創建倉庫

倉庫名:<Github 賬號>.github.io

安裝Hexo-git 插件

執行命令:

npm install hexo-deployer-git --save

鏈接本地與遠程倉庫

需要在本地建立SSh key,並添加到遠程的github配置中。可參考Git 連接 Github 遠程倉庫

修改站點配置文件

站點配置文件爲Hexo根目錄下的 _config.yml文件,編輯該文件,找到相關部分並修改。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:<Github賬號>/<Github賬號>.github.io.git  #該地址寫ssh地址,不寫http地址。
  branch: master

推送到Github

依次輸入命令:

hexo g
hexo d

當見到返回:

INFO  Deploy done: git

即爲推送成功。

至此,您的Hexo博客已經搭建在GithubPages, 域名爲https://<Github賬號>.github.io

自定義域名

在站點部署在Github基礎上,您也可以將自己購買的域名解析到剛剛建立的地址。

域名解析

在域名設置界面:

  • 類型選擇爲 CNAME;

  • 主機記錄即域名前綴,填寫爲www;

  • 記錄值填寫爲<Github賬號名稱>.github.io;

  • 解析線路,TTL 默認即可。
    域名配置

提示:域名需要按照國家要求備案
域名備案

倉庫設置

進入github建立的hexo倉庫,點擊settings按鈕設置倉庫,在Custom domin中填入自己的域名,並Save:
倉庫設置

本地設置

在Hexo站點目錄source文件夾中,創建名爲CNAME的文件,並向其寫入自定義域名

 echo www.zywvvd.com >> CNAME    #域名部分請替換爲你自己的

CNAME文件

幾分鐘之後,即可通過該域名訪問Hexo站點。 又見蒼嵐

更換主題

hexo主題有很多,默認主題爲landscape。

更換主題需要下載主題包放在Hexo目錄中themes文件夾內,如我下載了Next主題,文件夾如圖所示。
Themes文件夾

並將站點配置文件中主題換成相應的主題名:
主題配置

主題可以在github現有的工作中挑選。

更多教程

歡迎訪問又見蒼嵐

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