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

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

前言

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

什么原因？

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

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

  • 不想被第三方网站的条条框框所限制！
    • 网上的确有很多优秀的专业写博客的网站,但毕竟不是自己的网站,个人可控性差,所有功能在他人的操控之中,比如这个默认的文章布局不好看,自己想重新全部自定义,比如头像想换个位置,或者默认头像想加点特效就好像红尘君的头像特效等等,在第三方网站中是难以实现的.
  • 提升个人技术能力,扩宽知识面！
    • 这些都是红尘君没接触过的知识,正好可以学习学习,正所谓活到老,学到老嘛
  • 自己的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打开后再执行)

1
npm install hexo -g
  • 天朝墙依旧高,这里如果等待很久的话,可以先关闭窗口后再重启,执行以下命令切换成淘宝npm镜像加快安装速度,然后重新执行安装命令即可
    1
    npm config set registry https://registry.npm.taobao.org

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

1
npm update hexo -g

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

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

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

1
hexo generate 或者 hexo g

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

1
hexo server 或者 hexo s

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

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

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

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

二.GitHub准备工作

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

1. 注册Github账号
进入GitHub官网注册账号,点击右上角的Sign up按钮进入注册界面
Sign up
然后填入你的注册信息
register

2. 建立Username.github.io项目Username请填写你注册时表单中输入的Username,也就是比你的用户名
点击右上角的加号,选择new pepository项
Sign up
进去后开始创建项目,Repository name处填写类似于Username.github.io的格式
Sign up

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

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

三.本地Hexo跟GitHub关联

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

1
2
3
type: git
repository: https://github.com/Username/Useaname.github.io.git
branch: master
  • 其中repository属性中的Username请替换为你刚刚创建项目的Useranme值
  • 此处采用的是https协议,还可以使用SSH协议,此处就不详细介绍了

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

1
npm install hexo-deployer-git --save

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

1
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提供的默认域名等等,本文篇幅有限再加上写完整篇文章有点疲惫就暂时写到这吧,如果大家觉得本文可以的话还想继续看下篇的话可以留言,人数较多或者等我上个王者的小目标达成的时候的话,红尘君会考虑继续写下去!

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

我是谁?<br/>我就是红尘君？<br/>红尘君就是我，开坏N辆车的老司机…