github pages + Hexo + 域名绑定搭建个人博客

环境
  • 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,你可以自己写。当然hexo还提供了很多的其他模板,可以根据个人喜好增加。输入命令: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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java3y

Linux用户和权限管理看了你就会用啦

没想到上一篇能在知乎获得千赞呀,Linux也快期末考试了,也有半个月没有写文章了。这篇主要将Linux下的用户和权限知识点再整理一下。

3.2K1
来自专栏北京马哥教育

生产环境之“进程”两字

一、进程概念 运行中的程序的一个副本,是被载入内存的一个指令集合 进程ID(Process ID,PID)号码被用来标记各个进程UID、GID、和SELinux...

3668
来自专栏dotnet & java

这可能是最low的发布dotnet core站点到centos7教程

不得不说:我在chrome上写了好长一段,贴了23张图,然后一个crash。。我想说我电脑上的chrome已经crash太多次了 以后一定要搞离线编辑的。

923
来自专栏小狼的世界

Mac下使用XLD转换无损音乐Ape

最近想要给音乐库增加一些音乐,下载了一些Ape格式的无损音乐,但是无法直接导入到iTunes中,必须经过其他工具转换成苹果的无损格式,XLD就是这样一款工具。X...

2101
来自专栏Java成神之路

Maven之 环境搭建

这几天开始了maven的学习,看了孔浩老师的视频(http://pan.baidu.com/s/1o7bg2h0),以及黄勇大牛的博客(http://my.os...

2191
来自专栏程序猿DD

Jenkins:配置信息变更历史

作者:sparkdev 出处:http://www.cnblogs.com/sparkdev/ 像 Jenkins 这样的系统,使用的过程就是配置文件变更的过程...

2575
来自专栏王磊的博客

ReactNative环境搭建扩展篇——安装后报错解决方案

之前一篇写了《逻辑性最强的React Native环境搭建与调试》说了RN的安装,今天在这里做一个复盘,让我们能够更直观更深入的了解React Native(以...

3608
来自专栏黑泽君的专栏

day20_day23课堂笔记

    2. 在首页上点击类别链接时会跳转到 product_list.jsp 页面展示相关商品信息

1332
来自专栏IT笔记

Grafana+Telegraf+Influxdb监控Tomcat集群方案

前一段时间自家养的几只猫经常出问题,由于没有有效的监控预警手段,以至于问题出现或者许久一段时间才会被通知到。凌晨一点这个锅可谁都不想背,为此基于目前的情况搭建了...

2911
来自专栏python3

diango使用数据库

之前写的页面,虽然和用户交互得很好,但并没有保存任何数据,页面一旦关闭,或服务器重启,一切都将回到原始状态。

1323

扫码关注云+社区

领取腾讯云代金券