在Github上面搭建Hexo博客(一):部署到Github
什么是Hexo
Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在Github和Heroku上。并且有很多人为其制作了很多优秀的主题(theme),你可以根据自己的喜好进行设置。主题的设置将在后面的章节中介绍。
这个是Hexo官方网站介绍:
Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.
翻译过来就是:
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
怎么在Github上搭建一个hexo博客
我用了一天时间研究和搭建了一个Github博客(GitHub Pages site),过程中遇到一些小问题,现在写一篇教程,方便和我一样爱折腾但是是新手的人。
注意:
因为题主在搭建时在Windows平台,所以讲解为Windows版本,但是各个平台大同小异,所以实践起来并没有很大的差别。
以下为教程正文:
安装Git
前往Git官网下载Windows版本压缩包,下载完成后解压安装。
安装Node.js
前往Node.js官方下载网站,下载Node.js官方安装包,下载完成后同样解压安装。
安装Hexo
到目前为止,安装Hexo所需要的环境已将安装完成,下一步只需要安装Hexo便可以了。
点击鼠标右键,看是否有Git bash Here选项。如果没有可以前往Git安装根目录,启动git-base.exe也可以。
在命令行中输入:
$ npm install -g hexo-cli
Hexo 便安装完成了
创建Hexo文件夹
找到想要放置博客的文件夹,比如(F:\Hexo
),在该目录下鼠标右击打开Gitbash工具,(右键菜单中没有该选项的可以用cmd命令cd
等进入该文件夹)。执行下面的语句,会在F:\Hexo
文件夹下创建node_modules
文件夹:
$ hexo init
这里init后面可以跟文件目录,比如我想在F:\Hexo
下创建博客文件夹,那么可以用下面的命令:
$ hexo init F:\Hexo
安装依赖包
在Hexo目录下,执行以下命令,你会发现F:\Hexo\node_modules
目录下多了好多文件夹
$ npm install
本地调试
目前为止,已经搭建好自己的Hexo博客了,但是只能在本机上查看。执行以下两个命令(在F:\Hexo
目录下),然后在浏览器中输入 localhost:4000
就可以看到自己的博客了
$ hexo generate
$ hexo server
但是只能在本地查看,如果想让别人也能访问,那么就需要部署到Github 上面,下面,我们就部署上去。
注册Github账户
前往Github网站,注册一个新用户。用邮箱注册的一定前往邮箱去验证邮件。要不然之后可能会有小问题。
创建一个新的repository
在自己的Github主页右下角,创建一个新的repository
。比如我的Github用户名为Gitzhaoyang
,那么我创建的repository的名字应该是 gitzhaoyang.github.io
。
这里严重注意:
一定要以你的Github用户名.github.io
创建。假如我没有用gitzhaoyang.github.io
而是用了mungo.github.io
,那么当我浏览器访问博客的时候会出现404错误。这里并不是没有部署成功,而是把它部署在了这里:http://gitzhaoyang.github.io/mungo.github.io
。所以,如果想直接gitzhaoyang.github.io
访问,那么就需要和用户名保持一致。题主在这里吃了不小的苦头,最后给Github客服发邮件才知道原因。
创建好如下图:
将本地的文件部署(上传)到Github账户中
编辑本地Hexo目录下文件_comfig.yml
,在最后添加如下代码(在你修改时,把 gitzhaoyang
要替换成你自己的用户名)
deploy:
type: git
repository: http://github.com/Gitzhaoyang/gitzhaoyang.github.io.git
branch: master
.yml文件对格式规范要求很严格,type:
repository:
branch:
前面有两个空格,冒号后面都有一个空格。
执行以下指令即可完成部署(如果提示错误,可以看下面注意):
$ hexo generate
$ hexo deploy
注意:
有些用户没有设置Github的SSH,会导致上面两句失败。SSH的介绍和设置方法可以查看官方教程,配置起来很简单。如果英文看不明白或者过程中出现小问题,可以查看我写的SSH设置教程,是对官方教程的解释和扩展,针对配置过程中的小问题都有解决办法。
每次修改本地文件,都需要命令
$ hexo generate
才能保存。而且每次使用命令都必须在Hexo根目录下使用。如果你在执行
$ hexo deloy
,如果提示ERROR Deployer not found: git
,那说明你没有安装hexo-deployer-git
依赖包,进入F:\Hexo\node_modules
发现真的没有hexo-deployer-git
,不用担心,只需要输入下面命令创建hexo-deployer-git
依赖包,然后再执行hexo deploy
就能上传成功了$ npm install hexo-deployer-git --save
如果你是windows用户,那么当你执行
$ hexo deploy
命令的时候,可能会先后出现提示框让你输入你的Github用户名和Github密码,只要输入正确,上传就没有问题。
好了,现在我们的博客已经在Github上面部署成功了,可以在浏览器访问gitzhaoyang.github.io
试试了。
提示:
现在Hexo支持更加简单的命令格式了,比如:
hexo s == hexo server
hexo g == hexo generate
hexo d == hexo deploy
hexo n == hexo new
后续我会把如何配置博客信息,发表文章,设置博客主题,不同电脑间进行同时更新自己的Blog的方法等更新上来,感兴趣的人可以关注
在Github上面搭建Hexo博客(一):部署到Github的更多相关文章
- 史上最详细“截图”搭建Hexo博客并部署到Github
http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...
- Termux搭建hexo博客并部署到GitHub
Termux搭建hexo博客并部署到GitHub 安装 termux-change-repo apt update apt install git && nodejs &&am ...
- 搭建hexo博客并部署到github上
hexo是由Node.js驱动的一款快速.简单且功能强大的博客框架,支持多线程,数百篇文章只需几秒即可生成.支持markdown编写文章,可以方便的生成静态网页托管在github上. 感觉不错. 前端 ...
- 搭建Hexo博客并部署到Github
参考: http://www.jianshu.com/p/a67792d93682 http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d. ...
- Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages
之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...
- 使用Hexo快速搭建一个博客,并部署到github
本文旨在记录一下我在通过hexo搭建一个博客,并将其部署在github上面的过程,也供我自己在以后的使用过程中能够快速学习和参考.需要看更详细或者官方文档的可以点击Hexo官方文档进行查看. 安装前提 ...
- 使用Hexo搭建个人博客并部署到GitHub或码云上全过程
一.前言 如上图所示:GitHub有Github Pages,而码云也有码云 Pages 1.Github Pages或Gitee Pages是什么呢? Github Pages或者Gitee Pag ...
- 在github上搭建hexo博客
准备工作 安装git 系统是win10家庭版,采用git v1.9.5版本,比较简单,一路next直到finsh完成安装. 安装node.js hexo是基于node.js驱动的一款快速.简单且功能强 ...
- 使用 GitHub Actions 实现 Hexo 博客自动部署
一.Hexo 相关知识点 静态博客简单,但是发布博文时稍显麻烦,一般需要下面两步: hexo clean hexo g -d // 相当于 hexo g + hexo d 如果考虑到同步源文件,还需要 ...
随机推荐
- 19 Remove Nth Node From End of List(去掉链表中倒数第n个节点Easy)
题目意思:去掉链表中倒数第n个节点 思路:1.两次遍历,没什么技术含量,第一次遍历计算长度,第二次遍历找到倒数第k个,代码不写了 2.一次遍历,两个指针,用指针间的距离去计算. ps:特别注意删掉 ...
- $().change事件
change([[data],fn]) 当元素的value值发生改变时发生change事件 适用于: 文本域 text textarea和select元素 text textarea 元素失去焦点时发 ...
- jquery easy ui 学习 (6) basic validatebox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【行为型】TemplateMethod模式
模板方法意图是为算法定义好骨架结构,并且其中的某些步骤延迟到子类实现.该模式算是较为简单的一种设计模式.在实际中,应用也较为频繁.模式的类关系图参考如下: 模式的编码结构参考如下: namespace ...
- python使用platform模块获取系统环境并去除换行符
近来在porting一个网站,企图拿到这个网站的数据来做分析.为了支持多系统环境的正常运行.需要知道当前系统环境的是什么OS? 1.python内置platform库.可以很方便得到当前系统环境时什么 ...
- 探究ListView 的缓存机制
概述 ListView 是继承AbListView,AbListView是所有列表类控件的基类. ListView的数据加载 在ListView数据加载中最关键的一个函数就是makeAndAddVie ...
- POJ2299 Ultra-QuickSort(归并排序求逆序数)
归并排序求逆序数 Time Limit:7000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Descri ...
- ELK beats平台介绍
原文链接:http://www.tuicool.com/articles/mYjYRb6 beats是一个代理,将不同类型的数据发送到elasticsearch.beats可以直接将数据发送到elas ...
- Egret 文本处理
常规处理: private createGameScene():void { var shp = new egret.Shape(); shp.graphics.beginFill(0xff0000, ...
- RESTful API -备
网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...