GitLab Pages is a static website hosting service.
Hexo is a blog framework that generates static website.
This tutorial explains how to install Hexo, create basic static website and host it on GitLab Pages.
Install prerequisites
Register on GitLab.
Install Git version control system.
Install Node JS. I prefer installation through NVM (Node Version Manager)
Install Hexo Cli
Run this command to install hexo-cli npm package globally
1 | npm install -g hexo-cli |
Create Website with Hexo
Initialize new Hexo project
1 | hexo init <project_name> |
Go to new folder and install dependencies
1 | npm install |
Add pages and posts
Command to create new post
1 | hexo new post "post title" |
Command to create new page
1 | hexo new page "page_name" |
Run Hexo server to preview your website and posts
1 | hexo server |
For more information see Hexo documentation. Also you can use help command instead documentation. Sometimes it could be much faster. Just run hexo help
to see all available commands.
Create new GitLab repository
Create new repository on GitLab website. Then initialize new repository in project folder
1 | git init |
Add your created remote GitLab repository to your local repository
1 | git remote add origin <your_repository_link> |
Add GitLab Deployment Configuration
Hexo is static website generator. But it doesn’t store generated html files in Git repository. You can generate static files automatically every time you send updates to remote repository with GitLab Continuous Delivery (CD) tool.
Add new file .gitlab-ci.yml
to your project with this content
1 | image: node:12 |
Config explanations:image
- specify Docker image. Here used official Node JS Docker imagecache:path:
- specify folder to cache between jobsbefore_script
- run this script before jobspages
- actual jobpages:script
- actual script to run. Here we generate static pages with Hexo.artifacts:paths
- this folder will be available in GitLab UI after the job finishesonly
- conditions to run jobs, i.e. run this job only on master branch
Reference:
Actual Hexo config
Actual GitLab yaml reference
Commit your project
To save state of you blog, run command
1 | git add --all |
Create Page on GitLab
Go to your GitLab repository and open Settings - Pages
. Then create New Domain
for this repository.
If you have your custom domain, add TXT record in domain admin panel to verify it and A record to map your domain to GitLab Pages. You can get GitLab Pages IP here.
Then go to Settings -> CI / CD -> Shared Runners
and click Expand
in Runners. Enable Shared Runners if it disabled.
Make your page available: go to Settings - General
, click to Visibility, project features, permissions
and change configuration for Pages to Everyone
Upload your website to GitLab
Push your local changes to remote repository with command
1 | git push -u origin master |
After push GitLab CD automatically generate static files and update your website.
You can see running job in project Settings - Pipelines
or Jobs
.