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

需要用到的工具:
  • Git
  • Node.js
  • Hexo

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

现在开始搭建博客

1. 在 Github 中创建项目

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

New repository

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

Create repository

2. 安装工具

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

3. 开始搭建博客

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

folder 是自定义的文件夹名字
- 如果想预览一下网页效果,输入在命令行中输入以下指令

npm install hexo-server --save
hexo s

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

  • 将配置部署到 Github 上
    • 安装 「hexo-deployer-git」
      -
npm install hexo-deployer-git --save
  • 打开刚刚创建的文件夹中的 _config.yml
    删除文件中最下方的 deploy、type,
    输入
deploy:
  type: git
  repo: https://github.com/name/name.github.io.git      // 两个 name 都是 Github 中 Owner 的名字
  branch: master
  • 最后执行三行指令
hexo clean
hexo g
hexo d

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

4. 绑定域名

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

ping name.github.io

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

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

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

域名管理

选择 解析
解析

选择 添加记录
添加记录

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

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

欢迎关注我的博客简书CSDNGitHub

发布了28 篇原创文章 · 获赞 9 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览