环境

    • Windows 10(64 位)
    • Git-2.7.4-64-bit
    • node-v4.4.7-x64
如果上述软件已经安装的,跳过,没有安装的下载安装。
1,git下载安装(https://git-for-windows.github.io/

2,node下载安装(https://nodejs.org/en/)

3.安装npm工具(这里可以先不安装,我是之前做RN,所以已经安装好了)

4,验证安装是否成功。

为了验证是否安装成功,我们在dos桌面输入如下的命令:

git --version

node -v

npm –v

出现如下表示成功

Github Pages

Github Pages免费的静态站点,其特点:免费托管、自带主题、支持自制页面等。
创建Github Pages比较简单,只要你有一个github账号在创建一个仓库就行了,但是这个仓库是有规则的,其格式必须为:yourusername.github.io。然后根据提示一直下一步即可,非常简单。


github项目创建完成,点击“Continue to layouts”,点击发布个人网站,我们网站就好了,不过这是一个github.io结尾的。


Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。官网也是搭建在GitHub上。在电脑上新建一个blog文件夹,一般放在非c盘(非系统盘),该文件夹用于存放你的博客文件,然后右键单击选择“Git Bash”(你也可以打开hexo官网(https://hexo.io/zh-cn/)按提示的步骤来)。


•npm install hexo-cli -g
•hexo init blog
•cd blog
•npm install
•hexo server

现在我们启动 hexo 本地服务,看下默认的博客是怎样的,命令:hexo server
现在用浏览器访问:http://localhost:4000/,效果如下图

选用其他主题

由于默认主题太大众了,所以现在我们换个主题。你可以去这里找主题:

  • exo-theme:https://hexo.io/themes/
  • hexo-github-theme-list:https://github.com/hexojs/hexo/wiki/Themes
  • 有那些好看的hexo主题?:http://www.zhihu.com/question/24422335
  • 我这里选择的 yelee:https://github.com/MOxFIVE/hexo-theme-yelee,如果你自己懂css.js,你可以自己写。输入命令:git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee



    找到_config.yml,把对应的主题目录名改下。


    修改完成后,我们使用下面命令重新生成静态博客的所有内容:hexo generate,然后重启 hexo 本地服务:hexo server。

    部署代码到github pages

    创建好仓库之后,要本地生成 SSH 秘钥,方便电脑上的 git 软件好提交内容到 Github 上,其实也可以不生成本地的ssh,可以直接用命令或者工具上传代码(这个纯命令提交可以参考之前的博客点击打开链接),在 Git Bash 中,输入:ssh-keygen -t rsa -C "你的邮箱地址",然后回车,回车,再回车,一共 3 次回车。


    访问:https://github.com/settings/ssh,添加新秘钥

    访接下来就是将本地的静态博客部署到gitHub上,要把本地的静态博客同步到 Github,我们还需要先安装两个跟部署相关的 hexo 插件,可以实现如下命令:

    • npm install hexo -server --save
    • npm install hexo-deployer-git --save

    编辑全局 hexo 的配置文件:_config.yml,这块可以参照网上的。

    编辑全局配置后我们需要重新部署:

  • 先清除掉已经生成的旧文件:hexo clean
  • 再生成一次静态文件:hexo generate
  • 在本地预览下:hexo server
  • 本地没问题之后,Ctrl + C 停掉本地预览,使用部署命令部署到 Github 上:hexo deploy,有弹出下面提示框,请输入:yes


  • 然后访问服务器地址进行检查:http://xiangzhihong.github.io

    通过上面几次流程我们也就可以总结:以后,每次发表新文章要部署都按这样的流程来:

    • hexo clean
    • hexo generate
    • hexo deploy

    github pages绑定域名

    绑定域名,这块比较坑,我参照网上很多的都没弄明白,这里是我摸索的一个方法。阿里云(万网)+github域名绑定。

    购买域名

    首先是在阿里云上购买域名,大家也可以上其实的域名交易平台购买。




    域名解析

    在阿里云管理控制台中,选择【域名】》【域名列表】》【全部域名】中刚刚购买的域名,点击解析按钮 
    这时会提醒你选择解析到阿里云主机,或者其他主机,这时需要将你在Github上创建的Github Pages的域名 xxx.github.io进行查询,得到一个IP地址。

    admindeMacBook-Pro:blog admin$ ping xxx.github.io
    PING prod.github.map.fastlylb.net (151.101.100.133): 56 data bytes
    Request timeout for icmp_seq 0
    64 bytes from 151.101.100.133: icmp_seq=1 ttl=47 time=69.632 ms

    这里需要说明下,这里151.101.100.133是我的github的地址(就是xiangzhihong.github.io地址,你也可以ping自己的xx.github.io).


    如果你不会填,直接点上门的新手引导设置就好了。

    Github解析

    在Github的xxx.github.io项目,进入【Settings】标签页,在【Custom domain】功能中,将刚刚申请的域名写进去。

    备注:这里也可以用另一个工具去解析DNSPOD 。

    设置好后,过一会就可以访问了,反正我的是很快,点击打开链接


    整合 IntelliJ IDEA 提高效率

    为了提交写作效率,我个人建议使用 IntelliJ IDEA 作为 Markdown 编辑工具,这也是前端开发的一个利器。现在我们用 IntelliJ IDEA 打开我们本地目录。

    由于 IntelliJ IDEA 在 Windows 下的默认终端是 cmd 不好用,我们现在需要重新修改下 IntelliJ IDEA 的终端工具,把它指向我们习惯的 Git Bash,这样方便操作。

    为了更稳定地使用 IntelliJ IDEA,在不修改主题的情况下,我们还需要这样做,hexo 新文章内容的开头需要这样定义:

    • categories:表示文章所属分类
    • tags:表示文章所属标签

    例如:

    ---
    title: 这是文章标题
    date: 2016-10-25 17:58:27
    categories: [Hexo,IntelliJ IDEA]
    tags: [Hexo,IntelliJ IDEA,Git,Github,Node.js]
    ---

    打开项目的module(快捷键ctrl+shift+alt+s)

    github pages + Hexo + 域名绑定搭建个人博客的更多相关文章

    1. github pages + Hexo + 域名绑定搭建个人博客增强版

      概述 前面我们用github pages + Hexo 搭建了一个简单版的个人博客系统,但是里面的内容单调,很多功能不够完善,所以我们需要对yelle 的主题进行优化和完善.基本搭建请访问:http: ...

    2. 在github Pages上部署octopress搭建个人博客系统

      原文链接:http://caiqinghua.github.io/blog/2013/08/26/deploy-octopress-to-github-pages/ 引子 上一篇博客已经说了为什么要搭 ...

    3. github pages+阿里云域名绑定搭建个人博客

      1.选择mast 配置cname 设置域名 同时在github设置里面进行绑定 2.获取github pages的ip地址 打开你的电脑的命令行工具,ping你的github地址,忽略"/& ...

    4. 博客Hexo + github pages + 阿里云绑定域名搭建个人博客

      申请域名 万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制台进行解析 控制台 ...

    5. Hexo + github pages + 阿里云绑定域名搭建个人博客

      申请域名 万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制台进行解析 控制台 ...

    6. 使用 Github + Hexo 从 0 搭建一个博客

      最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧. 前置准备 我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步.不得有台服务器么, ...

    7. 利用GitHub和Hexo打造免费的个人博客

      每个程序猿都需要一个个人博客,目前广泛出现在大家视野里的有CSDN.博客园.简书,但是他们却没有给用户一个专属的站点.一个好记的域名.你需要一个https://xxx.xxx.xxx/格式的网址,一个 ...

    8. 利用 Hexo 或者 hugo 搭建个人博客

      我们无法选择生活的样子,但我们可以记下来. 博客的开始 其实,一切都是为了更好的装逼.好吧,我着相了. 最开始想做一个自己博客,主要是因为看到了很多人都有,觉得自己没有太 Low 了.于是申请了 CS ...

    9. 利用Github Pages创建的Jekyll模板个人博客添加阅读量统计功能

      目录 前言 准备工作 模板文件修改 写在最后 内容转载自我自己的博客 @(文章目录) 前言 Jekyll 是一个简单的免费的 Blog 生成工具,类似 WordPress .它只是一个生成静态网页的工 ...

    随机推荐

    1. [HNOI 2014]道路堵塞

      Description A国有N座城市,依次标为1到N.同时,在这N座城市间有M条单向道路,每条道路的长度是一个正整数.现在,A国 交通部指定了一条从城市1到城市N的路径,并且保证这条路径的长度是所有 ...

    2. [HNOI 2002]彩票

      Description 某地发行一套彩票.彩票上写有1到M这M个自然数.彩民可以在这M个数中任意选取N个不同的数打圈.每个彩民只能买一张彩票,不同的彩民的彩票上的选择不同. 每次抽奖将抽出两个自然数X ...

    3. 洛谷P3275 [SCOI2011]糖果

      差分约束大坑题 #include<cstdio> #include<cstdlib> #include<algorithm> #include<cstring ...

    4. C++Primer学习——动态内存

      静态内存:用来保存static 栈内存:保存非static 智能指针: shared_ptr:允许多个指针指向一个对象 unique_ptr:独占所指对象 weak_ptr:一种弱引用,指向share ...

    5. 【tyvj】刷题记录(1001~1099)(64/99)

      1001:排序完按照题意做即可. #include<cstdio> #include<iostream> #include<cmath> #include<a ...

    6. ●UVA 11796 Dog Distance

      题链: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

    7. hdu 5340 (manacher)

      Sample Input 2 abc abaadada   Sample Output Yes No 判断是否能成为3个非空回文子串 manacher算法求出个点回文长度,在找出第一个和最后一个保存下 ...

    8. MySQL的常用操作命令详解

      系统管理">系统管理 mysql服务">启动MySQL服务 通过windows服务管理器启动MySQL服务 ? 1 开始-->运行-->输入services ...

    9. 《Java技术》第三次作业

      (一)学习总结 1.阅读下面程序,分析是否能编译通过?如果不能,说明原因.应该如何修改?程序的运行结果是什么?为什么子类的构造方法在运行之前,必须调用父 类的构造方法?能不能反过来? class Gr ...

    10. javascript templating

      JavaScript Micro-Templating I’ve had a little utility that I’ve been kicking around for some time no ...