如何搭建个人博客

搭建个人主页的步骤如下：

  • 先将我们写的文章或者照片生成静态页面(hexo)
  • 并将这些静态页面部署到支持静态页面的服务器(github或coding)
  • 这样我们就可以通过服务器的域名地址访问到自己的博客了(regeorge.github.io)

下面是操作步骤：

准备环境：

  • node.js（npm）的安装

    1、hexo 是基于 node.js 来生成页面的
    2、node.js 提供了 npm 包管理工具，后面安装 hexo 只需要几行命令

  • hexo 的安装和初始化

    1、完成后可以在本地生成默认的博客页面，并通过浏览器预览效果
    2、常用的几条命令如下：

    hexo n p '文章标题'    //新建文章
hexo g                //生成页面
hexo s                //本地预览
hexo d                //提交页面

Hexo 常用部署命令详解

  1. hexo g (hexo generate)
  • 作用：生成静态文件
  • 原理：
    • 读取 source 目录下的文件（主要是 markdown）
    • 根据主题模板将内容渲染成 HTML
    • 生成的静态文件存放在 public 目录
    • 包含 HTML、CSS、JavaScript 等资源文件
  1. hexo s (hexo server)
  • 作用：启动本地预览服务器
  • 原理：
    • 启动一个 Node.js 服务器
    • 默认监听 4000 端口
    • 将 public 目录作为网站根目录
    • 支持实时预览（修改文件后自动更新）
  1. hexo d (hexo deploy)
  • 作用：部署网站到远程服务器
  • 原理：
    • 首先将 public 目录下的文件复制到 .deploy_git 目录
    • 在 .deploy_git 目录初始化 Git 仓库（如果不存在）
    • 添加远程仓库（通常是 GitHub Pages）
    • 提交所有文件并推送到远程仓库
  1. hexo s -g
  • 作用：生成静态文件并启动预览服务器
  • 原理：
    • 相当于顺序执行 hexo g 和 hexo s
    • 生成的文件存在内存中，服务器关闭后不保存
    • 用于本地快速预览效果
  1. hexo g -d
  • 作用：生成静态文件并立即部署

  • 原理：

    • 相当于顺序执行 hexo g 和 hexo d
    • 先生成静态文件到 public 目录
    • 然后立即部署到远程服务器
    • 常用于确认内容无误后的发布

  • git 的安装和配置

    1、git是用作版本控制的，也就是在本地生成的博客都是通过git来同步到云端服务器
    2、上一条的提交页面命令hexo d其实就是通过git将页面提交到配置文件中填写的github仓库的

  • github 的注册和配置

    1、github 提供了一个静态页面服务功能，这里要做的是在github上创建一个指定名称的仓库来放置本地生成好的博客页面文件
    2、同时还需要把这个创建好的仓库地址填写到本地的配置信息中

具体的安装步骤请参考gdutxiaoxu的文章，每一步都非常详细：手把手教你用Hexo+Github 搭建属于自己的博客

配置主题

跟着上述参考文章的操作步骤配置好环境后，已经可以在本地预览到生成的博客界面了，按照这种方法生成的页面其实都是一样的，要让自己的博客不一样，一是要时常更新自己的文章，二是自定义页面的样式，网上也提供了很多开源的主题可以配置，非常方便，我推荐的主题有Next，Yilia，Yelee，更多的主题可以百度hexo theme

配置的方法就是将主题通过git pull到博客的theme目录下，然后按照该主题的说明文档（github上的readme.md）进行修改自定义的配置

提交页面

假设我们已经上面的参考文章配置好了提交的地址：在博客的根目录的配置文件_config.yml中

# Deployment
deploy:
  type: git
  repo: 
    github: git@github.com:reGeorge/regeorge.github.io.git,master    //github仓库
    coding: git@git.coding.net:reGeorge/reGeorge.git,master        //coding仓库
  branch: master

这里我配置了两个地址，执行hexo d命令时会分别向两个仓库推送本地生成的页面，这样我通过两个域名都可以访问到我的博客（coding国内访问的速度更快）

https://regeorge.github.io/
http://regeorge.coding.me/

踩坑记录

  1. hexo d 命令不生效
  • 原因是 GitHub 的 workflows 配置不正确
  • 解决方法:
    • 在项目中创建 deploy.yml 文件
    • 配置从 master 分支拉取静态网页文件的目录
    • 发布到 gh-pages 分支以触发 GitHub Pages 的发布
  1. themes 目录中自定义 js 方法报错
  • 问题:传入 tags.toArrays() 方法时报错
  • 解决方法:
    • 只需要在调用前判空处理
    • 无需使用 toArrays() 方法
文章目录
  1. 1. 准备环境：
  2. 2. Hexo 常用部署命令详解
  3. 3. 配置主题
  4. 4. 提交页面
  5. 5. 踩坑记录
|