GitHub + Hexo 建站過程記錄

一、背景說明:

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: 主題

-、擴展項: 後續擴展不定時更新

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