GitLab 静态博客搭建

技术文章请注意时效!原理才是根本。

它是如何实现的

gitlab、github 创建自己的 repository,这个 repository 有自己特殊的名字 username.gitlab.io,gitlab、github 会自动识别,当访问这个 username.gitlab.io 这个路径的时候,gitlab、github 返回这个 repository 中的对应网页。

手动写 html 太费事,就有了静态网页生成器 SSG(Static Site Generator ),比如 Jekyll、hexo、hugo 等,更多查看 https://www.staticgen.com 。 用户只管写内容,这些生成器自动生成静态网页,和 wordpress 后台编辑器作用差不多,只是 wordpress 动态生成静态网页。

所以,静态博客的缺点就是没有后端服务,不能处理用户动态请求,所有的动态部分都是集成的第三方服务。

搭建环境

本人用的是 windows。

搭建 node.js

node.js 是一个 javascript 执行引擎而已。原来 javascript 只能运行在浏览器,有了 node.js 就能运行在任何地方了。

window 直接下载 Long Term Support (LTS) 版本安装就好了。

安装 npm

Node Package Manager,Node 应用程序依赖包的管理工具,可以解决依赖关系。

最新的 node.js 已经集成了 npm。

npm 使用

安装 hexo

hexo 初始操作

初始化

创建 xxx.github.io 文件夹,进入文件夹

试验

发布到 github

创建 repository,格式必须为 yourname.github.io

npm install hexo-deployer-git --save #安装deployer-git

修改项目目录下的_config.yml 文件(网站配置文件),hexo 的配置文件中任何’:’后面都是带一个空格的

hexo d #部署网站到github,访问https://xxx.github.io

hexo next 主题配置

克隆主题到本地

更新主题

启用主题

修改你的博客根目录下的 config.yml 配置文件(网站配置文件)中的 theme 属性,将其设置为 next。

选择 Scheme(网页布局)

博客根目录下 \themes\next\config.yml(主题配置文件)中,修改 scheme: Gemini

配置博客信息

修改网站配置文件

配置菜单

修改主题配置文件

添加菜单页面

修改 \source\tags\index.md

hexo new page categories #添加「分类」页面
修改 \source\categories\index.md

设置头像

放置在主题的 source/images/ 目录下
修改主题配置文件:avatar: /images/maple-leaf-avatar.jpg

RSS 订阅链接

npm install hexo-generator-feed --save #安装插件

插件链接:https://github.com/hexojs/hexo-generator-feed
修改网站配置文件

参数说明:

侧边栏社交链接

修改主题配置文件

腾讯公益 404 页面

新建 404.html 页面,放到主题的 source 目录下,内容如下:

站点建立时间

修改主题配置文件

since: 2017

设置背景动画

修改主题配置文件

canvas_nest: true

DISQUS 评论

disqus 网站建立免费的评论,在设置中记录 shortname。

修改主题配置文件

npm install hexo-generator-searchdb --save #安装插件
修改网站配置文件,新增以下内容到任意位置:

修改主题配置文件,启用本地搜索功能:

设置预览摘要

首页显示文章的预览摘要,修改主题配置文件

显示每篇文章字数

npm install hexo-wordcount --save #安装插件
修改主题配置文件

文章版权

修改主题配置文件

网站 favicon

修改主题配置文件

Google 分析

google_analytics:https://analytics.google.com/analytics/web/ 添加网站,得到以 UA- 开头的 Google 跟踪 ID。

修改主题配置文件

google_analytics: UA-xxx

提交谷歌收录

npm install hexo-generator-sitemap --save #安装站长地图插件

修改网站配置文件,URL 修改为自己的域名

url: https://xxx.gitlab.io/

谷歌验证自己拥有网站

设置 Google 分析后验证过,就不用再验证了,当然再验证也不会有什么错误。

谷歌网站站长:https://www.google.com/intl/zh-CN/webmasters/#?modal_active=none
下载验证文件:https://search.google.com/search-console/welcome

配置好后,下载 html 文件,放到网站根目录即可。

谷歌提示:为了保持已完成验证的状态,请不要移除该文件(即使是在成功通过验证后)。

为了使得 hexo 生成 html 时候,不对这个 html 文件处理,通过在谷歌验证文件 html 的最开始加上

并把这个文件放到根目录 /source 文件夹下面。这样 hexo g 命令就会返回正确的 html。
通过验证后,在谷歌 search console 中提交站地图,这样谷歌就会定期抓取网站链接。

文章加密

npm install hexo-encrypt --save #安装加密插件

插件链接:https://github.com/edolphin-ydf/hexo-encrypt

插件 features:

  • encrypt one post content with AES
  • use qiniu private space as you img repository(if you want use this feature, you should get an qiniu account first, search google for help)
  • encode a local img into base64 type, then inline it in html

修改网站配置文件

参数说明

单独文章密码,文章开头加入

配置 robots.txt

npm install hexo-generator-robotstxt --save #安装插件

修改网站配置文件

Disallow: /admin/ 的作用:加密的文章避免谷歌爬取。需要把文章的 category 设置为 admin。

永久链接(Permalinks)

修改网站配置文件
permalink: :category/:title/

返回顶部的箭头显示百分数

修改主题配置文件

scrollpercent: true

hexo 发布文章

hexo 文档:https://hexo.io/zh-cn/docs/index.html

新建 post

假设我们的文章名为 “hello world”,在命令行键入以下命令即可:
hexo new “hello world”
上述命令的结果是在 ./hexo/source/_posts 路径下新建了一个 hello world.md 文件。
然后,打开 markdown 编辑器写作。
由于 hexo 不能分文件夹,所以文件名可以使用 categorie-title 命名。

引用资源

使用相对路径引用资源:修改网站配置文件,post_asset_folder: true
上面的操作会开启 Hexo 的文章资源文件管理功能。Hexo 将会在我们每一次通过 hexo new

通过这种方式,图片将会同时出现在文章和主页以及归档页中。
设置图片位置需要 html,单纯的 markdown 就不适合了。

文章摘要

next 会自动生成文章摘要。也可以自己设置。
设置文章摘要

文章标签插件(Tag Plugins)

查看更多:https://hexo.io/zh-cn/docs/tag-plugins

日常命令

gulp 自动化

发布网站后,查看 hexo 产生的源码,发现 html 并没有压缩。

这是可以利用 gulp 压缩 html、js、css 和图片。gulp 是一个前端的工作流工具,读一下文档就能上手了。感觉自从有了 node.js,前端就把后端的很多工具和思想都借鉴去了。

安装 gulp 和 gulp 插件

创建 gulp 脚本

在根目录下建立 gulpfile.js

运行 gulp default 任务

gulp

gitlab 静态博客搭建

上述都是在 github 上建立静态博客的步骤,gitlab 上建立静态博客有什么不同?

参考 GitLab Pages:https://docs.gitlab.com/ee/user/project/pages

gitlab 的特性

项目网站,用户和用户组网站

Project Websites
You created a project called blog under your username john, therefore your project URL is https://gitlab.com/john/blog/. Once you enable GitLab Pages for this project, and build your site, it will be available under https://john.gitlab.io/blog/.
You created a group for all your websites called websites, and a project within this group is called blog. Your project URL is https://gitlab.com/websites/blog/. Once you enable GitLab Pages for this project, the site will live under https://websites.gitlab.io/blog/.
User and Group Websites
Under your username, john, you created a project called john.gitlab.io. Your project URL will be https://gitlab.com/john/john.gitlab.io. Once you enable GitLab Pages for your project, your website will be published under https://john.gitlab.io.
Under your group websites, you created a project called websites.gitlab.io. your project’s URL will be https://gitlab.com/websites/websites.gitlab.io. Once you enable GitLab Pages for your project, your website will be published under https://websites.gitlab.io.

Enable shared Runners,运行 CI/DI

You can take advantage of the free shared Runners available on GitLab.com. All your builds will run on distinct Virtual Machines which use the latest Docker Engine. This will effectively eliminate any possible security issues, as there is no potential of breaking outside the container. However, you are free to set up your own Runner for your project.

To deploy your site, GitLab will use its built-in tool called GitLab CI/CD, that will build your site and publish it to the GitLab Pages server. The sequence of scripts that GitLab CI/CD runs to accomplish this task is created from a file named .gitlab-ci.yml, which you can create and modify at will.

可以创建私有仓库

gitlab 总是把 public 文件夹发布。这样就可以上传完整的 hexo 源码,而不是像 github 一样必须创建公开仓库。
These projects can be either public, internal, or private, at your own choice. GitLab will always deploy your website from a very specific folder called public in your repository.

自定义域名和 SSL/TLS

自己查阅文档吧

操作步骤

创建私有仓库 xxx.gitlab.io
删除网站根目录 \themes\next 主题中的.git 文件夹
修改网站配置文件中 deploy 信息,用不到了

验证项目根目录.gitignore

网站根目录创建.gitlab-ci.yml

推送项目修改到 gitlab

gitlab 自动运行.gitlab-ci.yml 中定义的任务,并且把生成的 artifacts 部署。

gitlab pages 设置

到项目的设置 > Pages 中查看设置

github 页面自动跳转到 gitlab

修改 \themes\next\layout\_layout.swig,在 head 标签里添加:

参考文档

hexo 文档:https://hexo.io/zh-cn/docs/index.html
GitLab Pages:https://docs.gitlab.com/ee/user/project/pages
Static sites and GitLab Pages domains:https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html

发表评论

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