利用 GitHub Pages + Hexo 搭建博客的详细步骤

需要用到的工具:

  • Git
  • Node.js
  • Hexo

Git 是一个开源的分布式版本控制系统。
Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。
Hexo 是一个简洁高效的博客框架(支持Markdown)。

现在开始搭建博客

在 Github 中创建项目

登陆 Github 账号
点击 New repository 建立一个工程仓库

New repository

Repository name 中填写「name.github.io」
注意将 name 改成 Owner 的名字
然后直接点击 Create repository

Create repository

安装工具

  • 首先安装 Git,去官网下载对应的版本。
  • 然后安装 Node.js
    • Windows 用户
      官网下载安装。
    • Mac 用户(没试验过)
      打开「终端」 分别执行以下两行命令。
1
2
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
nvm install stable
  • 最后安装 Hexo
    打开命令行,输入
    1
    npm install -g hexo-cli   (注意空格)

开始搭建博客

  • 在电脑中创建一个存放博客相关信息的文件夹,在命令行中 cd 到所创建的文件夹中
  • 输入
    1
    2
    3
    hexo init folder
    cd folder
    npm install

folder 是自定义的文件夹名字

  • 如果想预览一下网页效果,输入在命令行中输入以下指令
    1
    2
    npm install hexo-server --save
    hexo s

然后在浏览器中输入「http://localhost:4000/ 」 就可以看到自己的页面了 :D
Example: 我的博客的文件夹目录是「e:Nenguou_Blog/Nenguou_Blog」
例子

  • 将配置部署到 Github 上

    • 安装 「hexo-deployer-git」

      1
      npm install hexo-deployer-git --save
    • 打开刚刚创建的文件夹中的 _config.yml
      删除文件中最下方的 deploy、type,
      输入

      1
      2
      3
      4
      deploy:
      type: git
      repo: https://github.com/name/name.github.io.git // 两个 name 都是 Github 中 Owner 的名字
      branch: master
  • 最后执行三行指令

    1
    2
    3
    hexo clean
    hexo g
    hexo d

现在打开 name.github.io 就可以看到自己的博客了。

绑定域名

首先要获取 Github Pages 的 IP,在命令行中输入

1
ping name.github.io

解析域名
「151.101.100.133」就是我解析到的域名

  • 大家可以去腾讯云注册自己的域名,完成 实名认证学生认证 之后,每天中午12点可以抢 200 个名额的优惠卷,

然后进入页面中的 管理中心域名管理
管理中心

域名管理

选择 解析
解析

选择 添加记录
添加记录

「添加记录」要操作两次,记录类型 均选 A,主机记录分别为「www」和「@」,记录值均填写刚刚解析到的域名。
添加记录

至此博客的搭建已经完成,大家可以登陆自己的域名查看自己的博客,也许会有一些延迟,请耐心等待。

欢迎关注我的博客简书CSDNGitHub