开发者社区> code_xzh> 正文

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,你可以自己写。输入命令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地址。
[plain] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-family:SimHei;font-size:14px;">admindeMacBook-Pro:blog admin$ ping xxx.github.io  
  2. PING prod.github.map.fastlylb.net (151.101.100.133): 56 data bytes  
  3. Request timeout for icmp_seq 0  
  4. 64 bytes from 151.101.100.133: icmp_seq=1 ttl=47 time=69.632 ms</span>  
这里需要说明下,这里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]
---

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何搭建Hexo个人博客?
阿里云服务器如何搭建Hexo个人博客?
1918 0
开发人员,怎能没有个人博客!域名ICP备案
开发人员,怎能没有个人博客!域名ICP备案
65 0
用GitHub和Hexo搭建个人博客
很久前就想利用GitHub来搭建一个个人博客了,今天就琢磨了一下搭建方法,在这里写出来以供他人参考~ 一、简介 Hexo: Hexo 是一款基于Node.js、快速、简洁且高效的博客框架,Hexo 使用 Markdown解析文章,在几秒内,即可利用各式主题生成静态网页 NodeJs Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
1062 0
dubbo-admin 监控搭建(最官方、最详细)
因为我们不能直观的看到dubbo和zk上到底有什么服务(提供者),所以我们需要一个可视化工具来方便我们管理每一个服务和每一个节点。 先上个成功后的监控图: 示例环境 maven 3.x jdk 1.8 tomcat 1.8 idea 2018 git 1.克隆项目 apache 下的dubbo-admin git仓库 :https://github.com/apache/incubator-dubbo-ops 我们需要先把这个项目用git克隆到本地中。
1400 0
零基础安装wordpress,搭建个人博客!
总结一下使用wordpress搭建个人博客的三大步骤: 1.购买阿里云主机 2.选择安装wordpress镜像操作系统 3.安装配置wordpress 4.购买域名,配置域名解析 阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
2998 0
xming + putty 搭建远程图形化ssh访问ubuntu 14.04
欢迎关注大数据和人工智能技术文章发布的微信公众号:清研学堂,在这里你可以学到夜白(作者笔名)精心整理的笔记,让我们每天进步一点点,让优秀成为一种习惯! putty下载:   http://www.putty.org/     一般我们远程登录linux 服务器,都是使用非加密的 telnet 或者加密的 ssh。
4115 0
快速使用HEXO搭建个人博客 韩俊强的博客
  经过各种找资料,踩过各种坑,终于使用 hexo 搭建个人博客初步完成了,域名目前用得时 github 的,我的 hexo 是 3.1.1 版本,hexo 不同的版本,很多配置都不一样。
1325 0
Jekyll搭建个人博客 韩俊强的博客
 之前写了一篇HEXO搭建个人博客的教程获得了很好评,有很多读者主动给我打赏,在此感谢。  如果你看过我的文章会发现我现在的博客样式跟之前是有很大的区别的,之前我也是使用 HEXO 搭建的博客,后来发现使用 HEXO 在多台电脑上发布博客,操作起来并不是那么方便,果断就转到了 Jekyll 上,接下来我会讲如何使用 Jekyll 搭建博客,博客模板效果。
1560 0
python3实现域名查询和whois查询
关键字:python3 域名查询 域名查询接口 whois查询原文:http://www.cnblogs.com/txw1958/archive/2012/08/31/python3-domain-whois.
2712 0
+关注
code_xzh
对前端移动客户端技术比较擅长。著有《React Native移动开发实战》和《Kotlin入门与实战》和《Weex跨平台实战》,《React Native移动开发进阶》即将出版,正在努力完成《Flutter跨平台开发实战》
736
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载