概述
建立個人博客的需求由來已久,能擁有自己的技術博客是廣大程序員的夢想。相比於早些時候的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 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 #域名部分請替換爲你自己的
幾分鐘之後,即可通過該域名訪問Hexo站點。 又見蒼嵐
更換主題
hexo主題有很多,默認主題爲landscape。
更換主題需要下載主題包放在Hexo目錄中themes文件夾內,如我下載了Next主題,文件夾如圖所示。
並將
站點配置文件
中主題換成相應的主題名:
主題可以在github現有的工作中挑選。
更多教程
歡迎訪問又見蒼嵐。