從零搭建HEXO博客 修改默認主題/參數/favicon 替換個人主頁

準備：搭建環境

大致分爲以下兩步：

1. 安裝Node.js
2. 安裝git

配置Node.js環境

下載Node.js安裝

1. Windows Installer 32-bit
   https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi
   2.Windows Installer 64-bit
   https://nodejs.org/dist/v4.2....

保持默認設置，安裝結束後，按win+R，在運行窗口中輸入cmd，回車，打開命令行界面。
輸入：

node -v
npm -v

如果結果如下圖所示，那麼說明你已經安裝成功，如果不正確，那麼就需要你回頭檢查自己的安裝過程。

配置Git環境

下載Git安裝文件：
git官網下載
一路默認選項，安裝完後打開命令提示符，輸入：

git --version

如圖，則表示已經安裝成功。

---

安裝Hexo

在你想要搭建博客的目錄下創建一個文件夾，比如我這裏在E盤創建一個文件夾，叫test，進入test文件夾，右鍵，選擇Git Bash Here

輸入：

npm install -g hexo-cli

可能你會看到一個WARN，但是不用擔心，這不會影響你的正常使用

接着輸入：

npm install hexo --save

安裝好後我們來檢查一下Hexo是否安裝完畢，在命令行輸入：

hexo -v

如果你看到了如圖文字，那麼說明已經安裝成功了。

接着初始化Hexo
輸入：

hexo init

npm install

然後輸入：

hexo s //也可以輸入hexo server

啓動服務

在瀏覽器輸入：http://localhost:4000/

你就會看到默認主題博客界面

---

那如果我們不喜歡這個主題怎麼辦呢?
沒關係，Hexo給我們提供了各式各樣的主題，我們可以在https://hexo.io/themes/中尋找...，更改方法都是一樣的。

下面我以archer主題舉例，覆蓋默認主題。

先按 ctrl+c 停止服務
在命令行輸入

npm install hexo-generator-json-content --save 
git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer

注意：如果你的命令窗口無法使用ctrl+V粘貼，可能是因爲命令窗口的快捷鍵被改變了，你可以嘗試shift+insert來進行粘貼。

100%即安裝成功。
接着打開根目錄下的_confit.yml文件（如果沒有打開yml文件的軟件，你可以使用記事本打開）
查找theme字段（如果找不到你可以按住ctrl+f進行查找），修改屬性爲archer

注意：theme：後的空格是必須的，否則運行服務時會報錯

---

修改網頁內容

如果你想修改網頁的內容，那麼就直接找到源文件進行修改，我在這裏舉個例子，如果你想修改主頁的內容，找到目錄。
主頁是放在public文件夾下的index.html文件
打開

比方說，我想改主標題fi3ework’s Studio.
直接在文件中找到對應的文字

我們可以看到這個div中有標明文章標題與副標題，直接修改，刷新頁面即可。
其他元素使用相同的方法都可以修改。
][11]
像這種超鏈接跳轉的修改，在文件中找到<a> 直接把href屬性的值改變即可。

---

修改網站標誌

同樣，我們在index.html找到這行代碼

我們可以發現，網頁的圖標被命名爲favicon.png
如果我們想要替換掉這個圖標，我們可以創建一個文件夾，把自己的.ico文件放到這個文件夾裏，比如我這裏創建一個icon文件夾

修改路徑（通常圖標的格式爲ico，如果你的圖片爲png格式或jpg格式，我們可以到這個在線轉換格式的網站把圖片轉換爲ico格式 http://tool.lu/favicon/）

---

替換個人主頁

如果你想用自己寫的頁面作爲主頁，那麼把文件命名爲index.html，覆蓋掉public目錄下的index文件即可。
把原本的index.html放到其他目錄上，在新主頁中設置一個超鏈接跳轉就可以嵌套了。