搭建属于自己的网站HEXO静态页（一）

（一）方案介绍

1、整体方案如何实现

本地部署nodejs+hexo，本地部署静态网站，再用git上传到github，生成xxx.github.io博客

注册域名，指向github博客，github免费提供了https证书及安全保障。

2、花销

如果你自己买主机（阿里云99一年）+域名（最便宜的20-90一年）+https证书（100元-2000元/年），当然云主机上还得防攻击，搞不好再被人挂马，又要恢复重建。是一笔花销也是。

如果用本方案，那么费用=域名年费（最便宜的20-90一年，com域名一年90RMB左右，cn或top之类的10年300不到），再无其它花钱，算算你一年就几十块钱就有自己的网站。

3、优点和缺点

优点就是便宜还安全。

缺点就是有的网络访问会比较慢、搜索引擎收录效果不好（google太强大了，不需要任设置2天左右直接收录，必应次之，百度之类的。你懂的。。。）。

搭建HEXO并发布可以参考以下几个链接，内容很全，我这篇只是写了我的搭建过程：

1、官方主题链接，里面有详细的配置说明。

jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly

2、这位大佬的全集，写的非常详细，基本无坑。

基于 Hexo 从零开始搭建个人博客系列 | 唐志远

（二）安装基础环境

安装npm

下接去官网下载匹配你系统环境的安装包，一直安装就行

https://nodejs.org/en/download/

安装hexo

安装hexo

npm install -g hexo-cli

安装完成后检查是否成功

hexo -v

安装git

登录官方网站，我用windows，选择对应版本，下载安装就行
Git - Install

至此基础环境就准备好了，下一篇我们开始初始化我们的网站吧

（三）初始化hexo并配置HEXO主题

初始化BLOG

使用超级管理员运行CMD

C:\Windows\System32>d:
D:\>mkdir it-xusir.github.io
D:\>cd it-xusir.github.io
D:\it-xusir.github.io>hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

安装butterfly主题

D:\it-xusir.github.io>git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
Cloning into 'themes/butterfly'...
remote: Enumerating objects: 8155, done.
remote: Counting objects: 100% (732/732), done.
remote: Compressing objects: 100% (417/417), done.
remote: Total 8155 (delta 493), reused 315 (delta 315), pack-reused 7423 (from 2)
Receiving objects: 100% (8155/8155), 3.52 MiB | 4.32 MiB/s, done.
Resolving deltas: 100% (5136/5136), done.

安装渲染器

D:\it-xusir.github.io>npm install hexo-renderer-pug hexo-renderer-stylus --saveadded 35 packages, and audited 266 packages in 5s38 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities

引用主题

修改目录D:\it-xusir.github.io下的_config.yml 配置

theme: landscape
改为
theme: butterfly

拷贝目录D:\it-xusir.github.io\themes\butterfly下的_config.yml到目录D:\it-xusir.github.io下并命名为 _config.butterfly.yml

以后 所有的配置修改几乎都在_config.butterfly.yml上进行

配置好之后，我们来目录下运行一下生成命令。查看是否成功。

D:\it-xusir.github.io>hexo cl && hexo g && hexo s
INFO  Validating config
INFO===================================================================#####  #    # ##### ##### ###### #####  ###### #      #   ##    # #    #   #     #   #      #    # #      #       # ######  #    #   #     #   #####  #    # #####  #        ##    # #    #   #     #   #      #####  #      #        ##    # #    #   #     #   #      #   #  #      #        ######   ####    #     #   ###### #    # #      ######   #5.5.1===================================================================
INFO  Deleted database.
INFO  Deleted public folder.
INFO  Validating config
INFO===================================================================#####  #    # ##### ##### ###### #####  ###### #      #   ##    # #    #   #     #   #      #    # #      #       # ######  #    #   #     #   #####  #    # #####  #        ##    # #    #   #     #   #      #####  #      #        ##    # #    #   #     #   #      #   #  #      #        ######   ####    #     #   ###### #    # #      ######   #5.5.1===================================================================
INFO  Start processing
INFO  Files loaded in 1.56 s
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: archives/2025/10/index.html
INFO  Generated: img/favicon.ico
INFO  Generated: img/friend_404.gif
INFO  Generated: img/404.jpg
INFO  Generated: js/tw_cn.js
INFO  Generated: css/var.css
INFO  Generated: img/error-page.png
INFO  Generated: css/index.css
INFO  Generated: js/search/local-search.js
INFO  Generated: archives/2025/index.html
INFO  Generated: js/search/algolia.js
INFO  Generated: js/main.js
INFO  Generated: js/utils.js
INFO  Generated: 2025/10/21/hello-world/index.html
INFO  Generated: img/butterfly-icon.png
INFO  17 files generated in 528 ms
INFO  Validating config
INFO===================================================================#####  #    # ##### ##### ###### #####  ###### #      #   ##    # #    #   #     #   #      #    # #      #       # ######  #    #   #     #   #####  #    # #####  #        ##    # #    #   #     #   #      #####  #      #        ##    # #    #   #     #   #      #   #  #      #        ######   ####    #     #   ###### #    # #      ######   #5.5.1===================================================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

第一条hexo cl是清除缓存配置（建议每次修改后执行）

第二条hexo g是重新生成页面文件

第三条hexo s是表示起动服务

直接访问http://localhost:4000/http://localhost:4000/即可