从零搭建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.3/node-v4.2.3-x64.msi

保持默认设置，安装结束后，按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中有标明文章标题与副标题，直接修改，刷新页面即可。
其他元素使用相同的方法都可以修改。

像这种超链接跳转的修改，在文件中找到<a> 直接把href属性的值改变即可。

---

修改网站标志

同样，我们在index.html找到这行代码

我们可以发现，网页的图标被命名为favicon.png
如果我们想要替换掉这个图标，我们可以创建一个文件夹，把自己的.ico文件放到这个文件夹里，比如我这里创建一个icon文件夹

修改路径（通常图标的格式为ico，如果你的图片为png格式或jpg格式，我们可以到这个在线转换格式的网站把图片转换为ico格式 http://tool.lu/favicon/）

---

替换个人主页

如果你想用自己写的页面作为主页，那么把文件命名为index.html，覆盖掉public目录下的index文件即可。
把原本的index.html放到其他目录上，在新主页中设置一个超链接跳转就可以嵌套了。