HEXO(Next主题)+Github+Git部署一个属于自己的博客教程(一)

基于HEXO+Github+Git搭建的博客终于大功告成了,在我搭建这个博客的过程中,走了很多弯路,其中也看了很多的博文和教程,但众说纷纭,所以有必要尽快把我搭建博客的整个过程记录下来(免得忘记),一方面是为了让浏览到此篇文章的小伙伴少走一些弯路,另一方面是希望把整个过程记录下来,以至于下一次搭建博客,会节省一些时间。补充一下,整个搭建过程都是基于windows的。下面我们就开始吧!

1、环境搭建

1.1安装node框架

HEXO是基于node框架的,所以我们首先要下载安装node,下载地址[node.js官网]< https://nodejs.org/en/ >

推荐下载长期支持版(即LTS版),因为当前发布版虽然含新功能但不稳定,而且奇数版在当前版本发布之后六个月将变为不支持状态(node.js版本不得低于8.6建议10.0及以上版本)

安装完成后win+R启动命令行,输入node -v,来检测安装是否成功。如果返回如下图所示,证明你安装成功了

1.2注册Github账号

Github推出的Github Pages服务可以很方便的建立一个属于我们自己的个人博客

进入[Github 网站],按照提示进行注册然后登陆(已经注册过的大佬绕过)

点击右上角加号--->new repository,新建一个仓库,这个仓库就是用来存放博客的地方

接着进入到创建仓库界面,Repository name就是使用浏览器访问你的博客的地址

1.3安装Git

为了能够把自己所写的博客上传到github上面去,我们使用分布式版本控制工具——[git官网]< https://git-scm.com/ > 进入官网后,直接下载安装最新版就可以了。安装完成之后在桌面右键会有一个Git Bash。类似于Linux终端,可以模拟Linux下的终端进行操作。可以在命令提示符中输入git --version打开之后,像下图这样

1.4安装HEXO

HEXO的安装在它的[官方文档]< https://hexo.io/zh-cn/docs/ >中说的很详细,下面我就简单的介绍一下HEXO的安装

1.4.1新建一个用来存放博客的文件夹

在合适的位置新建一个用来存放今后所写博客的文件夹,比如我的存放在E:\my blog\目录下

创建成功后进入该文件夹,在该目录下右键打开Git Bash Here,启动Git控制台(后面所有的命令行操作都用Git,不用windows自带的命令提示符,即CMD),输入npm i hexo-cli-g安装HEXO,会出现几个报错,但是不用理会

安装完成后输入hexo -v,出现下图界面,表示安装成功

随后,初始化文件夹,仍然在该命令行窗口执行hexo init 新建的文件夹名

接着,输入npm install安装所需要的组件。在刚刚新创建的文件夹下就会产生文件目录

_config.yml文件是网站的配置文件,可以配置大部分参数,也是最重要的文件

package.json文件是应用程序的信息

source是资源文件夹,是用来存放用户的资源,如用户每次编写的博客、标签页面、分类页面

themes是主题文件夹,HEXO会根据主题生成不同的静态页面

scaffolds是模板文件夹,新建的文章会根据模板来建立文件

2、开始搭建

2.1部署到本地

其实在环境配置完成之后,就已经在本地生成了博客主页。仍然是在刚刚的Git命令行中执行hexo g(hexo generation,生成静态页面),然后执行hexo s(hexo server 启动本地服务,进行文章预览调试)。然后浏览器输入 http://localhost:4000 就可以看到你博客的效果啦,不过这是本地调试用,其他人是看不到的。(调试完毕后记得 control + C 关闭本地端口,不然下次是进不去的)  看下图:

这是安装HEXO的默认主题,在之后的博文中,我会分享如何更改主题

2.2部署到Github

2.2.1部署签名

先使用下面的命令对Git进行初始化配置,即设置签名,作用是区别不同开发人员身份。这里邮箱地址不一定非得是注册Github的邮箱地址,任意邮箱即可,作用不是很大。

$ git config --global user.name "your name"

$ git config --global user.email "your e-mail address"

2.2.2配置SSH

  打开Git Bash,执行下面的命令生成SSH访问私钥及公钥 

$ ssh-keygen -t rsa -C "email@email.com"

当提示输入的时候,不用管,一直回车就可以。

然后/c/users/你的电脑账户名/.ssh文件下会生成两个文件

然后打开你的Github,点击右上角头像-->Setting-->SSH keys。

然后点击New SSH Key新建一个SSH key。Tittle可以自己起。然后将id_rsa.pub

文件中的内容复制粘贴到Key下面。然后用下面的命令测试是否连接到Github

$ ssh -T git@github.com

如果出现下图所示内容则证明连接成功

2.2.3设置deploy参数

打开HEXO主文件夹下的_config.yml(鼠标移动到该文件上右键,选择opendlg打开),设置底部的deply参数,下面是我的设置。type和branch和我设置的一样就行

其中repo在Github中进行复制,如下图:

deploy:

  type: git

  repo: git@github.com:Jerenliu/jerenliu.github.io.git

  branch: master

  注意:配置的时候要严格注意格式,不然后面会出错(type,repo,branch后面的冒号统一用英文的,冒号后面必须有一个空格。type,repo,branch前面要有两个空格,并对齐)。后面进行配置文件都需要遵循这种格式 

2.3验证

  以上配置完成后保存 然后回到终端执行npm install hexo-deployer-git --save安装一个插件,这样才能将你写好的文章部署到github服务器上并让别人浏览到。安装完成后在终端中依次执行如下代码

  hexo clean    作用:清理缓存

  hexo generate    作用:进行渲染  简写: hexo g

调试完毕后使用  hexo deploy    作用:部署到git服务器  简写: hexo d 

然后就能在浏览器输入地址访问博客页面了

2.4问题

  当执行hexo d可能会出现如下错误

类似这样的错误,这个错误的原因是因为本地的博客版本与远程版本不一致

第一种解释:.deploy_git这个文件的内容是用于将自己所写的博客部署到github仓库中的内容

第二种解释:这个应该是git部署用的文件。比如你写好的博客想部署到 GitHub Pages上去的话,可以用git部署插件,那个插件会创建这个目录

那么如何解决这个问题呢?

第一步,删除自己博客目录下的.deploy_git文件

第二步,进入git,输入:hexo clean 清除缓存hexo g -d 渲染部署 

  执行完以上操作后打开浏览器地址栏输入你的博客地址,就可以看到效果了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341