hexo搭建个人博客

发表于

一、搭建思路

采用hexo+guihub搭建，全程免费。

步骤：

1、先安装node.js

2、安装git

二、安装的具体步骤

1、安装node

  1. 打开node官网：

    Node.js — 在任何地方运行 JavaScript (nodejs.org)

​ 官网

  1. 点击下载

  2. 安装

​ 安装时一直下一步即可， 建议安装路径选择其他盘符。

  1. 打开cmd，查看是否安装成功。

    1
    2
    node -v
    npm -v

    1741440353234(1)

2、安装GIT

  1. 打开GIT官网

打开官网：Git (git-scm.com)，下拉选择download for windows

  1. 下载GIT

  • 点进去后，选择64-bit Git for windows Setup.

  • 但因为guihub国内可能存在无法访问的情况，因此若出现页面无法显示的情况，需下载watt tookit.

1
2
#1 进入watt tookit官网，下载windows版本
#2 安装后，点击网络加速-->github-->一键加速，ok
  • 打开watt tookit并加速后，再次下载git.
  • 安装git

  1. 验证是否安装成功

    打开cmd

    1
    git -v

    1741440465972(1)

3、安装VSCODE

配置时采用vscode比较方便。下载并安装.

  1. 官网下载Visual Studio Code - Code Editing. Redefined
  2. 安装vscode，安装好后，在扩展里搜索chinese,安装中文插件，重启vscode,ok.

1741439379024

4、安装hexo

  1. 进入npm镜像站（阿里）

    输入官网地址：npmmirror 镜像站

  2. 主页上复制如下代码：

    npm install -g cnpm –registry=https://registry.npmmirror.com

  3. 调出命令提示符，cmd

1
npm install -g cnpm --registry=https://registry.npmmirror.com

  1. 调出命令提示符，cmd

    1
    cnpm install -g hexo-cli

三、配置

1、vscode

  1. 在电脑中新建文件夹，如d:/code/hexo，vscode启动页面中，选择打开hexo文件夹；
  2. VSCODE中依次选择终端—>新建终端，在新建终端窗口右侧下拉选择==git bash==

image-20250308215429406

  1. 在终端窗口中，输入如下命令：

    1
    2
    3
    4
    5
    6
    hexo init heo#在hexo文件夹下新建heo文件夹
    cd heo#打开heo文件夹
    cnpm install#初始化博客框架
    hexo g
    hexo s#出现博客地址http://localhost:4000/
    ctrl+c#停止

  2. 浏览器中输入http://localhost:4000/，出现博客的初始化页面

    image-20250308224454698

2、主题设置

2.1 下载主题

  1. 进入hexo官网，选择主题

  2. 搜索框中输入butterfly

  3. 在butterfly主题下，复制相关代码

image-20250308224404534

  1. 打开vscode，在终端中输入刚才复制的butterfly主题代码
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  1. 再次回到butterfly主题页面，下拉至configuration项目，复制如下代码：

image-20250308225218099

  1. 打开vscode，在终端中输入刚才复制的渲染器代码
1
cnpm install hexo-renderer-pug hexo-renderer-stylus
  1. 此时可以看到vscode文件夹中themes主题中多了butterfly主题.

2.2 主题配置

  1. 在heo中找到_config.yml

  2. 在_config.yml代码栏里下拉找到theme:landscape,将landscape替换成butterfly，按ctrl+s保存

image-20250308230057058

  1. 在vscode中输入如下代码

    1
    2
    3
    hexo cl #清除
    hexo g  #生成静态文件
    hexo s  #本地查看网页

    复制http://localhost:4000/ 到浏览器中，可以看到主题已经设置成butterfly.

2.3 更改主题图片

  1. 进入hexo网站butterfly主题中，下拉点击可查看demo中最终完成后的样子。

  2. 点击DOC文档，选择chinese,进入文档查看具体配置方案。

  3. 在hexo的根目录创建一个文件用以备份butterfly主题，复制文档中名字

    1
    _config.buterfly.yml

  4. 打开vscode，在hexo根目录下，右键选择新建文件夹，名字为刚才文档中复制的名称。

  5. 点击themes下butterfly主题中的配置文件_config.yml，复制其配置文件代码

  6. 进入第4步中刚创建的文件_config.buterfly.yml，将第5步中复制的buterfly配置代码复制到_config.buterfly.yml中

  7. 对主题进行更改

    • 更改图片

      1
      2
      3
      4
      5
      6
      7
      进入_config.buterfly.yml配置文件中，找到index_img；
      在index_img后输入你想替换的图片的URL，按ctrl+s保存；
      在vscode终端输入窗口中依次输入：
           hexo cl
           hexo g
           hexo s
      进入网页中输入http://localhost:4000/ 可以看到主题里的背景图片已变成你替换后的图片

    • 更改图片的另一种方法

      1
      2
      3
      4
      5
      6
      点击heo-->thmes-->source-->img
      将你想要替换的图片拖入到img文件夹中，可修改文件名，如top.jpg
      在vscode中点开_config.buterfly.yml配置文件
      找到index_img,输入/img/top.jpg,ctrl+s保存
      运行hexo s
      在浏览器中输入http://localhost:4000/，查看此时图片已变化

2.4 更改标题

  1. 进入heo下的根目录，找到_config.yml

  2. 在代码栏里找到title、author等,可根据需要进行修改.

    1
    2
    title:martin's blog
    author:martin

  3. hexo s，在浏览器中查看修改后的标题和作者

3、部署到网页

3.1 注册guithub

  1. 进入guihub官网，按照步骤进行注册，过程需要提供邮箱，以及进行相关验证。
  2. 登录guihub

3.2 在guithub中新建仓库

  1. 在guihub右上角点击“+”，在下拉菜单中，选择“new repository”
  2. 在”repository name”栏中填入你的仓库名，如blog
  3. “Description (optional)”为描述，选填。可填入：我的博客
  4. 下面勾选“public”，选择后公众可访问
  5. 勾选“Add a README file”
  6. 点击“create repository”
  7. 新的仓库创建完成

3.3 获取密钥

  1. 在guihub页面中点击头像，选择”settings”
  2. 下拉到底，选择“developer settings”
  3. 点击“personal access tokens”,选择“tokens(classic)”
  4. 点击“Generate new token”,选择“Generate new token（classic）”
  5. 在note栏中，输入密钥概述，可随便输入，如：for blog
  6. “Expiration”栏中选择该密钥的有效期，可随便选择，如90 days
  7. 勾选“repo”,点击“generate token”

3.4 配置

  1. 进入vscode,在_config.yml中找到deploy,在其中输入

    1
    2
    3
    type：git
    repo:git@github.com:your_username/your_username.github.io.git
    branch:main#新建仓库中的分支名

    然后运行如下命令：

    1
    2
    3
    hexo cl
    hexo g
    hexo d

    运行后可能会出现以下错误：error ：spawn failed

    此时需要重新配置ssh,参照此篇博客内容进行操作解决ssh: connect to host github.com port 22: Connection refused - Biile - 博客园 (cnblogs.com)

3.5 托管

将网站托管到cloudflare，可参考从0到1搭建免费个人博客，保姆级教程！无服务器、零代码、国内/国外网络，流畅访问！「Cloudflare + GitHub + Hexo」_哔哩哔哩_bilibili