什么是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

注意:

  1. 有些用户没有设置Github的SSH,会导致上面两句失败。SSH的介绍和设置方法可以查看官方教程,配置起来很简单。如果英文看不明白或者过程中出现小问题,可以查看我写的SSH设置教程,是对官方教程的解释和扩展,针对配置过程中的小问题都有解决办法。

  2. 每次修改本地文件,都需要命令$ hexo generate才能保存。而且每次使用命令都必须在Hexo根目录下使用。

  3. 如果你在执行$ 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
  4. 如果你是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的更多相关文章

  1. 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

  2. Termux搭建hexo博客并部署到GitHub

    Termux搭建hexo博客并部署到GitHub 安装 termux-change-repo apt update apt install git && nodejs &&am ...

  3. 搭建hexo博客并部署到github上

    hexo是由Node.js驱动的一款快速.简单且功能强大的博客框架,支持多线程,数百篇文章只需几秒即可生成.支持markdown编写文章,可以方便的生成静态网页托管在github上. 感觉不错. 前端 ...

  4. 搭建Hexo博客并部署到Github

    参考: http://www.jianshu.com/p/a67792d93682 http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d. ...

  5. Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

    之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...

  6. 使用Hexo快速搭建一个博客,并部署到github

    本文旨在记录一下我在通过hexo搭建一个博客,并将其部署在github上面的过程,也供我自己在以后的使用过程中能够快速学习和参考.需要看更详细或者官方文档的可以点击Hexo官方文档进行查看. 安装前提 ...

  7. 使用Hexo搭建个人博客并部署到GitHub或码云上全过程

    一.前言 如上图所示:GitHub有Github Pages,而码云也有码云 Pages 1.Github Pages或Gitee Pages是什么呢? Github Pages或者Gitee Pag ...

  8. 在github上搭建hexo博客

    准备工作 安装git 系统是win10家庭版,采用git v1.9.5版本,比较简单,一路next直到finsh完成安装. 安装node.js hexo是基于node.js驱动的一款快速.简单且功能强 ...

  9. 使用 GitHub Actions 实现 Hexo 博客自动部署

    一.Hexo 相关知识点 静态博客简单,但是发布博文时稍显麻烦,一般需要下面两步: hexo clean hexo g -d // 相当于 hexo g + hexo d 如果考虑到同步源文件,还需要 ...

随机推荐

  1. ASP.NET WEB API 2 框架揭秘 读书笔记(一)

    第一章 概述 主要内容是介绍Web的基本概念,Restfull的基本概念及特性.最后介绍创建简单WebApi程序的步骤. Web的基本概念 IP/TCP协议簇分层,分为两种 链路层->网络层-& ...

  2. jquery工具函数browser() 辨别浏览器

    1.browser属性不是一个函数是一个全局对象,可以辨别客户端浏览器. 2.属性1:$.browser.msie如果返回true则客户端浏览器是ie.相似的$.browser.safari返回tru ...

  3. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 判断input checkbox选中状态

    $("#IsAdmin").is(':checked') 判断收否选中 返回true 或者false

  5. sql server 2008 case when

    CASE WHEN的两种格式 1.简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END 2.Case搜索函数 CASE ...

  6. 基于fis的前端模块化和工程化方案

    前端构建工具 面对日益复杂的前端环境以及前端技术.node技术的高速发展,前端的开发也越来越工程化,体系化,也就是出现了前端自动化构建工具.他们完成的任务目标基本是: js,css,图片的自动压缩合并 ...

  7. JDBC小结

    老师如是说:有一个规律永远不变,就是量变引起质变,什么时候你吃的盐比我吃的米多,那你就可以教我了…… 1.JDBC是一个标准,是J2EE的一部分:讲tcp时就提到了分层思想,jdbc也是分层,即上层只 ...

  8. Android调用 Webservice报org.ksoap2.serialization.SoapPrimitive(转)

    android Webservice开发的时候一般情况下大家接受webservice服务器返回值的时候都是使用SoapObject soapObject = (SoapObject) envelope ...

  9. 【转载51CTO】Linux中引号那些事儿

    原文链接:http://os.51cto.com/art/201207/348855.htm 我们将把编写脚本的事情暂时搁在一边,然后来讨论一些,我们一直在用的,但是没有解释的东西.引号在这一节里面, ...

  10. BZOJ1709: [Usaco2007 Oct]Super Paintball超级弹珠

    1709: [Usaco2007 Oct]Super Paintball超级弹珠 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 324  Solved: ...