GithubPages+Hexo搭建静态博客
第一篇博客当然是用来记录搭建博客的过程辣:smile:
我们采用GitHub Pages+Hexo+Typora来完成整个博客的搭建、运行和创作
整个过程需要以下一些软件、插件或者网站的支持
GitHub Pages提供静态博客的远程服务器Node.js提供Hexo运行环境和更多功能的插件扩展Git提供Hexo提交文件并部署到GitHub Pages功能Hexo提供博客网页文件的生成和预览BNXB提供第三方DNS解析服务商接入Cloudflare的CDN接口Typora提供优秀的markdown写作环境
全程免费稳定，自定义程度极高
最终生成的博客网址是 你的GitHub用户名.github.io
当然也支持绑定自己购买的付费域名
安装Node.js
安装Node.js环境并在Path中添加环境变量
具体教程见链接
安装完毕后在命令行中检查版本，输入
1 | npm -v |
出现版本号证明安装成功
安装Git并配置SSH key
安装Git并在Path中添加环境变量
然后需要配置电脑本机的SSH key到你的GitHub账号
具体教程见链接
安装Hexo
在命令行中输入
1 | npm install hexo-cli -g |
安装完毕后在命令行中检查版本，输入
1 | hexo -v |
出现版本号证明安装成功
接下来安装hexo-deployer-git插件
在命令行输入以下命令
1 | npm install hexo-deployer-git --save |
建站
在GitHub上new一个名为yourusername.github.io的repository
记得一定一定要命名为你的GitHub用户名.github.io的形式
然后在本地的一个你习惯的路径建立一个文件夹，这里就是你以后存储博文的地方，命令行输入
1 | hexo init |
然后将__config中的配置更改为相应的配置
最重要的是后面的deploy配置，一定要改为git和你GitHub Pages仓库ssh
每次写完博客，我们都会用hexo将这个文件夹里的项目组织生成一套网页文件，并由hexo用git提交到上面的仓库里
具体配置的更改参见HexoDocs
选择主题
Hexo的默认主题是landscape，当然非常难看了
你可以在HexoThemes选择一个喜欢的主题
进入作者的GitHub repository然后把主题clone下来
然后放入博客文件夹中的themes中
通过更改相应主题文件夹下的__config中相应的配置可以有更多的玩法
我使用的主题是Butterfly
里面集成了一些例如Gitalk等其他一些Hexo插件，并且主题配色很舒服，功能比较多
原作者也提供了很齐全的个性化配置选项
我们也可以增加一些自己喜欢的功能插件
作者在Butterfly Document中详细介绍了主题的安装办法
在你一步一步更改了所有的主题配置后就可以生成网页预览并部署到远程了
将你的所有文件和配置生成网页
1 | hexo g |
预览网页
1 | hexo s |
部署到GitHub
1 | hexo deploy |
绑定域名
这一步是可选操作
最终的博客网址是 你的GitHub用户名.github.io
我们如果有自己的域名的话可以选择绑定自己的域名
我的域名letian.website是在腾讯云购买的，并且我觉得它用于搭建个人网站或者个人邮箱非常的合适，价格也很实惠
根本买不起.com和.cn这种超级贵的域名
在腾讯云查询域名注册并经过漫长的精挑细选再下单支付，最后实名认证后就可以进行绑定了
首先在博客文件夹根目录的sourse中增加一个无后缀的名为CNAME的文件，并用notepad++或vscode类的编辑器写入你的域名，例如letian.website
然后在你购买域名的相应的域名管理网页增加两条域名解析
@ CNAME 线路默认 GitHubPages仓库名 其余默认
www CNAME 线路默认 GitHubPages仓库名 其余默认
要过上10分钟才能成功访问，别急哦
如果还是显示不了或者乱跳转，八成是以前进入本域名的自动跳转缓存没有清除，在浏览器中选择清除最近一段时间的缓存再访问即可
日常写作
在命令行运行相应的HexoDocs中的命令即可生成相应文件
建议使用Typora搭配图床写作
最后记得部署到远程仓库即可
增加CDN
众所周知，GitHub的服务器由于一些奇怪的原因，国内访问速度非常的堪忧
所以我们可以采用CDN来完成访问加速
国内的CDN都要求域名备案
因此我们选用BNXB并通过国内的DNS解析服务商将域名解析到Cloudflare的CDN
首先到Cloudflare注册账号，绑定域名并选用免费套餐，验证邮件
然后到BNXB通过刚刚注册的账号登录，并选用CNAME方式接入，然后在BNXB的解析记录中添加
1 | @ CNAME 线路默认 GitHubPages仓库名 CDN开启 其余默认 |
1 | www CNAME 线路默认 GitHubPages仓库名 CDN开启 其余默认 |
然后将底下生成的域名DNS处CNAME记录对应的记录粘贴到购买域名网页的域名解析中，更改原有的直接解析
这样就完成了跳转解析
具体教程见链接
配置Gitalk
Diaspora主题内置Gitalk插件，可以通过登录GitHub账号在博客文章地下评论，并推送到GitHub的仓库issue中
首先在GitHub的Settings的最左下方Developer setting中New一个OAuth App
应用名可以随便起，但是Homepage URL一定要是你的GitHub用户名.github.io，描述可以随便写，但是Authorization callback URl一定得是你绑定的域名（如果没有绑定域名则和Homepage URL相同）
然后Register application
记下来生成的Client ID和Client Secret
并将它们按主题作者的README写入主题的__config
具体教程见链接
更换Hexo渲染引擎
Hexo内置的Markdown渲染引擎非常的弱，甚至不支持Emoji，因此我们采用hexo-renderer-markdown-it插件来替换原本的渲染引擎，这样就可以支持很多原本在Typora上支持的语法
具体教程见链接
更换主题默认音乐和图片
用Aplayer将网易云音乐的歌单或者歌曲直接按照文档中的格式写入Markdown文件，生成在网页上
图片直接添加进img文件夹，并替换入主题的__config，这里的图片的像素大小和图片格式最好与原本的默认图片相同
剩下其他的东西就可以自己探索啦:kissing_smiling_eyes:
