http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html

大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hexo博客并部署到Github,走了不少弯路。现在终于搭建出来了,为了帮助大家,我决定写一篇“史上最详细“截图”搭建Hexo博客并部署到Github”。

工具/原料

 
  • Windows(Mac也是差不多,可参照)
  • Git
  • Node.js

安装Hexo

 
  1. 1

    利用 npm 命令即可安装。在任意位置点击鼠标右键,选择Git Base。

  2. 2

    输入命令:

    npm install -g hexo

    注意:-g是指全局安装hexo。

    END

创建Hexo文件夹

 
  • 安装完成后,在你喜爱的文件夹下(如C:\Hexo),执行以下指令(在C:\Hexo内点击鼠标右键,选择Git Bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

    hexo init

    END

安装依赖包

 
  • npm install

    END

本地查看

 
  • 现在我们已经搭建起本地的hexo博客了,执行以下命令(在C:\Hexo),然后到浏览器输入localhost:4000看看。

    hexo generate

    hexo server

    END

注册Github账号

 
  • 这里不演示了。

    END

创建Repository

 
  • 创建的时候注意Repository的名字。比如我的Github账号是angelen10,那么我应该创建的Repository的名字是:angelen10.github.io。

    END

修改配置文件

 
  1. 1

    到你刚刚创建的Repository下,找到以下内容:

  2. 2

    先点击HTTPS,然后复制里面的地址。然后编辑_config.yml文件(在C:\Hexo下)。

  3. 3

    修改文件里面的deploy。其中的repository就改成你刚刚复制的地址。保存这个文件。

    END

设置SSH keys

 
  1. 1

    在Git Bash输入以下指令(任意位置点击鼠标右键),检查是否已经存在了SSH keys。

    ls -al ~/.ssh

  2. 2

    如果不存在就没有关系,如果存在的话,直接删除.ssh文件夹里面所有文件:

  3. 3

    输入以下指令(邮箱就是你注册Github时候的邮箱)后,回车:

    ssh-keygen -t rsa -C "angelen10@163.com"

  4. 4

    然后它会提示要你输入passphrase(如上图,我没有输入直接回车,如果你输入的话,要记得,到时候会用到)。之后,如果出现类似下图:

  5. 5

    然后键入以下指令:

    ssh-agent -s

  6. 6

    继续输入指令:

    ssh-add ~/.ssh/id_rsa

  7. 7

    输入之后,在我这里是出错了,不知道你的有没有出错。

  8. 8

    如果你的也是这样子出错了的话,就输入以下指令:

    eval `ssh-agent -s`

    ssh-add

  9. 9

    到了这一步,就可以添加SSH key到你的Github账户了。键入以下指令,拷贝Key(先拷贝了,等一下可以直接粘贴):

    clip < ~/.ssh/id_rsa.pub

  10. 10

    然后到Github里面,点击右上角的设置图标:

  11. 11

    在Settings sidebar那里,点击SSH keys:

  12. 12

    点击Add SSH key:

  13. 13

    输入Title,作为这个key的描述吧(你可以输入Personal MacBook Air,瞬间高大上)

  14. 14

    然后这个Key就是刚刚拷贝的,你直接粘贴就好(也可以文本打开以下文件):

  15. 15

    点击Add Key:

  16. 16

    输入你的Github密码即可完成SSH Key的添加。嗯,最后还是测试一下吧,键入以下命令:

    ssh -T git@github.com

  17. 17

    你可能会看到有警告,没事,输入“yes”就好。

    END

完成部署

 
  1. 1

    最后一步,快要成功了,键入指令:

    hexo generate

    hexo deploy

  2. 2

    OK,我们的博客就已经完全搭建起来了,在浏览器输入(当然,是你的用户名):

    http://angelen10.github.io/

  3. 3

    注意:每次修改本地文件后,需要键入hexo generate才能保存。每次使用命令时,都要在C:\Hexo目录下。每次想要上传文件到Github时,就应该先键入hexo generate保存之后,再键入hexo deploy。大概成功之后是酱紫的:

  4. 4

    对了,记住上图的Username是你的Github账号名称,而不是邮箱;Password就是你的Github的密码。

    END

Tips

 
  • hexo现在支持更加简单的命令格式了,比如:

    hexo g == hexo generate

    hexo d == hexo deploy

    hexo s == hexo server

    hexo n == hexo new

    END

注意事项

 
  • 这篇和官方的说法有一点不一样,不过这是成功之谈。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
举报作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。

史上最详细“截图”搭建Hexo博客并部署到Github的更多相关文章

  1. 史上最详细“截图”搭建Hexo博客——For Windows

    http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

  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或码云上全过程

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

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

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

  8. Hexo瞎折腾系列(6) - 将博客同时部署到Github和Coding

    前言 由于本人只是将Hexo博客同时部署到 Github 和 Coding.net ,所以这里只介绍怎么同时部署到这两个网站的pages. 之所以选择这两个网站,是因为国外用户可以访问 Github, ...

  9. 在vps上搭建hexo博客

    最近更换了服务器,需要把自己的Hexo Next重新部署到新服务器上,本文记录一下在vps上搭建hexo博客的过程. 在vps上搭建hexo博客需要下面这些工具: Nginx: 用于博客展示 SSH: ...

随机推荐

  1. 【C#】让工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据

    ----------------更新:2014-04-21--------------- 蒙doggo兄指教,得知有更好的方法可以代替蹩脚的0尺寸Button法,即调用窗体的验证方法Form.Vali ...

  2. Telerik UI For WinForms--关于RadGridView的列排序

    在使用RadGridView绑定数据后,我希望属性的显示顺序按继承层次显示,但实际是相反的.下面示例两个类: public class A { public string Astr { get; se ...

  3. ASP.NET MVC进阶三

    一.ASP.NET MVC中的AJAX应用 首先,在ASP.NET MVC中使用自带的ajax功能,必须要导入2个js文件(顺序不能颠倒): ASP.NET MVC提供了2个常用的ajax辅助方法. ...

  4. volcanol_Linux_ 问题汇总系列_4_Thinkpad_E40_0578MDC_在Fedora 13 Linux(FC13)中如何安装无线网卡驱动

    今天晚上,我突然想在自己到笔记本上安装linux系统,因为我自己第一次接触到的linux是红帽支持到Fedora Core 4,所以一直最中意的linux 发行版本是FC系列,同时由于FC 15以后到 ...

  5. 【转】MyEclipse2015安装SVN插件

    一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在打开的网 ...

  6. PDF.NET SOD 开源框架红包派送活动 && 新手快速入门指引

    一.框架的由来  快速入门 有关框架的更多信息,请看框架官方主页! 本套框架的思想是借鉴Java平台的Hibernate 和 iBatis 而来,兼有ORM和SQL-MAP的特性,同时还参考了后来.N ...

  7. 阿里巴巴开源Weex 开发教程

    Weex 是什么 Weex是阿里发布的一款用WEB方式开发原生app的开源产品 Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.Yu ...

  8. jquery+jplayer实现歌词同步的mp3音乐播放器效果

    实例预览 下载地址 实例代码 <div class="container"> <div class="demo"> <textar ...

  9. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  10. 【初探移动前端开发03】jQuery Mobile(上)

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...