用Gitlab+Netlify+Forestry免费搭建自动部署带CMS的静态网站

通过Gitlab+Netlify+Forestry可以免费创建自动部署的带有CMS的个人博客静态网站,不需要太多的代码知识,有丰富的主题可选,而且还是 SEO 优化后的博客网站。自己动手搭建静态博客网站,只需要注册一个 Gitlab 的账号就行。

什么是 Gitlab

Gitlab 是一个开源的代码托管平台,跟 Github 一样属于程序员使用较多的一个产品。

有人可能会说了,我又不是程序员,我肯定不会用这个东西,而且我肯定也不会用啊!其实并不是这样的。使用它搭建一个静态网站其实很简单,并没有想象中的那么高深。

下面我会给大家详细介绍一下普通人如何在 Gitlab 上创建一个免费的博客网站。

Gitlab VS Github

对于很多人来说可能并一定知道 Gitlab,但是程序员肯定知道 Github,而且 Github 的知名度要比 Gitlab 高的多得多。Gitlab 是被谷歌收购了,github 是被微软收购的。那么我们为什么要选择 Gitlab 而不是 Github 呢?

首先,Github 和 Gitlab 其实都是可以的,只不过 Gitlab 提供了更多的静态网站搭建方案,提供了各种程序语言的静态网站版本,可以选择的空间更大。

其次,Gitlab 可以一直免费使用,只会在你需要使用高级功能的时候才需要付费。你可以在 Gitlab 上创建不限量的私人项目,没有任何限制。可以说,只要有程序员这个群体存在,它就不会倒闭,何况他还是 Google 旗下的。

怎么通过 Gitlab 创建网站

首先,你需要注册一个 Gitlab 的账号。

注册 gitlab 账号说明

注册完成后,进入到 gitlab 的后台。

创建新项目

点击右上角”New Project“创建一个新的项目

选择利用模板创建项目

选择“从 template 中导入“这个 tab,可以看到下面有很多 tempaltes 可以选择,我们滚动页面到最下方,选择 “Netlify/hugo”。

选择了模板之后,进入填写项目信息的页面。

输入项目信息,创建项目

给你这个项目起个名字,Project-slug 会在你输入 Project Name 的时候,自动生成一个。如果你觉得没啥问题的话,可以直接选择使用系统自动生成的。你也可以修改成任何你想要的名称。这个 Project-slug 是用在 url 中的。

点击“创建”,等一会就可以看到已经创建成功,并且导入了一些数据。你看到的页面可能长下面这样。同时你可以发现这个页面的 url 中就包含你刚刚填写的 Project-slug。

项目界面

看到这个页面,你可能会疑问:???这个界面,我能干什么?说好的博客网站呢?

接着往下看。

利用 Netlify 部署 Gitlab 网站

在 Gitlab 刚创建的项目页面的下面有一段英文说明:

In order to build this site with Netlify, simply log in or register at https://app.netlify.com/, then select “New site from Git” from the top right. Select GitLab, authenticate if needed, and then select this project from the list. Netlify will handle the rest.

也就是说你需要到 Netlify 这个网站注册一下,然后就能发布你刚刚创建的这个项目了。点开 Netlify 的注册页面(如下图),选择使用 Gitlab 进行登录,就可以一键完成注册登录了,下次登录的时候,也只需要选择使用 Gitlab 进行登录即可。

需要注意的是,你的 gitlab 必须也是登录中的状态。

Netlify 注册页面

登录之后,你就可以选择你刚刚创建的项目了

Netlify 创建站点

点击 “New site from Git”,会进入一个让你选择项目源的页面,如下:

从 Gitlab 进行创建站点

这一步,必须要选择 gitlab,只有选择了 gitlab,接下来才能选择到我们刚刚创建的那个 Project。点击 Gtilab 进入下一步,中间会弹出一个弹窗是它正在找 gitlab 进行授权,授权完成后会看到下面的内容:

gitlab 的项目列表

这里就可以看到我们前面刚刚创建的 gitlab 项目了。直接点击刚刚创建的这个项目,进入最后一步:

部署网站

进行网站部署,上面的内容可以都不用改,直接点“Deploy Site”进行网站部署。

稍等一会,就可以看到部署成功的界面了。

网站部署成功

到这里,我们前面创建的项目就已经正式的成为一个网站了。你可以通过部署成功后返回的 url 进行访问你的网站了。比如我这个刚刚创建的例子,这个网站的地址就是 https://wonderful-fermi-4a21ff.netlify.com。

像上面那个网站的域名肯定是不符合我们要求的,那么我们可以点击页面上的 “Domain Setting” 进行域名设置:

自定义域名设置

如果你觉得你不需要一个自己的域名的话,你可以自定义一个好一点的 netlify 的二级域名,比如:billgreatblog.netlify.com 这样。

个人建议还是使用自己的域名。如果你没有还没有注册过域名的话,你可以通过 GoDaddy 或者 Namecheap (推荐指数:⭐⭐⭐⭐⭐)或者国内的万网进行域名注册。

如果你已经有域名了的话,点击“Add custom domain” 添加上你自己的域名并添加解析即可。

添加了自定义域名后,还有一个小问题需要处理一下,你需要到 gitlab 中修改一下 config.toml 这个文件中的 baseUrl 后面的链接地址为你的新域名地址。

编辑 gitlab 项目配置文件

点击这个 config.toml 文件

编辑 config 文件

点击右上方的 Edit 按钮,进入编辑模式

添加新域名地址

填写你的新域名,点击下面的提交按钮,即可。

如何在网站上写博客

到这个地方为止,网站已经搭建好了,但是我该怎么给网站上添加内容呢?

第三个工具出场了 https://app.forestry.io,这个 Forestry 是干什么用的呢?其实这个 forestry 是一个开源的内容管理系统(CMS),他的功能类似于 WordPress 的后台,我们可以在这个系统中对我们的网站内容进行编辑更改。

打开这个系统的登录页面,仍然选择通过 gitlab 进行登录,登录成功之后,进入到系统后台,目前后台还没有任何网站,我们需要点击右上方的 “Add Site” 按钮进行添加网站操作。

在 Forestry 中添加网站

选择 “Hugo” 然后点击下一步,下一步还是选择 gitlab,因为我们网站的源代码就是我们前面在 gitlab 上创建的项目。

在 forestry 中添加 repo

这里选择 gitlab 之后,点击下一步也会弹出一个页面,用来进行 gitlab 授权的,授权结束后,我们既可以看到前面创建的那个项目了。

在 forestry 中添加 repo

选择我们刚刚创建的项目,继续下一步,就可以看到已经在导入中了。

刚进入 Forestry 后台,会引导你会完成一些设定。完成之后,在左侧的菜单中能看到 Page 和 Post 两个菜单,Page 就是自定义的页面,Post 就是我们发布博客的地方。

点开 Post,点击“新建 Post”,添加内容,点击“save”,即可保存到草稿箱,点击右上角的 Draft 开关设置为 Off,则会发布该博客。

注意,这个操作不会实时的在网站上看到效果,因为每在 Forestry 的保存操作都会有一次 Commit 到 Gitlab 上,然后由 Gitlab 触发 Netify 进行网站 Build。待 Netify build 成功之后,博客即发布成功。

这个后台的使用起来很简单,就不在这篇文章中继续深入讲解了,如果有问题的话,可以给我留言。

结论

其实市面上有很多免费的产品可以供我们免费使用,对于只是创建内容站来说,其实很多平台都可以的。而且这些其实都是次要的,最重要的还是内容本身!

如果你想自建站,但是你前期并不想花钱买主机安装 WordPress 的话,你可以选择使用这种方式进行网站搭建。

发表评论

电子邮件地址不会被公开。 必填项已用*标注