持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情
前一篇文章分析了如果搭建一个适合自己的博客系统,其中有一种免费且可定制化程度高的方案是使用Github Page部署博客。本文将详细讲解如何使用Github Pages平台搭建一个个人技术博客。
启动你的Github Pages项目
首先当然需要先注册一个Github账号,为了演示操作我这次特定重新注册了一个新号。登录后需要新建一个仓库(repository),其中,仓库名称必须是“用户名.github.io”。我的用户名叫wrsnrtt,因此需要创建一个名为wrsnrtt.github.io的公开仓库,如图:
之后使用Git客户端向该仓库中上传一个index.html文件,文件里可以随便填文字,只是为了测试效果,像我这次演示就只是写了
<h1>hello</h1>
上传成功后,直接访问https://用户名.github.io 这个网址,像我的就是wrsnrtt.github.io 会看到神奇的一幕发生了,刚刚上传的HTML文件已经被渲染成Web页面显示在了浏览器中。
至此,说明Github Pages已经可以顺利提供网页服务器的功能了。当然一个完整的博客不可能只有一个简单的HTML页面。如果是大佬,你也可以自己手写HTML来写出一个博客网站,但是对于只是想建站,不想钻研前端技术的朋友来说,我们有更简单的选择,那就是Hexo。
Hexo的用法
可以看到在Hexo的官网首页有如下脚本语句:
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
不过这些语句的功能只是在本地运行Hexo,如果想要部署到Github Pages,还需要做进一步的配置。而且如果是纯小白,根本也不知道这些语句怎么运行。因为Hexo是一个NodeJS项目,因此要运行它首先需要去NodeJS官网安装NodeJS。npm是NodeJS自带的包管理工具,安装完NodeJS之后就可以直接在命令行中运行上述脚本语句。如果需要将Hexo部署到Github Pages上,官网里有对应的教程:将 Hexo 部署到 GitHub Pages | Hexo。
关于Hexo的一些具体用法,包括新建文章、草稿,同样在Hexo的官网上有对应的文档,在此文中就不再赘述。
集成Gitalk实现评论
需要注意的是,因为Hexo是个纯前端的项目,不能连接数据库,因此也就没有办法保存评论。但有一种曲线救国的方案可以使得纯前端项目也能支持评论功能,那就是Gitalk。它本质上是把评论保存到Github仓库的issues中,在每次加载网页时向Github发起Http请求获取到issues中的数据来填充到页面的评论区域。关于如何集成Gitalk到Hexo的方法我找到了如下教程:Hexo博客下集成Gitalk评论 | Pang-YUM's Neverland (zongpenglin.github.io)
但我个人觉得Hexo的用法还是稍显繁琐,由于它是一个纯前端的项目,不能连接数据库,因此缺少可视化的后台管理界面(但说实话我觉得技术上应该是可以实现的),每次新写一篇文章还要用命令行创建,因此我在部署成功一次之后就因为觉得用起来太满分而再也没有用过Hexo。下一篇文章我将会讲述使用云服务器搭建一个具有后台管理系统,能连接数据库,可以直接在浏览器端写作的完整博客系统。