10 分钟让你使用 Hexo+GitHub 搭建个人博客

title: 10分钟让你使用Hexo+GitHub搭建个人博客 # 文章显示的标题,并且还会显示在html title标签中,会和跟目录_config.yml文件中的title属性以 | 分隔符一起显示
date: { { date } }
tags: [Hexo, GitHub]
description: 10分钟让你使用Hexo+GitHub搭建个人博客 # 将会在展示在html name值为description的meat标签中,不写的话就会显示使用more注释上面的文章关键内容

请带着你们的洪荒之力来观看本篇文章

前言

其实很久之前就有写博客的想法,但碍于以下原因终究是拖到了现在

什么原因？

1. 工作忙,没时间啊
2. 之前一直想用 Markdown 来写博客,但对它的语法不太熟悉,然后就一直拖拖拖...
3. 没有写博客的经验,写出来怕大家不满意,然后被大家...(此处省略若干字)
   ps:别看上面说得条条有理,其实全是借口
好吧,我承认,其实是打撸啊撸去了~哎呦,别打脸!~不服来黑色玫瑰虐我呀, 哈哈哈! ╮（╯◇╰）╭

言归正传
至于为什么要用个人博客来写文章大家原因各不相同,但红尘君还是简单描述下个人原因

• 不想被第三方网站的条条框框所限制！
  • 网上的确有很多优秀的专业写博客的网站,但毕竟不是自己的网站,个人可控性差,所有功能在他人的操控之中,比如这个默认的文章布局不好看,自己想重新全部自定义,比如头像想换个位置,或者默认头像想加点特效 就好像红尘君的个人Blog中的头像特效 等等,在第三方网站中是难以实现的.
• 提升个人技术能力,扩宽知识面！
  • 这些都是红尘君没接触过的知识,正好可以学习学习,正所谓活到老,学到老嘛
• 自己的 VPS 搭不了,没办法,余额不足,还充值不了！
  • 头次把没钱说得这么清新脱俗←_←,话说最近红尘君的生活简直那叫一个拮据

前方高能,老司机要发车了！
其实我在使用 Hexo+Github 搭建个人博客的时候,也查阅了不少文章,但遗憾的是,不是教程已经过时了就是文章写得不完整不清晰,或者多了很多不需要的东西,小白一时难以辨别哪些步骤可以省略,在学习的过程中大多是跟着教程一步一步操作,浪费了很多本可以节省的时间,于是我的豪华座驾就这样翻车了（┬＿┬）...

所以写下这篇博客的初衷呢:

1. 一来是记录自己的学习点滴
2. 二来是可以帮助有需要的新司机少走弯路,红尘君 让你油门一路踩到底还不翻车

一.本地准备工作

1.安装 Git
Git:分布式版本控制器,这里使用它的目的是将本地的 Hexo 项目提交到 GitHub 中
下载地址 1:Git 官网下载(咱堂堂大天朝的墙太高了,翻不过去或者翻得慢的司机往下看)
下载地址 2:Git 国内镜像下载(墙爬不过去咱不哭,红尘老司机 帮你开路)

2.安装 Node.js
Node.js: 基于 Chrome JavaScript 运行时建立的一个平台,简单的说 Node.js 就是运行在服务端的 JavaScript.这里使用它的目的是生成静态页面
下载地址 1:Node.js 官网下载(天朝墙高,翻不过去或者翻得慢的司机往下看)
下载地址 2:Node.js 国内镜像下载(红尘老司机 继续帮你开路)

ps:以上两个软件只需要下载一个单独的 exe 安装程序,然后一路 next 就好了,这里红尘君就不赘述了

经过一番折腾,两个软件想必大家应该安装完成了吧,快上车,红尘君要继续开车了

1. 安装 Hexo
打开 Git 安装目录下的 git-bash.exe 文件，执行 npm install 命令安装 Hexo:(以下所有的命令都可以右键选择git bash here打开后再执行)

npm install hexo -g

• (可选)天朝墙依旧高,这里如果等待很久的话,可以先关闭窗口后再重启,执行以下命令切换成淘宝 npm 镜像加快安装速度,然后重新执行安装命令即可

npm config set registry https://registry.npm.taobao.org

Hexo 的升级(扩展知识点)
执行 npm update 命令完成 Hexo 的升级

npm update hexo -g

2. 初始化 Hexo
安装好 hexo 之后,在你想初始化 Hexo 的目录下执行 init 命令初始化 Hexo (例如红尘君想部署在D盘根目录,那么直接到D盘根目录下执行以下命令即可)

hexo init 或者 hexo init Blog

• 第一个命令将会直接在当前目录下初始化 Hexo
• 第二个命令会在当前目录下生成一个 Blog 文件夹(名字可随意取),并在 Blog 目录下初始化 Hexo

---

3. 生成静态页面
本地初始化 hexo 成功后,进入到你初始化 Hexo 的目录下并执行 generate 或者 g 命令生成静态页面至 hexo\public\目录

hexo generate 或者 hexo g 

---

4. 启动本地 Hexo 服务
现在可以在浏览器中查看自己的 Hexo Blog 了,执行 server 或者 s 命令启动服务

hexo server 或者 hexo s

• ctrl + c 键可关闭服务
  成功后在浏览器中输入 http://localhost:4000/ 就可以看到自己的本地 Hexo Blog

---

至此,本地的 Hexo 搭建已经完成!

但是,只在本地搭建给自己看怎么能行呢?自己的知识不分享给大家心里怎么能过得去呢?内心难安呐！(红尘君实力装了一波X,别别别~~~表打我,我是个肉,大家请先去打脆皮╮(╯3╰) )

好了,诸位打也打了,骂也骂了,也该准备准备了,系好安全带,红尘君要踩油门了~~

二.GitHub 准备工作

一大波图文来袭,请做好流量透支准备~~

1. 注册 Github 账号
进入 GitHub 官网注册账号,点击右上角的 Sign up 按钮进入注册界面

然后填入你的注册信息

---

2. 建立 Username.github.io 项目 Username请填写你注册时表单中输入的Username,也就是比你的用户名
点击右上角的加号,选择 new pepository 项

进去后开始创建项目,Repository name 处填写类似于 Username.github.io 的格式

---

至此,GitHub 准备工作已经完成!

哎呀呀,终于到了最后一步了 <(￣︶￣)>,各位看官请把裤子提紧了,红尘君已经把油门踩到底并且把刹车给拆了,破釜沉舟！

三.本地 Hexo 跟 GitHub 关联

1. 修改_config.yml 文件
进入到刚刚初始化 Hexo 的目录下,修改根目录下的_config.yml 文件,找到最下方的 type 属性并将下面的代码完全覆盖 type 属性

type: git
repository: https://github.com/Username/Useaname.github.io.git
branch: master

• 其中 repository 属性中的 Username 请替换为你刚刚创建项目的 Useranme 值
• 此处采用的是 https 协议,还可以使用 SSH 协议,此处就不详细介绍了

---

2. 安装 Hexo 部署到 Github 所需的插件
执行以下命令来安装该插件

npm install hexo-deployer-git --save

---

3. 部署到 GitHub
执行 deploy 或 d 命令将本地 Hexo 发布到 GitHub 上

hexo deploy 或 hexo d

然后在浏览器中输 http://Username.github.io/ 就可以访问在 GitHub 上搭建好的 Hexo 了

---

至此,就已经实现了如何使用 Hexo+GitHub 搭建个人博客

常用命令

hexo init 或 hexo init Blog # 初始化 Hexo
hexo clean # 删除 public 目录并重新生成该目录,通常在 generate 命令前使用
hexo generate 或 hexo g # 生成静态页面至 public 目录
hexo server 或 hexo s # 开启 Hexo 本地服务
hexo deploy 或 hexo d # 将本地 Hexo 部署到 GitHub
hexo new <文章标题> # 新建一篇文章
hexo new page <pageName> # 新建页面
hexo version 或者 hexo v # 查看 Hexo 的版本
hexo help # 查看帮助

呼呼呼~~~红尘老司机带领大家安全到达目的地,我也完成了自己的第一篇博客,文章中难免有疏漏之处,请大家理解并在评论处指点指点

其实还有很多可以写的,比如说如何将自己的域名替换 Github 提供的默认域名等等,本文篇幅有限再加上写完整篇文章有点疲惫就暂时写到这吧,如果大家觉得本文可以的话还想继续看下篇的话可以留言,人数较多或者等我上个王者的小目标达成的时候的话,红尘君会考虑继续写下去!

最后欢迎大家复制转载收藏,要不帮 红尘君 留个出处链接呗~~~谢谢大家 ＜（￣︶￣）／