基于GitHub和Hexo搭建个人博客

Hexo博客

本文是使用Mac电脑, 基于GitHub和Hexo搭建个人博客, 搞了两三天, 反复尝试了无数次, 踩了无数坑搭建起来的, 主要跟大家分享一点小经验, 希望对大家能有帮助!

github博客简介

github 是全球最大的社交编程及代码托管网站,GitHub可以托管各种git库,并提供一个web界面,但与其它像SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。这里着重写如何使用Github的page功能搭建个人博客!

使用github pages服务搭建博客的好处有:

  • 全是静态文件,访问速度快;
  • 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
  • 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;
  • 数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
  • 博客内容可以轻松打包、转移、发布到其它平台;

准备工作

环境搭建

安装Node.js

  • 用来生成静态页面, 到Node.js官网,下载最新版本, 根据提示一路安装即可
  • Node.js默认会安装 npm
  • 也可以使用Homebrew进行命令安装, 详情参考React Native中文网安装方法

安装Git

  • 用来将本地Hexo内容提交到Github上。下载的Xcode自带Git,这里不再赘述。
  • 如果没有Xcode可以参考Hexo官网上的安装方法
  • 通用版的Git安装, 无法下载的童鞋,可以去网上搜索下载

安装Hexo

当Node.js和Git都安装好后就可以正式安装Hexo了,终端执行如下命令:

1
sudo npm install -g hexo

此时, 会提示你输入管理员密码(电脑密码), 开始安装

本地搭建 hexo 静态博客

  • 在电脑中新建一个文件夹, 文件夹名字随意, 如MyBlog
  • 在终端, cd 进入该文件夹
  • 终端运行 git, 生成hexo模板,可能要翻墙
1
hexo init

安装完模板, 安装npm

1
npm install

最后, 开启hexo服务器

1
hexo s

此时,浏览器中打开网址http://localhost:4000,能看到如下页面:

Snip20180303_1.png

将博客与Github关联

在GitHub上配置SSH key

为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

首先检查本机是否存在的ssh密钥

  • 如果存在, 直接进行步骤1.3, 否则执行步骤1.2生成新的密钥
  • 打开终端输入, 注意~/.ssh之间没有空格
1
cd ~/.ssh

如果提示:No such file or directory 说明你是第一次使用git, 或者之前没有安装过SSh密钥

生成新的ssh key

注意后面添加自己注册GitHub的邮箱地址, 打开终端输入

1
ssh-keygen -t rsa -C "邮件地址"
  • 输入命令后, 然后连续回车, 默认会在相应路径下(~/.ssh/id_rsa.pub)生成id_rsa和id_rsa.pub两个文件
  • 打开’访达’, 选择进入文件夹(快捷键Command+Shift+G), 输入~/.ssh, 进入该文件夹

将ssh key添加到Github中

打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:

将刚复制的内容粘贴到key那里,title随便填,保存

测试SSH配置是否成功

1
ssh -T git@github.com  

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:

1
Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功!

更改GitHub用户名和邮箱

1
2
$ git config --global user.name XXXX// 你的github用户名,非昵称
$ git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱

关联Github

新建XXX.github.io 的项目

在 Github 上创建名字为 XXX.github.io 的项目,XXX为必须和自己的 github 用户名一模一样

修改_config.yml文件配置

  • 打开本地的 MyBlog 文件夹项目内的_config.yml 配置文件
  • 将其中的 type 设置为git,repository 是你 github.io 仓库的 git 地址, 如下所示
  • 此处切记, 每一个毛好的后面都要加一个空格, 垂直方向一定要对齐, 否则可能会报错
1
2
3
4
deploy:
type: git
repository: https://github.com/CoderTitan/CoderTitan.github.io.git
branch: master

将配置文件上传GitHub

  • 打开终端, cd到MyBlog文件夹下, 以下命令均在MyBlog文件夹下执行

在blog文件夹目录下执行生成静态页面命令:

1
hexo generate     或者:hexo g

此时若出现如下报错:

1
2
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

则执行命令:

1
npm install hexo --save

再执行配置命令:

1
hexo deploy           或者:hexo d

报错一: 若执行命令hexo deploy仍然报错:无法连接git或找不到git,则执行如下命令来安装hexo-deployer-git:

1
npm install hexo-deployer-git --save

报错二: 若执行命令hexo d报以下错误:

1
2
3
4
ERROR Plugin load failed: hexo-server
//或者类似的错误
ERROR Plugin load failed: hexo-renderer-sass

则执行响应的命令:

1
2
3
sudo npm install hexo-server
//或者
sudo npm install hexo-renderer-sass

解决玩错误之后, 最后在执行

1
hexo d

几个注意的地方:

  1. 注册的邮箱一定要验证,否则不会成功;
  2. 仓库名字必须是:username.github.io,其中username是你的用户名;
  3. 仓库创建成功不会立即生效,需要过一段时间,大概10-30分钟,或者更久,我的等了半个小时才生效;
  4. hexo d命令执行成功后,浏览器中打开网址http://XXX.github.io(将XXX换成你的用户名)能看到和打开http://localhost:4000时一样的页面

安装theme主题

  • 搭建好的默认的主题真的是很丑, 所以这里我们先替换一个好看的主题, 大家更可以到官方主题去选择自己喜欢的主题样式
  • 示例主题: Random

终端cd到 MyBlog 目录下执行如下命令:

1
git clone https://github.com/stiekel/hexo-theme-random.git themes/random

修改_config.yml中的theme: landscape改为theme: random,然后重新执行hexo g来重新生成

终端cd到MyBlog目录下执行如下命令(每次部署文章的步骤):

1
2
3
4
5
hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)

hexo g //生成缓存和静态文件

hexo d //重新部署到服务器

域名绑定

  • 现在使用的域名是Github提供的二级域名XXX.github.io,也可以绑定为自己的个性域名。
  • 购买域名,可以到GoDaddy官网,现在 GoDaddy已经有中文版了,虽然国家显示是新加坡,但不影响使用, 还可使用支付宝支付
  • 也可以到阿里万网购买, 我是在万网买的,可直接在其网站做域名解析

域名解析

如果将域名指向一个域名,实现与被指向域名相同的访问效果,需要增加CNAME记录。登录万网,在你购买的域名后边点击:解析, 如下图

Snip20180303_4.png

进入解析页面后点击添加解析, 向你的 DNS 配置中添加 3 条记录, 如下图
注意CNAME记录添加的是username.github.io.(不要忘记后面的.), 可能最后一个点不显示(我的就不显示)

Snip20180303_5.png

设置GitHub配置信息

  • 打开你的XXX.github.io项目地址, 找到设置页面
  • 滚动到下方找到GitHub Pages模块, 在Custom domain, 输入你购买的域名, 点击Save保存

创建CNAME文件

  • 在/MyBlog/themes/landscape/source目录下新建文件名为:CNAME文件,注意没有后缀名!直接将自己的域名写入
  • CNAME一定要大写
1
2
//在终端cd到该目录下, 然后输入命令, 即可创建该文件
touch CNAME
  • 完成上述步骤后, 终端cd到MyBlog目录下执行如下命令重新部署:
  • 最后, 等十分钟左右,刷新浏览器,用你自己域名访问下试试
1
2
3
4
5
$ hexo clean

$ hexo g

$ hexo d

至此也算终于大功告成了, 感受一下: https://www.titanjun.top