基于GitHub和Hexo搭建个人博客
基于GitHub和Hexo搭建个人博客
本文是使用Mac电脑, 基于GitHub和Hexo搭建个人博客, 搞了两三天, 反复尝试了无数次, 踩了无数坑搭建起来的, 主要跟大家分享一点小经验, 希望对大家能有帮助!
一. github博客简介
github 是全球最大的社交编程及代码托管网站，GitHub可以托管各种git库，并提供一个web界面，但与其它像SourceForge或Google Code这样的服务不同，GitHub的独特卖点在于从另外一个项目进行分支的简易性。这里着重写如何使用Github的page功能搭建个人博客!
使用github pages服务搭建博客的好处有：
- 全是静态文件，访问速度快；
- 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
- 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；
- 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
- 博客内容可以轻松打包、转移、发布到其它平台；
二. 准备工作
- 有一个github账号，没有的话去GitHub注册一个
- 安装了node.js、npm，并了解相关基础知识
- 安装了git
三. 环境搭建
1. 安装Node.js
- 用来生成静态页面, 到Node.js官网，下载最新版本, 根据提示一路安装即可
Node.js默认会安装 npm- 也可以使用
Homebrew进行命令安装, 详情参考React Native中文网安装方法
2. 安装Git
- 用来将本地Hexo内容提交到Github上。下载的Xcode自带Git，这里不再赘述。
- 如果没有Xcode可以参考Hexo官网上的安装方法
- 通用版的Git安装, 无法下载的童鞋，可以去网上搜索下载
3. 安装Hexo
当Node.js和Git都安装好后就可以正式安装Hexo了，终端执行如下命令：
sudo npm install -g hexo此时, 会提示你输入管理员密码(电脑密码), 开始安装
四. 本地搭建 hexo 静态博客
- 在电脑中新建一个文件夹, 文件夹名字随意, 如MyBlog
- 在终端, cd 进入该文件夹
- 终端运行 git, 生成hexo模板，可能要
hexo init安装完模板, 安装npm
npm install最后, 开启hexo服务器
hexo s此时，浏览器中打开网址http://localhost:4000，能看到如下页面：
五. 将博客与Github关联
1. 在GitHub上配置SSH key
为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。
1.1首先检查本机是否存在的ssh密钥
- 如果存在, 直接进行步骤1.3, 否则执行步骤1.2生成新的密钥
- 打开终端输入, 注意
~/.ssh之间没有空格
cd ~/.ssh如果提示：No such file or directory 说明你是第一次使用git, 或者之前没有安装过SSh密钥
1.2. 生成新的ssh key
注意后面添加自己注册GitHub的邮箱地址, 打开终端输入
ssh-keygen -t rsa -C "邮件地址"- 输入命令后, 然后连续回车, 默认会在相应路径下（~/.ssh/id_rsa.pub）生成id_rsa和id_rsa.pub两个文件
- 打开’访达’, 选择进入文件夹(快捷键Command+Shift+G), 输入~/.ssh, 进入该文件夹
1.3. 将ssh key添加到Github中
打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
将刚复制的内容粘贴到key那里，title随便填，保存
1.4. 测试SSH配置是否成功
ssh -T git@github.com 如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：
Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.看到这个信息说明SSH已配置成功！
1.5. 更改GitHub用户名和邮箱
$ git config --global user.name XXXX// 你的github用户名，非昵称
$ git config --global user.email "[email protected]"// 填写你的github注册邮箱2. 关联Github
2.1 新建XXX.github.io 的项目
在 Github 上创建名字为 XXX.github.io 的项目，XXX为必须和自己的 github 用户名一模一样
2.2 修改_config.yml文件配置
- 打开本地的 MyBlog 文件夹项目内的_config.yml 配置文件
- 将其中的 type 设置为git，repository 是你 github.io 仓库的 git 地址, 如下所示
- 此处切记, 每一个毛好的后面都要加一个空格, 垂直方向一定要对齐, 否则可能会报错
deploy:
type: git
repository: https://github.com/CoderTitan/CoderTitan.github.io.git
branch: master2.3 将配置文件上传GitHub
- 打开终端, cd到MyBlog文件夹下, 以下命令均在MyBlog文件夹下执行
在blog文件夹目录下执行生成静态页面命令：
hexo generate 或者：hexo g此时若出现如下报错：
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'则执行命令：
npm install hexo --save再执行配置命令：
hexo deploy 或者：hexo d报错一: 若执行命令hexo deploy仍然报错：无法连接git或找不到git，则执行如下命令来安装hexo-deployer-git：
npm install hexo-deployer-git --save报错二: 若执行命令hexo d报以下错误:
ERROR Plugin load failed: hexo-server
//或者类似的错误
ERROR Plugin load failed: hexo-renderer-sass
则执行响应的命令:
sudo npm install hexo-server
//或者
sudo npm install hexo-renderer-sass解决玩错误之后, 最后在执行
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 目录下执行如下命令：
git clone https://github.com/stiekel/hexo-theme-random.git themes/random修改_config.yml中的theme: landscape改为theme: random，然后重新执行hexo g来重新生成
终端cd到MyBlog目录下执行如下命令(每次部署文章的步骤)：
hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g //生成缓存和静态文件
hexo d //重新部署到服务器七. 域名绑定
- 现在使用的域名是Github提供的二级域名
XXX.github.io，也可以绑定为自己的个性域名。 - 购买域名，可以到GoDaddy官网，现在
GoDaddy已经有中文版了，虽然国家显示是新加坡，但不影响使用, 还可使用支付宝支付 - 也可以到阿里万网购买, 我是在万网买的，可直接在其网站做域名解析
1. 域名解析
如果将域名指向一个域名，实现与被指向域名相同的访问效果，需要增加CNAME记录。登录万网，在你购买的域名后边点击：解析, 如下图
进入解析页面后点击添加解析, 向你的 DNS 配置中添加 3 条记录, 如下图
注意CNAME记录添加的是username.github.io.(不要忘记后面的.), 可能最后一个点不显示(我的就不显示)
2. 设置GitHub配置信息
- 打开你的XXX.github.io项目地址, 找到设置页面
- 滚动到下方找到
GitHub Pages模块, 在Custom domain, 输入你购买的域名, 点击Save保存
3. 创建CNAME文件
- 在/MyBlog/themes/landscape/source目录下新建文件名为：CNAME文件，注意没有后缀名！直接将自己的域名写入
CNAME一定要大写
//在终端cd到该目录下, 然后输入命令, 即可创建该文件
touch CNAME- 完成上述步骤后, 终端cd到MyBlog目录下执行如下命令重新部署：
- 最后, 等十分钟左右，刷新浏览器，用你自己域名访问下试试
$ hexo clean
$ hexo g
$ hexo d至此也算终于大功告成了, 感受一下: https://www.titanjun.top