Hexo+github 免费搭建属于自己的博客

  Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。

# Hexo 安装
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

# 命令组合
$ hexo clean && hexo g && hexo s        # 清除、生成、启动
$ hexo clean && hexo g && hexo d        # 清除、生成、部署

# hexo 部署
$ npm install hexo-deployer-git --save

安装Hexo博客框架

安装Node.js 和 Git工具

  参考Hexo文档Hexo 是一个快速、简洁且高效的博客框架。安装 Hexo 相当简单,需要事先安装Node.js 和 Git两个工具。

  • Node.js (Node.js 版本需不低于 8.6,建议使用 Node.js 10.0 及以上版本)
  • Git

注意:其中git for windows最好挂上一个代理,否则下载速度十分缓慢,可以选择国内下载站

安装 Hexo 博客框架

(1) Node.js 和 Git安装完成后,打开要安装博客的盘或者文件夹,右键选择Git Bash Here,再输入以下命令安装Hexo。

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
(图)Git Bash安装Hexo

(2)打开浏览器,输入网址http://localhost:4000/,可以看到Hexo生成的本地界面(默认landscape主题)。

(图)landscape主题

常用hexo命令介绍

命令缩写

$ hexo g:    hexo generate    # 生成静态网页
$ hexo c:    hexo clean    # 清除
$ hexo s:    hexo server    # 生成本地服务器
$ hexo d:    hexo deploy    # 部署

命令组合

$ hexo clean && hexo g && hexo s        # 清除、生成、启动
$ hexo clean && hexo g && hexo d        # 清除、生成、部署

Hexo部署到Github

  此前只可以在本地访问博客,将hexo部署到GitHub是为了能在任何设备上浏览博客。

  Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。本文依托的是gitHub pages服务+hexo来搭建。使用Github pages服务搭建博客的好处是访问速度快(全是静态文件)、免费搭建、不需要服务器和后台、绑定域名方便。

创建Github仓库

打开Github官网,注册账号。

(图)注册Github账号

点击“+”号,再点击New repository,创建仓库。仓库名应该为username.github.io
例如我的xxty847.github.io

(图)创建Github仓库

添加SSH公钥到GitHub

(1)打开Git Bash终端,输入以下命令生成秘钥

$ git config --global user.name "yourname"
$ git config --global user.email "youremail"
$ ssh-keygen -t rsa -C "youremail"
其中yourname为GitHub用户名,youremail为GitHub注册邮箱。

此时,在C盘用户文件夹下就会有一个新的.ssh文件夹,里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。
把id_rsa.pub公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

id_rsa是你这台电脑的私人秘钥,不能给别人看的;id_rsa.pub是公共秘钥,可以随便给别人看。

(2)在GitHub的setting中,找到SSH keys的设置选项
(3)点击New SSH key,把公钥id_rsa.pub里面的信息复制进去。

(图)添加SSH公钥

将hexo部署到GitHub

(1)打开Git Bash终端,输入以下命令

$ npm install hexo-deployer-git --save

(2)打开站点配置文件 _config.yml。以我的xxty847.github.io为例,末尾添加以下内容:

config.yml
1
2
3
4
5
6
7
8
9
10
......
# Deployment 注释
## Docs: https://hexo.io/docs/deployment.html
deploy:
# 类型
type: git
# 仓库
repo: https://github.com/xxty847/xxty847.github.io.git
# 分支
branch: master

(3)打开Git Bash终端,输入以下命令

$ hexo clean && hexo g && hexo d

打开浏览器,输入http:/xxty847.github.io。可以看到与本地生成的http://localhost:4000/网页一样,不同的是http:/xxty847.github.io可以在任何设备上浏览。

绑定域名

  不想花钱购买域名以跳过这个步骤,GitHub 提供的二级域名username.github.io,平常自己写写博客也够用了。

(图)GitHub 二级域名

购买域名

  国内的域名代理商可以选择腾讯云或者阿里云。我在腾讯云购买的域名xioaxioataoya.club

(图)购买域名

设置云解析

可参考github help:自定义域名解析设置文档。里面关于IP地址有四个:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

也可以自己 ping xxty847.github.io 查看IP地址。

(图)IP地址

云解析设置主要有两部分:

主机记录:@   记录类型:A      记录值:IP地址
主机记录:www 记录类型:CNAME  记录值:GitHub 二级域名
(图)设置云解析

博客绑定域名

(1)在博客根目录下source文件夹下创建CNAME文件(没有任何后缀),添加自己购买的的域名。

CNAME
1
xioaxioataoya.club

(2)打开仓库 ,点击setting ,下滑找到custom domain,添加域名

(图)设置自定义域名

(3)打开Git Bash终端,输入以下命令

$ hexo clean && hexo g && hexo d

(4)打开浏览器,输入自己域名xioaxioataoya.club查看是否成功显示。

出现的问题

warning: LF will be replaced by CRLF问题。

  在windows上传时可能出现 warning: LF will be replaced by CRLF问题。这是由于windows中的换行符为CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示。

解决办法

在博客根目录下打开git终端:

(1)删除.git

$ rm -rf .git  // 删除.git  
$ git config --global core.autocrlf false  // 禁用自动转换

(2)重新安装

$ git init  // 重新安装 git   
$ git add .  // 注意有 .
+