摘要

GitHub 是一个开源项目的托管网站,相信很多人都听过。在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流。GitHub Pages 是Github为大家提供的一项服务,不仅能为托管的项目建立主页,还可以为我们建立个人博客。下面我就介绍个人博客是如何建立的。
在使用GitHub Pages建立个人博客前,我们象征性地了解一下GitHub Pages建立的页面有哪些优点:

  • 极简的配置,轻量级系统,无需数据库
  • 使用标记语言,如Markdown
  • 使用GitHub托管服务,免费300MB空间
  • 可以绑定自己的域名
  • 新版的GitHub Pages还支持CDN服务,提升访问速度

总体来说,GitHub Pages搭建的博客使用起来是非常方便的。配置好了之后,只需要使用例如Markdown编写自己的博文,扔到指定的文件夹里即可发布了。完全不需要管理网站相关的事务,例如数据库、安全性等问题。  
       开始正题,下面的操作步骤参考自Github Pages的主页,再结合我的实际操作介绍各个步骤,并说一下可能遇到的问题和解决办法。
       首先说明下面是以Window 10环境为例的。另外我采用的是Git Bash终端来操作,这在任何环境下都是一样的。


准备工作

在开始一切之前,你必须已经:

  1. 有一个github账号,没有的话去注册一个;
  2. 安装了node.js(国内下载比较慢 需要的可以从百度云下载、npm,并了解相关基础知识;
  3. 安装了git for windows(或者其它git客户端)

本文所使用的环境:

Windows10
[node.js@6.2.0](http://pan.baidu.com/s/1kU4FPzD)
hexo@3.2.2

安装node.js

下载node.js 安装文件,点击安装,不用你做任何操作,直接下一步即可安装完成。

安装hexo

在电脑的任意一个盘(位置自选)建一个文件夹,比如说的我的文件取名为Hexo.打开此文件夹,按住电脑的shift键,右击鼠标,选择在此处打开命令窗口(或者打开电脑的dos窗口,直接切换目录到Hexo文件夹)  
在命令窗口中输入:

 $ npm install -g hexo-cli  //安装hexo

然后输入命令hexo -v输入hexo的版本号即为安装成功。

创建一个新仓库

新建一个名为你的`github用户名.github.io`的仓库,比如说,如果你的github用户名是whitescholars(这个是我的用户名),那么你就新建whitescholars.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 https://whitescholars.github.io了,是不是很方便?

由此可见,每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库,所以访问的地址也是唯一的,方便github服务器管理。

设置仓库的参数 

       相信大多数人都知道,要想使用git命令来和github进行提交部署等操作,需要进行一些配置,大概就是下面一些命令,如不明白请自行搜索.

  1. 安装git for windows
  2. 右键鼠标选择` git Base here`,输入如下命令:  
        git config --global user.email xxx@qq.com
        git config --global user.name xxx
        ssh-keygen -t rsa -C xxx@qq.com(邮箱地址)  // 生成ssh

注:email和name分别为注册github时的邮箱和用户名,生成ssh时会提示让你选择存储地址,可直接按enter下一步存储为默认地址。
         找到.ssh文件夹,找到id_rsa.pub文件打开复制SSH



       3.登陆github,settings - Deploy keys  - add deploy key(把复制的SSH添加进去即可)



        4.测试是否成功

  $ ssh -T git@github.com 

提示:

 Hi whitescholars/whitescholars.github.io! You've successfully authenticated, but GitHub does not provide shell access.

证明校验成功。

初始化Hexo 

     进入Hexo文件夹,在Dos命令窗输入:

    $ hexo init

这个过程稍微漫长一点,下载的文件如下图所示:

     

接着输入:

  $ hexo g # 生成
  $ hexo s # 启动服务

执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些文件将来都是要提交到github去的:
     

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容:

     

     至此一个简单的博客框架算是搭建完成。系统会默认生成一个Hello    World的文章。

代码上传

如果你一切都配置好了,发布上传很容易,一句hexo d就搞定,当然关键还是你要把所有东西配置好。  
首先,ssh key肯定要配置好。  
     其次,配置主配置文件_config.yml中有关deploy的部分:
 
正确写法:

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: git@github.com:whitescholars/whitescholars.github.io.git
      branch: master  

repository为对应仓库的地址。注意仓库地址有两种形式。一种是https,一种是SSH。此处应该使用SSH形式的地址。   

最后输入如下三条命令:

    $ hexo clean # 清理
    $ hexo g  # 生成文件
    $ hexo d  # 部署文件

部署完成后输入自己之前创建的git仓库地址就可以访问了,例如我的仓库名字是whitescholars.github.io则输入https://whitescholars.github.io即可访问。
      至此一个你已完成了真个博客的搭建。当然你可能或觉得自己不喜欢这个主题,没关系,我会在后面的博客中接着告诉大家如何安装和修改主题。

    搭建博客的最终效果如下:http://penglei.top


     常见命令

    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面
    hexo generate #生成静态页面至public目录
    hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    hexo deploy #部署到GitHub
    hexo help  # 查看帮助
    hexo version  #查看Hexo的版本

缩写

   hexo n == hexo new
   hexo g == hexo generate
   hexo s == hexo server
   hexo d == hexo deploy

组合命令

    hexo s -g #生成并本地预览
    hexo d -g #生成并上传

结语 

> 如果你还需要了解更多技术文章信息,请继续关注白衣秀才的博客

个人网站:http://penglei.top/
Github:https://github.com/whitescholars
微博:http://weibo.com/u/3034107691?refer_flag=1001030102_&is_all=1

【原】Github+Hexo+NextT搭建个人博客的更多相关文章

  1. 【原】Github+Hexo+NextT搭建个人博客【1】

    该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上 ...

  2. github+Hexo快速搭建个人博客

    注意 本文主要针对Windows平台和Hexo 3.x 准备工作 下载Git [下载地址] [Git官网](https://git-scm.com/download/) 下载Node.js [下载地址 ...

  3. Hexo&Github-Pages搭建个人博客

    some基础知识 hexo hexo是一款基于Node.js的静态博客框架 github-pages说明 github有两种主页,一种是github-page(个人主页),一种是项目主页,本教程针对个 ...

  4. 利用Octopress在github pages上搭建个人博客

    利用Octopress在github pages上搭建个人博客 SEP 29TH, 2013 在GitHub Pages上用Octopress搭建博客,需要安装ruby环境.git环境等.本人在Fed ...

  5. windows下github pages + hexo next 搭建个人博客

    一.github pages 搭建个人博客一般需要购买域名和空间,github pages为我们提供了这两样东西,而且是免费的,相关介绍和使用方法参考这里 github pages. 二.Hexo 一 ...

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

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

  7. Hexo+Github/Coding免费搭建个人博客网站

    体验更优排版请移步原文:http://blog.kwin.wang/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把 ...

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

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

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

    导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...

随机推荐

  1. python os.path模块

    os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonprefix(list) #返回list(多个路径) ...

  2. Cesium原理篇:6 Renderer模块(2: Texture)

    Texture也是WebGL中重要的概念,使用起来也很简单.但有句话叫大道至简,如果真的想要用好纹理,里面的水其实也是很深的.下面我们来一探究竟. 下面是WebGL中创建一个纹理的最简过程: var ...

  3. boost库的使用

    我的经验:在强调运行效率的场合:shared_ptr/weak_ptr很好用,尤其是weak_ptr这个能够判断一个对象的生命周期的玩意,可以简化和扩展很多设计.unordered系列的容器也很不错. ...

  4. 【WCF】无废话WCF入门教程

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  5. delete 指针

    #include<iostream>using namespace std;class human{public: human(){cout<<"构造";} ...

  6. 用户id有则更新,无则添加 使用replace into (代替 insert into)

    app登录成功后,调用后台,更新channel_id public function set_pushchannel($device,$channelid,$iv='' ) $sql = " ...

  7. 成小胖学习ActiveMQ&#183;基础篇

    过了个春节,回到公司的成小胖变成了成大胖.但是你们千万别以为他那个大肚子里面装的都是肥肉,里面的墨水也多了不少嘞,毕竟成小胖利用春节的半个月时间专心学习并研究了 ActiveMQ,嘿嘿……这不,为了检 ...

  8. 十大ios开发者喜爱的开源库

    十大ios开发者喜爱的开源库 (转自博客园) 2014-08-17 14:07:58|  分类: objective-c |  标签:ios  开源库  |举报|字号 订阅 下载LOFTER我的照片书 ...

  9. [转] JS中的call()方法和apply()方法用法总结

    //例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...

  10. [LeetCode] 45. Jump Game II_ Hard tag: Dynamic Programming

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...