上一篇文章 阿里云虚拟机下搭建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 init [folder] |
新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站 |
无 |
hexo new [layout] 'title' |
新建一篇文章。如果没有设置 layout 的话,默认使用 _config.ym l 中的default_layout 参数代替。如果标题包含空格的话,请使用引号括起来 |
hexo n 'title' |
hexo new page 'title' |
新建页面 | 无 |
hexo generate |
生成静态文件 | hexo g |
hexo publish 'title' |
发表草稿 | hexo p |
hexo server |
启动服务器。默认情况下,访问网址为: http://localhost:4000/ | hexo s |
hexo deploy |
部署网站 | hexo d |
hexo clean |
清除缓存文件 (db.json) 和已生成的静态文件 (public) | hexo c |
hexo deploy -generate |
生成静态页面并部署 | hexo d -g |
总结
hexo搭建博客并不是这么简单,也是美美的折腾了一波搭建成功的,让我先去哭会。