该 Repository 用于个人静态博客的存储,由 Hexo 生成、 Github 托管。
以下简要介绍博客搭建的主要流程以及注意事项,详细搭建步骤可以参考如下文章(都是我自己一个一个字写的),点击上方图片直达【我的博客】
此部分自行参考上面的四篇文章。
- 安装
Node.js
、Git
、Hexo
; - 创建Github仓库,名称格式必须为
<username>.github.io
。 注意: 若想创建README.md
,不能在此处新建仓库的时候直接勾选「 Initialize this repository with a README 」,因为后续部署的时候会覆盖(删除)掉该文件。 - 初始化git:
git config --global user.name <username>
git config --global user.email <email>
# 可以用以下两条命令检查是否输入正确
git config user.name
git config user.email
- 配置SSH密钥:
ssh-keygen -t rsa -C <email>
,配置完成后可通过ssh -T git@github.com
检查是否成功。 - 博客初始化:
hexo init <blog_name>
cd <blog_name>
npm install
- 到这一步博客就已初具雏形,运行
hexo g && hexo s
预览,如果不报错且浏览器能访问 http://localhost:4000 则表示一切正常、喜大普奔。
当我们写了新的文章后,需要重新部署,就会用到以下命令,常用的一键三连hexo clean && hexo g && hexo d
。
注意: hexo d
部署之前需要先配置站点的部署信息。
hexo clean # 删除缓存和已生成的静态文件
hexo generate # 生成public静态文件,可简写为hexo g
hexo server # 本地预览,可简写为hexo s
hexo deploy # 部署到远程仓库,可简写为hexo d
hexo new [layout] "name" # 生成新的布局、页面、文章
hexo new "My-new-post" # 省略layout则为发布文章
Hexo配置文件有两个,一个是称之为 「站点配置文件」 的./_config.yml
,一个是称之为 「主题配置文件」 的./themes/pure/_config.yml
。
站点配置没有需要特别注意的地方,参考默认配置并结合《Hexo博客搭建(1)——建站及部署》、《Hexo博客搭建(2)——站点配置》以及 官方文档——配置 等即可。
主题配置主要修改 「主题配置文件」 即./themes/pure/_config.yml
,可根据默认配置按需修改,具体参考Hexo博客搭建(2)——主题配置。
此部分在「主题配置文件」中配置了Valine评论系统的全局设置,由于pure主题已集成了disqus
、youyan
、livere
、gitment
、gitalk
和valine
等多种评论系统,但其中有的已经失效,有的不够稳定,有的需要注册才能评论,因此综合比较下选择了Valine。
评论配置的细节见Hexo博客搭建(3)——优化评论系统。
评论系统需要先在「主题配置文件」中启用并做全局设置(见上),然后才能结合LeanCloud控制台设置使配置生效。
说明: ①推荐选择国际版,因为免费提供了一个二级域名,用于评论后台管理、设置自动唤醒;②官方文档可参考帮助信息和中文官方文档。
- 部署valine-admin。 首先创建应用、部署项目,然后设置域名白名单和 环境变量 ,配置完成后重新部署项目,最后将后台评论管理系统初始化即可。
- 防止服务器休眠。 此处的设置主要是为了解决LeanCloud流控问题制定服务器休眠策略,主要包括两个方面:①云引擎定时任务实现邮件漏发检查;②云服务器利用
crontab
实现自动唤醒从而防止实例休眠。 - [可选] 评论系统设置必填项。 此处需要修改源码,实现或解决
meta
必填字段 、 通过QQ邮箱获取头像 、 昵称长度 等问题。 - [可选] 添加身份标签。 此处需要修改源码,实现自定义
博主
、小伙伴
和访客
的标签。 - [可选] 美化评论区样式。 此处需要CSS样式文件
./themes/pure/source/css/style.css
,实现 评论框背景及隐藏 、 评论及回复添加边框 、 头像悬停旋转 等功能。
这部分内容主要对博客做最后的完善,所有的修修补补都可以在Hexo博客搭建(4)——常见问题中找到答案。 主要包括以下三个方面:
- ①问题修复
- ②功能优化
- ③页面魔改
- 【迁移同步】由于众所周知的原因,不论是Github网页/API还是jsdelivrCDN, 都经常会挂掉导致无法访问,因此在 Gitee-hwame 上导入了该项目 Gitee-hwame/blog 并且设置了自动同步,后续考虑使用 GiteePages
- 【图床修改】Gitee图床仓库不允许设置为「公开」,故未导入 Github图床hwame/pics ,后续会将 【博客图片及资源】迁移到博客目录下,且不再使用 jsdelivrCDN 加速Github静态资源
- 【提交部署】Github与Gitee配置的邮箱不一致,提交代码有可能出问题,采取如下两种措施:
- (1) Gitee自动同步 Github-hwame/hwame.github.io 仓库,部署时直接提交到GitHub即可
- (2) Gitee代码提交方式配置svn,自动同步若有延时,可直接通过svn提交
- 【资源加速】若后续使用 GiteePages 而停用 GithubPages,可能会导致图片加载慢的问题,后续再考虑【 图片压缩 】、【 魔改Fancy Box 】等优化方式进行 静态资源加速
由于Hexo渲染引擎的原因,README.md
将被解析为README.html
,将其放在./source/
目录下(与CNAME
一致)。同时修改 站点配置文件 ./_config.yml
:
# Directory
skip_render: README.md
项目使用 MIT 许可协议,文件添加方式基本与上文 添加README 相同,只需要将 LICENSE 文件放在 ./source/
目录下(与 CNAME
一致)即可,无需修改站点配置文件。