效果预览:https://your-personal-domain.com

准备:

  1. Windows电脑
  2. GitHub账号
  3. 使用Hexo框架搭建个人站点软件准备(以下步骤需仔细阅读)

安装过程:

  1. Node.js 安装

    • 访问官网:http://nodejs.org/en/
    • 按照安装过程依次点击即可,安装过程很简单。
  2. Git安装

    • 访问 https://git-scm.com/ 获取Git安装包
    • 下载后将安装包拖入wine中,进行安装(建议使用Visual Studio Code打开项目文件夹,它支持多种语言,视图简洁且拥有众多插件)
  3. 安装Hexo

    • 在当前目录下,打开终端窗口,执行以下命令:
      npm install hexo-cli -g
      

检测:

  1. 检测Node.js安装是否成功:

    • 打开终端,输入 node -vnpm -v,查看版本号确认安装
  2. 安装淘宝的镜像源(提高下载速度)

    • 修改配置文件 .hexo/hook/postdeploy.js 添加以下代码:
      const hexo = require('hexo'),
        { exec } = require('child_process');
      
      // 清除缓存,更新 npm 版本为最新版
      let clearCacheCmd = 'npm cache clean --force';
      console.log('> 清除缓存:', clearCacheCmd);
      exec(clearCacheCmd);
      
      let updateNpm = 'npx npm install -g @hexojs/core';
      console.log('> 更新 npm 版本:', updateNpm);
      exec(updateNpm);
      
      // 安装淘宝镜像
      let taobaoMirrorInstall = 'npm install -g cnpm --registry=https://registry.npm.taobao.org';
      
      hexo.extend.console.register('postdeploy', function(data) {
        if (data.config.theme === 'hexo-theme-matery') {
          console.log('> 安装淘宝镜像:', taobaoMirrorInstall);
          exec(taobaoMirrorInstall);
        }
      });
      

新建仓库:

  1. 在GitHub上创建一个新的仓库,例如 username.github.io
  2. 下载并解压Hexo安装包
  3. 将Hexo项目中的文件复制到这个新仓库中

配置_config.yml:

  1. 找到Blog目录下的 _config.yml 文件
  2. 使用Visual Studio Code等编译器打开,建议使用它来编辑代码(支持多语言、视图简洁且拥有多种插件)
  3. 修改以下部分代码:
    • type 设置为 git
    • repository 替换为你刚刚创建的GitHub仓库地址
    • branch 设置为 master

部署:

  1. 在本地 terminal 窗口,进入博客项目文件夹
  2. 执行以下命令:
    hexo clean   # 清除生成的静态页面和数据库缓存
    hexo generate # 生成静态页面(该命令默认部署到public目录)
    hexo deploy   # 部署网站到GitHub远程仓库
    

访问站点:

  1. 访问 https://your-personal-domain.com 查看你的个人站点

进一步深化操作过程:

  1. 在GitHub找到并下载你喜欢的Hexo主题,如 hexo-theme-matery
  2. 将主题文件夹中的代码复制到 Hexo 根目录下的 themes 目录中
  3. 打开 _config.yml 文件,将 theme 字段修改为刚刚下载的主题名称

现在,你的个人站点已经搭建完成。你可以开始写作、设计布局和发布内容了!祝你好运!

author