從零搭建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放到其餘目錄上，在新主頁中設置一個超連接跳轉就能夠嵌套了。