从零搭建HEXO博客 修改默认主题/参数/favicon 替换个人主页
准备:搭建环境
大致分为以下两步:
- 安装Node.js
- 安装git
配置Node.js环境
下载Node.js安装
- 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 initnpm 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放到其他目录上,在新主页中设置一个超链接跳转就可以嵌套了。