用Hexo製作自己的靜態部落格

2021-08-10 18:22:38 字數 3848 閱讀 4944

搭建靜態部落格這方面有很多任務具可供選擇,我看了看hexo是乙個很不錯的選擇,使用人數比較多,功能也挺豐富,所以這裡我就選擇hexo來搭建靜態部落格。這篇文章在很多地方也參考了hexo 官方文件。

在安裝hexo之前,首先需要安裝node.js和git兩個工具。

然後輸入下面命令來安裝hexo。

$ npm install -g hexo-cli
安裝好hexo之後,就可以建立部落格了。建立部落格需要輸入以下命令。

$ hexo init $ cd $ npm install
等待npm安裝好所有依賴包之後,部落格就算建立好了。部落格的檔案結構如下面所示。

.

├── _config.yml

├── package.json

├── scaffolds

├── source

| ├── _drafts

| └── _posts

└── themes

在專案外層資料夾中有乙個_config.yml,這是部落格專案的全域性配置檔案,在這裡有很多選項需要我們修改。例如部落格主標題、子標題、描述、作者、語言、時區、部落格位址和根位址等等。這裡列舉的這些位址都需要我們根據自己需求進行修改。

title: 易天的靜態個人部落格

subtitle:

description:

author: 易天

language:

zh-cn

timezone: asia/shanghai

# url

## if your site is put in a subdirectory, set url as '' and root as '/child/'

url:

root: /

下面介紹一下hexo的常用命令,方括號中包括的是可選項,尖括號<>中包括的是必選項。

如果未指定資料夾,hexo會在當前資料夾建立專案檔案。

$ hexo init [folder]
如果未指定布局,會使用配置檔案中的預設布局選項。如果文章標題中含有空格等字元,需要使用雙引號包括標題。

$ hexo new [layout]
該命令會生成部落格的靜態檔案。

$ hexo generate
啟動本地伺服器來開發部落格,預設位址為 http://localhost:4000/ 。

$ hexo server
還有一些命令這裡就不介紹了,需要詳細了解的話可以直接檢視官方文件。

編寫新文章使用下面的命令。

$ hexo new [layout]
預設情況下布局有postpagedraft三個,它們所在的資料夾位置也不同。預設使用post布局,生成的文章會放在source/_posts下。執行完這個命令之後,在該資料夾會出現名為.md的markdown格式檔案,這就是我們的部落格檔案,我們可以按照markdown語法來編輯它。

專案中還有乙個名為scaffolds的資料夾,裡面存放的不同布局的模板。我希望所有文章都有分類屬性,所以需要在post.md中新增categories:一行。這裡在---之間包括的**是文章的屬性,將會由hexo渲染為實際的樣式。我們的部落格文章需要寫在這一部分的後面。

---

title: }

date: }

tags:

categories:

---

這裡我寫了一篇小文章,介紹了一點經驗。

---

title: 在客戶端上登入微軟郵箱時提示您輸出的使用者名稱或密碼不起作用的解決辦法

date: 2017-11-13 18:42:56

tags:

- 疑難雜症

- 電子郵箱

categories:

- 疑難雜症

---有些同學可能會在用微軟郵箱登入outlook或者其他郵箱客戶端的時候,明明輸入的是正確的使用者名稱和密碼,但是卻提示「您輸入的使用者名稱或密碼不起作用」。其實原因很簡單,這是因為你的微軟賬號開啟了二次驗證,而郵箱客戶端並不支援這個功能。

當然解決辦法也很簡單,登入[微軟賬戶更多安全選項](中,然後找到應用密碼這個,將應用密碼作為郵箱密碼輸入到郵箱客戶端中即可解決問題。當然對於xbox等無法登陸的問題,也可以使用這個方法來解決。

寫完之後,使用下面的命令啟動本地伺服器,然後訪問http://localhost:4000/檢視一下部落格效果。

disqus_shortname: yitian-static-blog
假如整個部落格只有少量等靜態資源,我們可以在source資料夾中新建乙個image資料夾,然後將放置進去,在文章中使用markdown標準格式!(/image/xx.jpg)即可訪問。但是假如大部分文章都需要,那麼這種方式就不太適用了。

這時候,我們可以在配置檔案中設定post_asset_folder選項為true。這樣在建立文章時,hexo會同時建立乙個和文章同名的資料夾,我們可以將每個文章單獨的資源放入該資料夾,然後以相對路徑的方使引用。

post_asset_folder: true
舉個例子,假如名為hello.jpg,已經放置到文章同名的資料夾中,那麼在文章中引用,可以使用標準markdown形式![hello](hello.jpg)。不過這種方式僅適用於在文章頁面下,假如在主頁或者歸檔頁面檢視文章,由於相對路徑不同,是無法正常顯示的。

對於這個問題,我們需要使用hexo的標籤外掛程式來解決。這個外掛程式在hexo 3中已經包括到核心包中,所以我們可以直接使用,使用語法如下。如果名或標題有空格,需要使用雙引號包括。

這樣一來,不管在哪個頁面,都可以正常顯示了。

public_dir: docs
然後生成靜態頁面。

$ hexo generate
然後將所有**一起提交到github上,並在設定中選擇docs選項,然後儲存。

然後訪問github pages的路徑,就會發現專案已經出現了,當然樣式都是亂的。因為我們還沒有設定合適的url。本地開發的話,路徑直接就是網域名稱。但是github pages的路徑一般都不是以網域名稱開頭的,所以需要我們按照自己的專案路徑進行修改,下面是我的專案配置。

url: 

root: /my-static-blog/

修改完畢之後別忘了執行hexo generate重新生成靜態檔案,然後再次提交,就可以發現這次專案完美的出現了。

搭建自己的個人部落格(hexo)

首先感謝b站up主codesheep 利用hexo a fast,powerful blog framework 搭建個人部落格需要先裝好node.js和git 以下引號 括起的都為命令,有些還包括引號中還有引號的情況 使用 win r 輸入cmd開啟命令視窗 輸入 node v 檢視node版本 ...

復活hexo靜態部落格的方法

我的個人部落格是通過hexo搭建的,它支援顯示,支援md,無需主機空間,可以滿足我的大部分需求。但是在2年的使用的過程中遇到一些問題,這裡記錄下來。便於下次快速復活它。用過hexo的應該知道,它的檔案是本地儲存的,發布到我們的github倉庫,但是hexo是將我們的md檔案打包解析後再發布的,並沒有...

hexo配置自己的部落格站點

最近業餘時間利用hexo為自己搭建乙個高度自定義的個人站點,站點發布在github上,訪問位址為 本部落格簡單介紹實現此站點的過程。效果圖如下 構建此站點最初的目的主要方便自己使用本人開發的tomato time這個小工具。然後在實施的過程中加入的自己自己琢磨寫的vuemanager。hexo實現了...