静态博客搭建方法

本文介绍如何在不搭建本地环境的条件下搭建静态博客的方法。按此方法搭建的静态博客,只需要通过浏览器上传或在线编写、修改md文档,即可实现博文的自动发布、更新。一次搭建,一劳永逸。全程不需要费用,当然你自己买的域名除外。

1.在Gitlab新建项目

新建时,选择从模板新建。以hexo为例,可以选择pages-hexo,也可以选择Netlify-hexo。前者里面会有一个.gitlab-ci.yml文件,后者没有。.gitlab-ci.yml文件会调用Gitlab的CI/CD进行在线自动编译,如果没有这个文件则不会自动编译。.gitlab-ci.yml文件也可以自己添加,在项目详情页面添加文件,选择.gitlab-ci.yml,再根据提示选择对应的博客系统,即可添加为对应的.gitlab-ci.yml内容,系统根据此来进行自动编译。

Gitlab自动编译后,会生成默认的二级目录的访问地址,我们可以自己绑定域名,上传SSL证书,绑定成功后即可用我们绑定的域名访问。我们也可以选择在Netlify内搭建,用它编译出来的博客访问速度比Gitlab pages快一些。Netlify免费用户每个月流量为100G,限制1个用户,对于我们来说是够用的。无论项目中是否有.gitlab-ci.yml这个文件,均不影响Netlify的编译和使用。

2.生产内容

创建页面、博文,文件头的格式可在相应博客程序的官网查看到,其他内容按书写规则写好,添加到Source文件夹内即可。各个静态博客程序的格式均一致,如Jekyll、Hexo、Hugo等。但动态BSP框架Bitcron完全兼容静态博客的文件头格式,如果你需要从静态博客迁移到Bitcron,或者从Bitcron迁移到静态博客,需要格外注意。

个人建议将图片放在项目中,在博文中插入图片使用相对路径,这样更换域名不影响图片调用。否则一旦更换图片存储的域名,需要逐个修改一大堆md文档,很痛苦。如果将图片放在项目中,可在source文件夹下创建images文件夹,在该文件夹内上传图片。

以后,直接在线上传、编写、修改内容即可。修改主题、博客设置,也可以在线进行。这个过程不需要本地搭建hexo环境,不需要命令行,非常简单,且不需要付费。真正的简单。

3.更换主题

这个目前没找到合适的办法。如果要更换主题,可以将项目克隆到自己的电脑上,将主题放进去,再上传到Gitlab。如果这样操作,需要在电脑系统内安装一个git软件。Linux、Mac用户可在软件中心安装,Windows用户可以点此下载安装包。例如克隆到本地后的文件夹名字为“myblog”,将主题放进去以后的上传方法如下:

cd myblog
git init
git remote add origin https://gitlab.com/username/projectname.git
git add .
git commit -m "更换主题"
git push -u origin master

注:上面的项目地址为你所创建的Gitlab项目地址,详细的可以在Gitlab项目管理页面看到。

4.导入Github

Gitlab官网在境内的访问速度不如Github快,因此也可以将项目克隆到Github。目前Github支持私有项目,但不支持在线编译,没关系,有Netlify呢。在Github,在右上角“+”里面找到“import repository”,输入Gitlab上面的项目地址。克隆过来后,连接到Netlify即可。

在Github创建目录的方法是:点击“新建文件”,在填写文件名那里,输入目录名+“/”+文件名即可。如果有多个子目录,则分别输入目录名即可,例如:2019/04/03/index.md。如果仅保留目录,不设置文件,可以将最后的文件名写成.gitkeep,例如:2019/04/03/.gitkeep。一旦子文件夹内的文件删除,路径中的空文件夹都会被删除。

当然,我还是推荐Gitlab,它有Web IDE功能,修改多个文件可以一次性提交,使用起来也很方便。

5.静态博客兼容性评价

不得不说,Hugo有个神坑。Hugo每个主题都有自己独立的配置,我说的“独立的配置”包括整个博客所有博文的固定链接,如果更换为某些主题,必须修改全站的固定链接,这就意味着搜索引擎需要重新索引,其他地方的引用永久失效。这些问题对于非程序员的我来说无法解决。

Jekyll、Hexo、Hugo能互相兼容文章和页面的几乎所有的格式,不过,有两个地方需要注意:

Hugo无法解析Jekyll和Hexo的date中的时间,是因为Jekyll和Hexo的博文中的date默认是没有标注时区的,如果想兼容Hugo,需要将date写成类似于“2019-04-06 12:33:00+0800”的格式;Hugo的:title与Jekyll和Hexo是不同的,如果将静态博客迁移到Hugo,但不想改变原来的链接格式,需要在md的文件头中添加slug参数,再将固定链接中的:title更换为:slug。我觉得,无论用哪个博客系统,写博文的时候还是都给添加上slug,并把date格式进行统一,免得以后真的要迁移时出现问题。页面格式按各博客程序的要求去设置即可。

但是,请不要试图兼容动态BSP平台Bitcron。它的某些文件头格式与静态博客是冲突的,这部分格式是无法互相迁移的,迁移后可能造成文章永久链接的改变,或者某些格式的错乱。

Hexo需要注意一个问题。如果需要配置某些地方,按官网的说法是,安装某些插件。这些插件有着一个版本号,在package.json中。在线编译时,我们不能操作npm命令,不能手动给在线程序安装插件。于是,我们需要去npmjs官网查询这些插件的版本号,模仿package.json中的格式写入package.json中,在线编译的程序便可以识别,编译出我们想要的东西。以后,可以在一个固定的时间(如一年后)查询一下Hexo和这些插件的最新版本号,写入package.json文件。

切记:请勿滥用!不要上传耗费资源的东西,上传的图片建议进行压缩,不仅可以提高加载速度,还可以避免过度耗费流量。博客上不要发表违反境内及Gitlab、Github、Netlify服务所在地有关法律法规和道德准则的内容!

24 条回复

郑永 2019年4月12日 回复

重要是免费的。

林海草原 2019年4月15日 回复

是的,不过不能滥用免费资源

七哥 2019年4月16日 回复

现在静态不静态貌似对seo这块应该没多大影响了吧

林海草原 2019年4月16日 回复

没多大影响。但如果你追求seo的最大效果,建议用wordpress,它的seo做的最好。

发表回复