参考这篇文章,有兴趣读原文【2025最新版】搭建个人博客教程-CSDN博客

之前我折腾的是基于hugo,但是这些主题有点难弄,我就用了最原始简单的,现在弄这个hexo的比较满意

有一些前置的环境准备

  1. 安装git

    $ apt install git  /**/安装git
    $ git --version /**/查看git的版本
  2. 安装node.js环境

    $ sudo apt install npm # 下载npm软件包
    $ sudo apt install nodejs # 下载noede.js环境
    $ npm -v  # 验证环境中是否存在正确的 npm 版本
    $ node -v # 验证环境中是否存在正确的 node 版本
  3. 注册 GitHub 账号,后续要使用github进行托管

安装hexo

1.安装hexo框架

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install hexo-cli -g # 安装hexo

2.初始化hexo

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ sudo npm install hexo -g #安装hexo
$ mkdir blog #此处可以是任意你喜欢的名字
$ hexo init blog #初始化部署hexo

这样就代表我们已经初始化成功了,此时已经可以打开你的博客了,在Bash里面输入:

$ hexo s 

这样就代表我们已经在我们的4000端口搭建好了网站。我们可以进入我们的网站看一下,如下图,这个就是我们使用的hexo框架

3、安装butterfly主题

1.安装butterfly

hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。

在你的 Hexo 根目录里输入以下命令:

$ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly #下载稳定版butterfly主题

当你安装完成之后你可以看到自己的blog/themes下面多了一个butterfly主题,这样就代表我们已经安装好了我们的主题

2.应用主题

修改 Hexo 根目录下的 _config.yml,把主题改为 butterfly

theme: butterfly

3.安装插件

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

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

4.升级建议

为了减少升级主题后带来的不便,请使用以下方法(建议,可以不做):

在 hexo 的根目录创建一个文件 _config.butterfly.yml,并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。这边我建议用cp命令,直接将主题的config内容复制到hexo根目录上

cp themes/butterfly/_config.yml  _config.butterfly.yml

注意:

复制的是主题的 _config.yml ,而不是 hexo 的 _config.yml

不要把主题目录的 _config.yml 删掉

以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml, 配置主题的 _config.yml 将不会有效果。

Hexo 会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置,如果存在同名配置,会使用 _config.butterfly.yml 的配置,其优先度较高。

5.启动环境

hexo s #启动本地环境

4、主题页面

打开hexo根目录的_config.yml,首先出现的时网站的页面配置,我们按需修改我们自己的主题名字和标题

注释是我自己打上去的,记得每一个冒号后面都要空一格,这样才能显示出来效果

然后我们可以在_config.butterfly.yml中配置我们的网站图标

有其他想自己设计捣鼓的可以参考这个博客,我就不一一介绍了

最终我的博客是这样子的

hexo new 我的第一篇博客  #创建标题为“我的第一篇博客”的文章
hexo new 我的第e篇博客 #创建标题为“爱笑的个人博客搭建教程”的文章
hexo cl #清除缓存
hexo s #本地调试预览

部署到GithubPage上

  1. 登录 GitHub,新建一个 Repository,Repository name一定要是你的用户名.github.io

  2. 来到仓库主页,复制如下链接

  3. 打开博客目录下的_config.yml,拉到最后,填写deploy模块:repository 填写刚才复制的链接

  4. 一定要安装 Git 插件:

npm install hexo-deployer-git --save
  1. 现在可以将博客部署上去了,执行
hexo c && hexo g && hexo d  # hexo d 表示执行部署

执行成功可以通过 你的用户名.github.io 来访问博客了。


至此搭建博客并部署已全部完成。