一、背景說明:
1. Hexo:Hexo 是一個基於 node.js 製作的快速、簡潔且高效的博客框架。Hexo 可以將我們撰寫的 Markdown 文檔解析渲染成靜態的 HTML 網頁。
2. GitHub:在不購買服務器的前提下,我們的網站需要掛在GitHub Pages上。GitHub Pages是面向用戶、組織和項目開放的公共靜態頁面搭建託管服務,可用於搭建個人博客。首先你需要擁有一個GitHub賬號。然後進入GitHub Pages,一步步做,完成後就能在瀏覽器打開http://username.github.io
了。至此,我們已經利用GitHub Pages搭建好了個人博客雛形了。下面要做的,就是個性化了。
3. 本地環境:這裏只演示mac, 需要安裝 node, npm, hexo。
二、前期準備:
1. 查看必備工具是否完善:
[ yine@zerostudio ~/Code/mine-obj node -v
v12.3.1
[ yine@zerostudio ~/Code/mine-obj npm -v
6.9.0
[ yine@zerostudio ~/Code/mine-obj hexo -v
hexo-cli: 3.1.0
os: Darwin 19.4.0 darwin x64
node: 12.3.1
v8: 7.4.288.27-node.18
uv: 1.29.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
2. 正式開始: 確定擁有了Git、Node.js和Hexo後,進行下一步, 這些工具在mac上都可以用brew進行安裝,這裏就不多說了:
三、建站:
1. 安裝 Hexo 完成後,請執行下列命令,Hexo 將會在指定文件夾中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
2. 新建完成後目錄初始文件如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
3. 這樣Hexo會在該文件夾創建本地博客所需的一切資源。這樣本地博客就搭建好了,輸入以下命令:
hexo s --debug // 啓動本地hexo 服務器,默認localhost:4000可以訪問,可以看到調試信息
這樣就開啓了一個本地博客服務器,打開瀏覽器,在地址欄輸入localhost:4000
,就可以查看本地博客了,hexo默認生成了一片hello world博客。出現問題可以看terminal終端錯誤信息。按control + c
關閉調試。
4. 在github建一個 [yourname].github.io, yourname是你的github的用戶名, 後邊的是固定的github的域名。
5. 同步Hexo博客到Github
在terminal終端,將當前目錄切換到你的本地博客目錄,執行以下命令:
npm install hexo-deployer-git --save
安裝完成之後,打開本地博客目錄的_config.yml
文件,編輯其中的deploy
節點:
deploy:
type: git
repo: https://github.com/[yourname]/[yourname].github.io.git
branch: master
保存配置之後,你可以不着急傳到倉庫,先刷新本地博客,看是否還是原樣,如有問題可以看到terminal終端上的錯誤信息,然後檢查沒問題爲止。
確認無誤之後,在本地博客目錄執行以下命令:
hexo clean // clean本地項目,防止緩存
hexo g // 全拼是:hexo generate,可以簡寫成 hexo g; 根據你編輯的md格式的博客,生成靜態網頁
hexo d // 全拼是:hexo deploy,可以簡寫成 hexo d; 將本地博客發佈到github
然後,在瀏覽器地址欄輸入yourname.github.io
就可以訪問你的博客了,別人也可以通過這個地址訪問你的博客。如果錯誤請重複看以前流程,或參考其他文章,也可以聯繫我.
四、常用指令
hexo init //在指定目錄執行該命令,會將當前目錄初始化爲hexo站點,生成hexo站點所需的一切文件
hexo new “my new blog title” //新建一篇文章。如果沒有設置 layout 的話,默認使用 _config.yml 中的 default_layout 參數代替。如果標題包含空格的話,請使用引號括起來。
hexo s --debug // 啓動本地hexo 服務器,默認localhost:4000可以訪問
hexo clean // 清除緩存,如對本地文件做了修改,同步到遠程驗證修改的效果之前,先clean,清除緩存
hexo generate // 可以簡寫成hexo g 根據markdown文件生成靜態文件
hexo deploy // 或者簡寫成hexo d 將本地修改,部署到遠端
hexo version // 顯示hexo版本
五、擴展項:如何更換主題
Hexo主題非常多,可以參考豐富多彩的Hexo主題,本文選Next爲主題,NexT主題是一套簡約的主題,設置完成之後,就像我的博客現在的樣子,我用的是aria這個主題:https://github.com/AlynxZhou/hexo-theme-aria, 裏面有詳細的配置說明,這裏就不重述了。
配置後調試:
hexo clean
hexo g
hexo s --debug
確認無誤後上傳:
hexo clean
hexo g
hexo d
六、開始寫作
1. 創建一第一篇文章(可以規定文件名格式,修改_config.yml # Writing 下面的new_post_name: :year-:month-:day-:title.md )
$ hexo new "My New Post"
2. 創建標籤,分類,先用以下指令建頁面,然後再修改內容加上:type: "tags" comments: false, 在寫文章時的頭部都加上如下內容:
hexo new page tags
hexo new page categories
---
title: test-a
date: 2020-04-10 17:33:14
tags: test
categories: xxx
---
細心的朋友可能已經發現,這兩個的設置幾乎一模一樣!是的,沒錯,思路都是一樣的。所以我們可以打開scaffolds/post.md文件,在tages:上面加入categories:,保存後,之後執行hexo new 文章名
命令生成的文件,頁面裏就有categories:
項了。
scaffolds目錄下,是新建頁面的模板,執行新建命令時,是根據這裏的模板頁來完成的,所以可以在這裏根據你自己的需求添加一些默認值。
七、Hexo去掉底部強力驅動及主題字樣
1. 找到 \themes\next\layout_partials\下面的footer.swig文件,打開:
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
</a>
</div>
第一條是“由Hexo驅動” 的Hexo鏈接,把xml段刪除,只留兩個單引號''。
第二條是“主題-Next.XX”,將xml段都刪掉,不留引號。
<div class="powered-by">
{{ __('footer.powered', '') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }}
</div>
3. 找到這個地方themes/aria/languages/ 下面的語言文件zh_CN.yml(以中文爲例):
footer:
powered: "由 %s 強力驅動"
theme: 主題
-、擴展項: 後續擴展不定時更新