hexo 搭建个人博客网站

hexo搭建个人博客

摘要

主要记录一下搭建网站的步骤，以及搭建好之后该怎么修改yml文件，使自己的网站看起来好看些，后期发布文章等等。。。此搭建全程免费，非常的不错（除了更改域名之外)
有什么附加功能大家可以一块在留言区讨论。
🔑 注释：我的内容从许多博客，帖子中汲取

接下来咱们开始进入正题

搭建网站的前置工具

部分内容参考搭建网站

WebStorm

使用WebStorm进行编写代码

用VSCODE也可以。

Hexo

下载完之后，我们用Hexo框架来搭建网站，这个网站中有许多已经搭建好的网站模板主题。

在本文中我们使用butterfly主题。

在搭建此框架之前，咱们需要下载好Nodejs和Git
可以参考Nodejs和Git这两个博客进行下载。

好的，这些东西配置好之后开始搭建网站。

Hexo配置

桌面右击，打开git bash here输入命令安装（默认位置即可，方面后续配置，不建议修改）

npm install -g hexo-cli

接下来我们在电脑里自己想要放置博客配置和内容的地方新建一个文件夹：
比如说我在E盘建立了一个penny_blog文件夹，以后所有关于博客网站的内容都放在这个文件夹中。

初始化

接下来在新建立的文件夹下打开 git bash here 输入命令：

hexo init

初始化之后，该文件下面会出现以下内容：

这里借用了其他博主的图片。
简单介绍下hexo的文件结构：
public 最终所见网页的所有内容
node_modules 插件以及hexo所需node.js模块
_config.yml 站点配置文件，设定一些公开信息等
package.json 应用程序信息，配置hexo运行所需js包
scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
source 用于存放用户资源（除 posts 文件夹，其余命名方式为 “ + 文件名”的文件被忽略）
我们日常写文的操作都在 source/_post下。

本地运行

接下来我们用WebStorm打开根目录文件夹（比如说:penny_blog这个根目录文件夹）
然后在终端输入：

hexo s

这个s指的是server（本地服务器）

运行之后，会显示

点击链接 http://localhost:4000（图中黄色下划线位置）进行本地预览，默认是hexo内置的landscape 主题

在终端按Ctrl+C退出运行。

这个主题挺丑的，接下来我们更换主题，在Hexo themes可以找到许多主题，可以选择你自己喜欢的就行。我觉得butterfly这个主题特别好看，很可爱哈哈，而且功能很多。

好的接下来我们来讲一下更改主题

主题更改

以下内容参考博文butterfly主题配置

安装butterfly主题

1. 在hexo项目根目录下(penny_blog)下载主题。
   
   在命令端输入：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2. 安装pug 和 stylus 渲染器。

npm install hexo-renderer-pug hexo-renderer-stylus --save

3. 修改项目根目录下的_config.yml文件（称为站点配置文件）

输入以下命令开启主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

4. 升级建议
为了減少升级主题带来的不便，我们可以把主题文件夹中的 _config.yml 重命名为 _config.butterfly.yml，复制到 Hexo 根目录下与_config.yml同级。（本人觉得非常好，要不容易报错）
Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml中，比
如博客的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 _config.butterfly.yml 中࿰