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

搭建的过程还算比较顺利,没有遇到多大的问题,虽然这篇博客的内容也是从别人的博客东粘西补过来的,为什么要东粘西补呢,因为光照着一篇博客并不能顺利搭建,还需要其他博客来补充。

本博客的最大好处是只要阅读这一篇博客就能解决问题,这里找出了我踩过的雷坑,方便大家畅通无阻的搭建。

原材料

  • 域名(自行购买)
  • 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. Hexo+Git一个小时快速搭建个人博客

    搭建本地环境:Hexo框架 Hexo为何物 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页.其中,Markdown是一个用于将普通 ...

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

    使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...

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

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

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

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

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

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

  6. Github Pages+Gridea搭建个人博客

    1 概述 Github Pages可以用来托管个人网站,静态的,便于用来实现博客,可以在一个仓库的settings中开启: Gridea是一个静态博客写作客户端,所有文件都在本地,没有数据库,实现简单 ...

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

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

  8. 在GitLab pages上快速搭建Jekyll博客

    前一段时间将我的Jekyll静态博客从github pages镜像部署到了 zeit.co(现vercel)上了一份,最近偶然发现gitlab pages也不错,百度也会正常抓取,于是动手倒腾,将gi ...

  9. 如何使用 GitHub Pages 维护自己的博客

    目录 前置知识 实际操作 声明 本文地址:如何使用 GitHub Pages 维护自己的博客 前置知识 首先,你应该知道如何用 Hexo 在本地搭建一个博客系统,具体见 Hexo. 其次,我们如果想使 ...

随机推荐

  1. 813. Largest Sum of Averages

    We partition a row of numbers A into at most K adjacent (non-empty) groups, then our score is the su ...

  2. 《Python绝技:运用Python成为顶级黑客》 用Python进行无线网络攻击

    本章大部分代码都是实现了但是缺乏相应的应用环境,想具体测试的可以直接找到对应的环境或者自行修改脚本以适应生活常用的环境. 1.搭建无线网络攻击环境: 用Scapy测试无线网卡的嗅探功能: 插入无线网卡 ...

  3. FunDA(5)- Reactive Streams:Play with Iteratees

    FunDA的设计目标就是把后台数据库中的数据搬到内存里,然后进行包括并行运算的数据处理,最后可能再对后台数据库进行更新.如果需要把数据搬到内存的话,那我们就必须考虑内存是否能一次性容纳所有的数据,有必 ...

  4. Flask从入门到精通之Flask-Moment本地化日期和时间

    Moment.js 是一个简单易用的轻量级JavaScript日期处理类库,提供了日期格式化.日期解析等功能.它支持在浏览器和NodeJS两种环境中运行.此类库能够 将给定的任意日期转换成多种不同的格 ...

  5. Flask从入门到精通之链接的使用

    在Web开发中,任何具有多个路由的程序都需要可以连接不同页面的链接,例如导航条. 在模板中直接编写简单路由的URL 链接不难,但对于包含可变部分的动态路由,在模板中构建正确的URL 就很困难.而且,直 ...

  6. 模仿 AppStore 顶部动画

    App Store 顶部动画 App Store 中 Games.Apps.Updates 的顶部动画的特点: 自然状态下是大标题,右边有一个 button 顶上去时,变成小标题,右边按钮消失 导航栏 ...

  7. 【洛谷十月月测】 P3927 SAC E#1 - 一道中档题 Factorial

    题目传送门:https://www.luogu.org/problemnew/show/P3927 题目大意:给你两个正整数n,k,求n!在k进制下末尾零的数量. 我们通过简单的数学分析,便可以发现, ...

  8. JS滑动到页面底部

    window.scrollTo(0, document.documentElement.clientHeight); 该 window 对象在DOM有一个 scrollTo 滚动到打开窗口 的任意位置 ...

  9. 面试题:js如何渲染十万条数据并不卡住界面

    这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...

  10. Yum Proxy

    $ cat /etc/yum.conf[main]cachedir=/var/cache/yum/$basearch/$releaseverkeepcache=0debuglevel=2logfile ...