Hexo 搭建博客

上一篇文章 阿里云虚拟机下搭建Typecho、WordPress博客 简单的记录了Typecho、WordPress下搭建个人博客过程，今天这篇文章记录下Hexo搭建个人博客的过程，对于此平台的介绍分析个人博客搭建前期工作这篇文章也有说道。

配置 Git

• 安装 Git：下载安装后，注册 GitHub 账号并配置 Git
• 创建 GitHub Repository：Repository 名字必须是 你的 GitHub 名.GitHub.io

配置 SSH

打开终端 ，输入cd ~/.ssh，如果果提示：No such file or directory说明未配置 SSH

• 本地生成密钥对
  ssh-keygen -t rsa -C "你的邮件地址"，注意命令中的大小写不要搞混。按提示指定保存文件夹，不设置密码。
• 添加公钥到 GitHub
• 根据上一步的提示，找到公钥文件（默认为id_rsa.pub），用记事本打开，全选并复制。
• 登录 GitHub，右上角 头像 —> Settings —>SSH keys and GPG keys —> New SSK key。把公钥粘贴到 Key 中，任意填好 Title 并点击 Add SSH key。
• 终端中输入命令 ssh -T git@github.com，选 yes，等待片刻可看到成功提示。
• 修改本地的 ssh remote url，不用 HTTPS 协议，改用 Git 协议
• GitHub 仓库中获取 ssh 协议相应的 url
• 本地仓库执行命令git remote set-url origin "你的仓库的url" ，配置完后可用git remote -v 查看结果

配置 hexo

• 安装 Node.js
• 安装 Hexo：npm install hexo-deployer-git --save，可用 hexo -v查看版本
  可能安装过程并不是那么顺利，这个时候就需要到代理来安装：
• 清除代理：npm config delete http-proxy和npm config delete https-proxy
• 指向国内镜像源：npm config set registry http://registry.cnpmjs.org/
• 创建 Hexo 文件夹：新建放置博客的文件夹，进入并执行命令hexo init。hexo 会在目标文件夹建立网站所需要的所有文件
• 安装依赖包：npm install
• 部署：打开博客根目录下的 _config.yml 文件，修改配置: 官方配置文档

把Hexo部署到 GitHub

• 生成静态页面执行命令：hexo generate 或hexo g
• 启动本地服务器执行命令：hexo server或hexo s在浏览器中打开http://localhost:4000/，如果打开正常执行下一步。
• 部署网站执行命令：hexo deploy或hexo d

在浏览器中打开iOSWynter.github.io预览效果，反正我是打不开。

绑定域名

• 向你的 Github Pages 仓库添加一个CNAME文件
• 写入域名如：wynter.wang
• 注意不要带www
• 执行hexo d -g
• 向DNS中添加三条记录

@ A 192.30.252.153
@ A 192.30.252.154
www CNAME username.github.io

• 等待 DNS 配置生效（10分钟左右）
• 通过在浏览器中输入域名访问网站

配置HTTPS

为了使网站更全最好的方法就是使用HTTPS，使用HTTPS后也会让人感觉网站更专业点，瞬间提升逼格。我们这里选用第三方免费的证书来给自己的网站做HTTPS。推荐使用CloudFlare 和 Netlify 这两个平台都提供了免费SSL证书，两者使用同样简单，但是 Netlify 创建成功后会关联到你的github中XXXX.github.io的项目，以后每次 GitHub 的 push 操作都会自动触发 Netlify 重新编译部署，而且还会生成一个xxx.netlify.com的二级域名，同样也支持HTTPS。

CloudFlare 配置：

1、Add a website 填写域名如：xxx.com，检测DNS记录值
2、根据提示设置CloudFlare站点IP解析（等待10分钟左右）
3、选择CloudFlare免费加速Free Website方案

Netlify 配置：

1、登陆Netlify入XXXX.github.io项目
2、设置Name和Domain
3、根据提示设置CloudFlare站点IP解析（等待10分钟左右）
4、在官网菜单中选择HTTPS点击Let’s Encrypt开启HTTPS

解决多说功能失效

在配置完HTTPS后发现多说的评论和分享功能失效，然后使用浏览器的审查，发现是由于多说资源网址并不支持HTTPS导致，强制使用https://static.duoshuo.com/embed.js无法获取embed.js文件，那么问题就找到了，解决办法如下：

1、在浏览器中输入http://static.duoshuo.com/embed.js，然后command+s选择页面源码点击储存
2、将储存的embed.js文件，放到~/hexo/themes/next/source/js/的目录下
3、打开~/hexo/themes/next/layout/_scripts/third-party/comments/目录下的duoshuo.swig,将ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';替换为ds.src = '/js/embed.js';

附加Hexo常用命令

总结

hexo搭建博客并不是这么简单，也是美美的折腾了一波搭建成功的，让我先去哭会。