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

本贴最后更新于 2829 天前,其中的信息可能已经水流花落
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 按钮进入注册界面
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 属性

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

最后欢迎大家复制转载收藏,要不帮 红尘君 留个出处链接呗~~~谢谢大家 <( ̄︶ ̄)/

  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • FlyingFinger

    本地一点毛病没有,然而一部署到 GitHub 上各种 404,空格什么的都注意到了,就是没辙~
    啊啊啊真个人都不好了~😭