【HEXO】从零搭建HEXO博客修改默认主题/参数/favicon 替换个人主页

Near_Li 发布于2019-08-02 11:43 / 2669人阅读

摘要：下面我以主题举例，覆盖默认主题。其他元素使用相同的方法都可以修改。像这种超链接跳转的修改，在文件中找到直接把属性的值改变即可。

准备：搭建环境

大致分为以下两步：

安装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 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]
像这种超链接跳转的修改，在文件中找到直接把href属性的值改变即可。

修改网站标志

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

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

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

替换个人主页

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

混合云云服务器 hexo 博客cdn加速 hexo hexo-前端 hexo vps

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53079.html

【HEXO】从零搭建HEXO博客修改默认主题/参数/favicon 替换个人主页

摘要：下面我以主题举例，覆盖默认主题。其他元素使用相同的方法都可以修改。像这种超链接跳转的修改，在文件中找到直接把属性的值改变即可。准备：搭建环境大致分为以下两步：安装Node.js 安装git 配置Node.js环境下载Node.js安装 Windows Installer 32-bithttps://nodejs.org/dist/v4.2.3/node-v4.2.3-x...

My_Oh_My 2019-08-29 16:59 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

Paul_King 2019-08-29 12:14 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

zacklee 2019-08-20 15:12 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

hlcfan 2019-08-01 16:31 评论0 收藏0