在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽。作为出入编程的一枚小白也想拥有这样一个自己的网站。那就立马去买一个域名了,在网上找教程来搭建。
搭建的过程还算比较顺利,没有遇到多大的问题,虽然这篇博客的内容也是从别人的博客东粘西补过来的,为什么要东粘西补呢,因为光照着一篇博客并不能顺利搭建,还需要其他博客来补充。
本博客的最大好处是只要阅读这一篇博客就能解决问题,这里找出了我踩过的雷坑,方便大家畅通无阻的搭建。

原材料

  • 域名(自行购买)
  • node.js(官网下载
  • git(官网下载
  • hexo。
    方法:git安装完成后,在桌面右键,点击Git Bash Here,输入npm命令
npm install hexo-cli -g
npm install hexo-deployer-git --save

第一句是安装hexo,第二句是安装hexo部署到git page的deployer。

本地搭建Hexo静态博客

  • 创建Hexo文件夹
    自己挑选一个目录建立一个文件夹(E:\MyBlog),进入MyBlog文件夹下,右键点击Git Bash Here,进入Git命令框,执行以下操作,生成hexo模板
hexo init
  • 本地查看效果
    执行下面语句,执行完即可登录localhost:4000查看效果
hexo generate
hexo server

也可以使用简写

hexo g -s

本地博客以及搭建起来,接下来需要把本地的博客发布到服务器上。

将博客部署到Github Page上

一、创建项目代码库

Github Pages是寄存在Github上面的,即需要在Github上创建一个新的项目。
登录自己的Github账户,点击New repository,需要注意的是填写Repository name时,名字的格式必须为xxx.github.io
xxx为自己的github的用户名,比如我的github名为ghq120,所以创建仓库名为ghq120.github.io

二、配置SSH密钥

配置Github的SSH密钥可以让本地git项目与远程的github建立联系,让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步。

生成及配置SSH不多做说明,丢出一个连接
SSH连接GitHub、GitHub配置ssh key
简单来说就是生成一个SSH密钥,然后在GitHub中添加密钥。
配置完成后,可以在git窗口中输入可查看是否设置成功

$ ssh -T git@github.com

显示如下即成功

三、将本地的Hexo文件更新到Github的库中

打开MyBlog文件夹下 _config.yml文件,找到deploy关键字,改如下配置

deploy:
  type: git
  repository: git@github.com:ghq120/ghq120.github.io.git
  branch: master

repository的内容将 ghq120 替换为自己的用户名
在MyBlog文件夹下执行:

$ hexo g -d

执行完输入github的账号密码,完成后可在浏览器输入https://gh120.github.io/ 访问博客。

若出现 ERROR Deployer not found: git错误说明deployer没有安装成功,将如下命令再安装一次即可:

npm install hexo-deployer-git --save

GitHub Page绑定自己的域名

一、CNAME文件

在source文件夹中新建一个CNAME文件(无后缀名),然后用文本编辑器打开,在首行添加你的网站域名,如

mipha.top

注意前面没有http://,也没有www,然后使用hexo g -d上传部署。

二、配置DNS

本人的域名是在阿里云买的,解析配置DNS使用的是DNSPOD 。
在配置页面加入这两条记录
其中记录值处的内容是ping你的ghq120.github.io域名,得到一个IP

因为是在DNSPOD处解析域名,所以需要在阿里云域名管理台处修改DNS如下

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

三、等待生效

等10分钟解析生效后就可以通过在浏览器中输入自己的域名来访问GitHub Pages博客。

使用Hexo和Github Pages快速搭建个人博客的更多相关文章

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

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

  2. 使用GitHub Pages+Jekyll搭建个人博客

    GitHub Pages 免费无限容量的站点数据托管工具(国内访问速度较慢),内置Jekyll服务,能将特定名称的代码仓库动态编译为静态网页 Jekyll 基于Ruby的静态网页生成系统,采用模板将M ...

  3. 使用jekyll在GitHub Pages上搭建个人博客【转】

    网上有不少资源,但大多是“授人以鱼”,文中一步一步的告诉你怎么做,却没有解释为什么,以及他是如何知道的.他们默认着你知道种种专业名词的含义,默认着你掌握着特定技能.你折腾半天,查资料,看教程,一步步下 ...

  4. 利用GitHub Pages + jekyll快速搭建个人博客

    前言 想搭建自己博客很久了(虽然搭了也不见得能产出多频繁). 最初萌生想写自己博客的想法,想象中,是自己一行一行码出来的成品,对众多快速构建+模板式搭建不屑一顾,也是那段时间给闲的,从前后端选型.数据 ...

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

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

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

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

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

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

  8. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  9. GitHub快速搭建个人博客

    > 正所谓前人栽树,后人乘凉.> > 感谢[Huxpro](https://github.com/huxpro)提供的博客模板> > [我的的博客](https://fl ...

随机推荐

  1. ListView之头部浮动效果

    ListView 中有时需要在顶部固定一个浮动栏,当向上滑动 ListView 时,浮动栏固定在顶部,当向下滑动 ListView 到其 HeaderView 可见时,浮动栏成为ListView的一部 ...

  2. AFNetworking 基本使用

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的 3如何选择AFNetwork ...

  3. 实用Redis操作类

    <?php /** * ------------------------------------------ * 统一redis的配置与数据存储规范,便于扩展与修改 * # redis通常用于热 ...

  4. Jenkins进阶系列之——16一个完整的JENKINS下的ANT BUILD.XML文件

    网上看见的,确实很全,该有的基本都覆盖到了.自己拿来稍微改改就可以用了. 注:property中的value是你自己的一些本地变量.需要改成自己的 <?xml version="1.0 ...

  5. Linux Epoll介绍和程序实例

    Linux Epoll介绍和程序实例 1. Epoll是何方神圣? Epoll但是当前在Linux下开发大规模并发网络程序的热门人选,Epoll 在Linux2.6内核中正式引入,和select类似, ...

  6. Javascript学习九

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  7. junit4X系列源码--Junit4 Runner以及test case执行顺序和源代码理解

    原文出处:http://www.cnblogs.com/caoyuanzhanlang/p/3534846.html.感谢作者的无私分享. 前一篇文章我们总体介绍了Junit4的用法以及一些简单的测试 ...

  8. 将openface移植到vs2013

    github上面的开源代码openface:https://github.com/TadasBaltrusaitis/OpenFace 可用于做人脸检测和头部姿态检测,该工程是在VS2015上建立的, ...

  9. Ajax刷新DIV内容

    Ajax刷新DIV内容 实现了网页的异步数据处理,不用刷新整个页面 <标签 onmouseover="method"/ >method:这个参数是处理onmouseov ...

  10. JMeter中Ultimate Thread Group插件使用

    JMeter下载地址:  http://jmeter.apache.org/Ultimate Thread Group插件下载地址: https://jmeter-plugins.org/get/ 一 ...