博客是一個老東西了，如果我們想寫博客的話，有兩種選擇，第一種是在博客網(wǎng)站上，例如QQ空間、新浪博客、簡書等網(wǎng)站上申請賬號，然后編寫博客；第二種就是自己找服務(wù)器搭一個博客。搭建博客也有兩種選擇，第一種是搭建動態(tài)博客，這方面最流行的就是WordPress，第二種就是搭建靜態(tài)博客，這方面有很多選擇。說到功能上，動態(tài)博客當(dāng)然更勝一籌，但是所需的服務(wù)器資源比較大，如果想取得較好的效果，就必須花錢購買服務(wù)器資源。靜態(tài)博客功能比較單一，但是由于省資源，所以可以找到很多免費(fèi)部署的資源（例如Github Pages）。

搭建靜態(tài)博客這方面有很多工具可供選擇，我看了看Hexo是一個很不錯的選擇，使用人數(shù)比較多，功能也挺豐富，所以這里我就選擇Hexo來搭建靜態(tài)博客。這篇文章在很多地方也參考了Hexo 官方文檔。

安裝Hexo

在安裝Hexo之前，首先需要安裝Node.js和Git兩個工具。

然后輸入下面命令來安裝Hexo。

$ npm install -g hexo-cli

建立博客

安裝好Hexo之后，就可以建立博客了。建立博客需要輸入以下命令。

$ hexo init <folder> $ cd <folder> $ npm install

等待npm安裝好所有依賴包之后，博客就算建立好了。博客的文件結(jié)構(gòu)如下面所示。

. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes

配置博客

在項目外層文件夾中有一個_config.yml，這是博客項目的全局配置文件，在這里有很多選項需要我們修改。例如博客主標(biāo)題、子標(biāo)題、描述、作者、語言、時區(qū)、博客地址和根地址等等。這里列舉的這些地址都需要我們根據(jù)自己需求進(jìn)行修改。

title: 易天的靜態(tài)個人博客 subtitle: description: author: 易天 language: zh-CN timezone: Asia/Shanghai# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: /

Hexo命令

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

創(chuàng)建新博客項目

如果未指定文件夾，hexo會在當(dāng)前文件夾創(chuàng)建項目文件。

$ hexo init [folder]

創(chuàng)建新文章

如果未指定布局，會使用配置文件中的默認(rèn)布局選項。如果文章標(biāo)題中含有空格等字符，需要使用雙引號包括標(biāo)題。

$ hexo new [layout] <title>

生成靜態(tài)博客

該命令會生成博客的靜態(tài)文件。

$ hexo generate

啟動本地服務(wù)器

啟動本地服務(wù)器來開發(fā)博客，默認(rèn)地址為 http://localhost:4000/ 。

$ hexo server

還有一些命令這里就不介紹了，需要詳細(xì)了解的話可以直接查看官方文檔。

編寫新文章

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

$ hexo new [layout] <title>

默認(rèn)情況下布局有post、page、draft三個，它們所在的文件夾位置也不同。默認(rèn)使用post布局，生成的文章會放在source/_posts下。執(zhí)行完這個命令之后，在該文件夾會出現(xiàn)名為<title>.md的markdown格式文件，這就是我們的博客文件，我們可以按照markdown語法來編輯它。

項目中還有一個名為scaffolds的文件夾，里面存放的不同布局的模板。我希望所有文章都有分類屬性，所以需要在post.md中添加categories:一行。這里在---之間包括的代碼是文章的屬性，將會由Hexo渲染為實際的樣式。我們的博客文章需要寫在這一部分的后面。

--- title: {{ title }} date: {{ date }} tags: categories: ---

這里我寫了一篇小文章，介紹了一點經(jīng)驗。

--- title: 在客戶端上登錄微軟郵箱時提示您輸出的用戶名或密碼不起作用的解決辦法 date: 2017-11-13 18:42:56 tags:- 疑難雜癥- 電子郵箱 categories: - 疑難雜癥 ---有些同學(xué)可能會在用微軟郵箱登錄outlook或者其他郵箱客戶端的時候，明明輸入的是正確的用戶名和密碼，但是卻提示“您輸入的用戶名或密碼不起作用”。其實原因很簡單，這是因為你的微軟賬號開啟了二次驗證，而郵箱客戶端并不支持這個功能。當(dāng)然解決辦法也很簡單，登錄[微軟賬戶更多安全選項](https://account.live.com/proofs/Manage/additional)中，然后找到應(yīng)用密碼這個，將應(yīng)用密碼作為郵箱密碼輸入到郵箱客戶端中即可解決問題。當(dāng)然對于Xbox等無法登陸的問題，也可以使用這個方法來解決。

寫完之后，使用下面的命令啟動本地服務(wù)器，然后訪問http://localhost:4000/查看一下博客效果。

$ hexo server

添加Disqus評論支持

靜態(tài)博客因為是靜態(tài)的，所以沒有辦法支持評論等功能。不過很多第三方評論服務(wù)都可以通過添加JS代碼的方式讓博客可以支持評論功能。原來國內(nèi)比較著名的第三方評論系統(tǒng)有多說，可惜因為無法盈利已經(jīng)關(guān)閉了。Hexo官方支持Disqus，一個國外的第三方評論平臺。當(dāng)然，為了使用Disqus，首先你需要去注冊一個賬號，并添加一個網(wǎng)站。

默認(rèn)情況下，Hexo的默認(rèn)主題landscape是支持Disqus的，相應(yīng)的源代碼可以查看themes\landscape\layout\_partial/after-footer.ejs文件。當(dāng)主配置文件中存在disqus_shortname選項，而且相應(yīng)URL正確配置的話，Hexo就會自動顯示Disqus評論。這是我的配置，這里的名稱是我的網(wǎng)站的名稱。

disqus_shortname: yitian-static-blog

成功配置之后，在每篇文章下面，應(yīng)該就會看到一個Disqus評論框了。

靜態(tài)資源處理

假如整個博客只有少量圖片等靜態(tài)資源，我們可以在source文件夾中新建一個image文件夾，然后將圖片放置進(jìn)去，在文章中使用MarkDown標(biāo)準(zhǔn)格式即可訪問。但是假如大部分文章都需要圖片，那么這種方式就不太適用了。

這時候，我們可以在配置文件中設(shè)置post_asset_folder選項為true。這樣在創(chuàng)建文章時，Hexo會同時創(chuàng)建一個和文章同名的文件夾，我們可以將每個文章單獨(dú)的資源放入該文件夾，然后以相對路徑的方使引用。

post_asset_folder: true

舉個例子，假如圖片名為hello.jpg，已經(jīng)放置到文章同名的文件夾中，那么在文章中引用圖片，可以使用標(biāo)準(zhǔn)Markdown形式。不過這種方式僅適用于在文章頁面下，假如在主頁或者歸檔頁面查看文章，由于相對路徑不同，圖片是無法正常顯示的。

對于這個問題，我們需要使用Hexo的標(biāo)簽插件來解決。這個插件在Hexo 3中已經(jīng)包括到核心包中，所以我們可以直接使用，使用語法如下。如果圖片名或標(biāo)題有空格，需要使用雙引號包括。

{% asset_link 圖片名 圖片標(biāo)題 %}

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

發(fā)布博客

發(fā)布博客有很多種方式，如果你有一個自己的服務(wù)器，可以選擇FTP、RSync、Git等多種方式發(fā)布到服務(wù)器。當(dāng)然這里為了省事就直接發(fā)布到Github Pages上。由于Github Pages要求靜態(tài)網(wǎng)站在項目的根目錄或者docs目錄下，所以這里還要對項目進(jìn)行一下小修改，在配置文件中將發(fā)布路徑改為docs。

public_dir: docs

然后生成靜態(tài)頁面。

$ hexo generate

然后將所有代碼一起提交到Github上，并在設(shè)置中選擇docs選項，然后保存。

然后訪問Github Pages的路徑，就會發(fā)現(xiàn)項目已經(jīng)出現(xiàn)了，當(dāng)然樣式都是亂的。因為我們還沒有設(shè)置合適的URL。本地開發(fā)的話，路徑直接就是域名。但是Github Pages的路徑一般都不是以域名開頭的，所以需要我們按照自己的項目路徑進(jìn)行修改，下面是我的項目配置。

url: https://techstay.github.io root: /my-static-blog/

修改完畢之后別忘了執(zhí)行hexo generate重新生成靜態(tài)文件，然后再次提交，就可以發(fā)現(xiàn)這次項目完美的出現(xiàn)了。

當(dāng)然這篇文章僅僅介紹了Hexo的一點點知識，Hexo還有豐富的主題、插件可供探索。這里就僅僅拋磚引玉，各位如果有興趣的話請自行探索吧！最后附上我的靜態(tài)博客地址https://techstay.github.io/my-static-blog/，歡迎大家查看！

總結(jié)

以上是生活随笔為你收集整理的用Hexo制作自己的静态博客的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。