版权申明:本文为博主原创文章,未经博主允许不得转载。如需转载,请私聊博主。

什么是hexo

Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351。

前期准备

安装node.js.

这里我推荐大家使用v5的版本,下载地址:node.js.找到node-v5.12.0-x64.msi 下载安装即可。v6以及以上的版本听一些大佬说会出现令人蛋疼的麻烦,有兴趣的童鞋可以去尝试一下v6或者v7版本。本文案例使用的5.12的版本。

安装git.

下载地址:git.由于穷本人只有一台电脑,所以这里的教程只针对windows用户,要是有童鞋觉得文章可以的话可以赞赏一下,给我的早餐加个卤蛋也许我会更有动力更新关于mac和linux用户的教程。

安装hexo

安装完git之后就可以安装hexo了,如果某些童鞋的电脑桌面上没有git bash,可尝试在开始菜单里查找。打开git bash 之后输入以下命令回车将hexo安装到全局。

$ npm install -g hexo

测试安装hexo

然后输入hexo -v如果显示以下内容则安装成功。版本不同可能会有少许差异,不过无伤大雅。

hexo-cli: 1.0.2

os: Windows_NT 10.0.14393 win32 x64

http_parser: 2.7.0

node: 5.12.0

v8: 4.6.85.32

uv: 1.8.0

zlib: 1.2.8

ares: 1.10.1-DEV

icu: 56.1

modules: 47

openssl: 1.0.2h

注册github账号

由于我们的博客是使用github托管的,不懂github是什么的童靴请自行百度了解,因此我们需要注册一个github的账号,注册地址:github.注册流程和我们注册QQ一样简单。

新建一个Github仓库

注册完成之后在你的右上角头像点击下拉列表选择your profile,然后选择Repositories,点击绿色的new 按钮,在Repository name的输入框内写入和你的owner名字+github.io,这里我的用户名是JavaEngineerLiu,所以我的Repository name也是JavaEngineerLiu.github.io。最后create repository.

hexo初始化

前面我们已经安装完了hexo,但是我们还需要给它初始化,在你的任意一个盘符里新建一个文件夹,这里我选择的是在D盘新建的一个hexo的文件夹。打开文件夹右键git bash,输入以下命令。

$ hexo init

生成静态页面

初始化完成之后会自动生成一篇“hello world”的文章,现在我们需要输入以下命令将文章转换为静态页面。当然你也可以使用缩写格式hexo g.

$ hexo generate

启动本地预览

在git bash 上输入以下命令(你也可以使用快捷命令hexo s),然后在浏览器中输入http://localhost:4000/查看生成的页面效果。

hexo server

如果显示以下图片则你的博客已经搭载成功了。!

部署本地文件到github

这里打开前面自己新建的文件夹下面的_config.yml文件,用记事本打开即可。在文件的最下方,添加如下配置。

deploy:

type: git

repository: https://github.com/JavaEngineerLiu/JavaEngineerLiu.github.io

branch: master

注:每一个冒号之后需要空一格,第一个JavaEngineerLiu为Github的用户名,第二个JavaEngineerLiu为之前New的Repository的名字,不要把我的给复制上去了。

配置SSH key

如果你是第一次使用github则需要配置SSH key.

  • 右键选择git bash ,输入以下命令,your_email@youremail.com换成注册github的邮箱号

    $ ssh-keygen -t rsa -C "your_email@youremail.com"

  • 之后会要求确认路径和输入密码,我们这使用默认的一路回车就行,成功的话会在C:\Users\Administrator下生成.ssh文件夹,如果你的电脑的用户名是中文,则会在C:\用户\电脑用户名下生成.ssh文件夹,进入该文件夹,以文本的形式打开id_rsa.pub,复制里面的key,即复制文件的全部内容。如果你在这边只看见2个id_rsa文件,没看到id_rsa.pub,应该是你把后缀名隐藏了,可以设置显示后缀,或者直接把两个文件都以文本的形式打开,内容短的并且以ssh-rsa开头的即为所需的SSH key。回到github,进入Settings,选择SSH and GPG Keys -> New SSH Key,title随便填,粘贴key。为了验证是否成功,在git bash下输入:

    $ ssh -T git@github.com

  • 有些童靴如果显示continue,输入yes就会看到:You’ve successfully authenticated, but GitHub does not provide shell access ,这就表示已成功连上github。

上传本地仓库到github

在git bash 里分别输入以下命令。your name换成你的github用户名,your_email@youremail.com换成你注册github的邮箱

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

$ git config --global user.email "your_email@youremail.com"

测试自己的域名是否能用

打开浏览器输入JavaEngineerLiu.github.io,如果显示的是你在本地服务预览的那个界面,那本博客就到此结束了,如果显示无法链接到服务器,那就接着以下的步骤继续操作。

继续部署github

  • 执行以下目录进行部署,中途需要输入你的github注册用户名,回车之后再输入密码,输入密码时不会显示任何字符串,不要像我一样以为自己键盘坏掉了。

    $ hexo deploy

  • 如果执行上述命令报错,请先执行以下命令。然后再执行以上命令

    $ npm install hexo-deployer-git --save

  • 部署成功后,你在浏览器中输入JavaEngineerLiu.github.io,就能看到和本地一样的效果了。

后话

  • 短短三个小时,包括昨晚在博客园上码文的三个小时,只有六个小时的样子,时间短暂,文章难免有不足之处,多多见谅,如果有童靴在搭载博客过程中遇到问题,欢迎私聊博主或者在下方评论区留言,您的支持是我不断前进的动力。

【hexo】如何在一个小时内搭载个人博客的更多相关文章

  1. Hexo+Git一个小时快速搭建个人博客

    搭建本地环境:Hexo框架 Hexo为何物 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页.其中,Markdown是一个用于将普通 ...

  2. 使用Coding.net+Hexo+node.js+git来搭建个人博客

    使用Coding.net来搭建基于Hexo的博客 一.准备工作 什么是Coding.net Coding可以说,就是国产的Github,但是,有一个功能使它似乎超越了GitHub-那就是 Web ID ...

  3. 基于Hexo+Node.js+github+coding搭建个人博客——基础篇

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...

  4. 用Hexo搭建属于自己的iOS技术博客,搬家了

    搬家了,本来还打算在博客园混一段时间的,可是当我看到Hexo的时候,已经难以抵挡它的诱惑,简单不简约的界面让我花了整整一天的时间,买域名的过程中发生一点小问题导致DNS解析错误了,但还是成功了.欢迎朋 ...

  5. hexo框架-next主题-github搭建个人博客

    IT`huhui 的前言录 我在GITHUB的个人站点:http://ithuhui.cn 这里遇到的很多问题都是亲身解决后写的.还有遇到不懂可以邮件M我 在这里要感谢浮生志的博客教程,很多我一开始不 ...

  6. Gitpage + hexo(3.0以上)搭建博客

    大半天,一边折腾,一边查找各种文档,写出的这篇文档,不知道有没有把程序表示得足够简明,有不足之处望指明. 前提:已安装好nodeJS和git. 桌面右击进入gitbash,输入npm install ...

  7. 使用Hexo和Github Pages快速搭建个人博客

    在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽.作为出入编程的一枚小白也想拥有这样一个自己的网站.那就立马去买一个域名了,在网上找教程来搭建. 搭建的过程还算比 ...

  8. 使用hexo在GitHub上无法上传博客

    原以为是秘钥或者其他错误,后来发现是邮箱设置的问题 在GitHub的你账号网页上右上角,个人的登录退出的位置,找到setting: setting->emails->Keep my ema ...

  9. 搭载hexo+github博客系统

    一.安装 Node.js 在官网 http://nodejs.org/ 下载winwos版本,点击安装完成即可. 二.git环境安装 对于git的安装,网上已经大量资料,就不赘述了. 三.安装 hex ...

随机推荐

  1. JAVA的HashTable源码分析

    Hashtable简介 Hashtable同样是基于哈希表实现的,同样每个元素是一个key-value对,其内部也是通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长.Hashtable ...

  2. 域名系统DNS和FTP

    域名系统概述 域名系统DNS(Domain Name System)是英特网使用的命名系统,用于把便于人们使用机器名字转化为IP地址. 为什么机器在处理IP数据报时要使用IP地址而不使用域名呢?IP地 ...

  3. robotframe 学习笔记(之一)

    在robot framework中,通过 Set variable关键字来定义变量 连接对象: 通过Catenate关键字可以连接多个信息 加上"SEPARATOR=",可以对多个 ...

  4. 前端魔法堂:屏蔽Backspace导致页面回退

    前言  前几天用户反映在录入资料时一不小心错按Backspace键,就会直接回退到是一个页面,导致之前辛辛苦苦录入的资料全部丢失了.哦?居然还有这种情况.下面我们来一起探讨一下吧! Windows系统 ...

  5. 备忘录《一》基于cookie使用拦截器实现客户每次访问自登陆一次

    原创声明:本文为本人原创作品,绝非他处摘取,转载请联系博主 相信大家在各大网站都会遇到,登录时,在登录框出现下次免登陆/一个月免登陆的类似选项,本次博文就是讲解如何实现,在这记录一下,也算是做个备忘录 ...

  6. 019 关联映射文件中集合标签中的lazy(懒加载)属性

    <set>.<list>集合上,可以取值:true/false/extra,(默认值为:true) 实例一:(集合上的lazy=true(默认))class默认lazy=tru ...

  7. AtomicInteger的使用

    JDK API 1.7相关介绍 可以用原子方式更新的 int 值.有关原子变量属性的描述,请参阅 java.util.concurrent.atomic 包规范.AtomicInteger 可用在应用 ...

  8. String为值类型还是引用类型

    关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助. 如果有错误请指出. 来看下面例子: //值类型 int a ...

  9. php系统共享模板问题

    我们在用php+html+css来写一个管理系统时,例如报名系统.投票系统,统计系统等,我们往往需要在管理后台查看每一位报名者的情况,问题接着就来了,由于比赛或者活动要求不同个,往往报名表不太一样,这 ...

  10. 一天搞定HTML----标签语义化04

    根据页面里不同的内容,选择最适合它的标签,而不通篇只用一种标签 标签语义化作用: 代码演示 通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化 注意: 标签语义化,不仅仅只是指使 ...