第一篇博客当然是用来记录搭建博客的过程辣:smile:
我们采用GitHub Pages
+Hexo
+Typora
来完成整个博客的搭建、运行和创作
整个过程需要以下一些软件、插件或者网站的支持
GitHub Pages
提供静态博客的远程服务器Node.js
提供Hexo
运行环境和更多功能的插件扩展Git
提供Hexo
提交文件并部署到GitHub Pages
功能Hexo
提供博客网页文件的生成和预览BNXB
提供第三方DNS
解析服务商接入Cloudflare
的CDN
接口Typora
提供优秀的markdown
写作环境
全程免费稳定,自定义程度极高 (只要你JavaScript写的够溜)
最终生成的博客网址是 你的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
的形式
然后用Git
或者GitHub Desktop
把仓库clone到本地的一个你习惯的路径,这里就是你以后存储博文的地方
在此路径建站,命令行输入
1 | hexo init |
然后将__config
中的配置更改为相应的配置
最重要的是后面的deploy
配置,一定要改为git
和你GitHub Pages仓库ssh
具体配置的更改参见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: