This document discusses the author's experience migrating their blog from a traditional CMS to using Hugo and GitLab Pages for static site generation. Some key points: 1. The author was frustrated with the maintenance and security of their previous Drupal-based site and wanted a simpler blog. 2. They chose to use Hugo for static site generation and GitLab Pages for hosting due to existing GitLab use, lower maintenance, and free hosting. 3. The migration process took several months of copying over content and restructuring the site. The author has since added continuous integration pipelines for linting, testing, deploying, and performance monitoring. 4. Using GitLab Pages and Hugo for a static site

1. 1#GitLabCommit
Front Page of Hacker News with GitLab Pages

2. 2#GitLabCommit
We live in a Git centered world...
… everything is version controlled

3. 3#GitLabCommit
Software = Code
Infrastructure = Code
Documentation = Code
CI/CD = Code
Git
Blog = Code

4. 4#GitLabCommit
About me
● DevOps Consultant @ HeleCloud
● Docker Community Leader
● GitLab Hero
● Co-organiser of London GitLab
Meetup
● Owner of 16 guitars
● Started using GitLab in Jan 2016

5. 5#GitLabCommit
History of my site
● Used Drupal since 2009.
● Maybe 4-5 different iterations of
my site.
● Traditional CMS (PHP, MySql)
requires:
○ Administration
○ Maintenance
○ Learning

6. 6#GitLabCommit
Static Site Generators
● Easier to maintain
● No security issues
● Easier to configure
● I only need a blog!

7. 7#GitLabCommit
Why GitLab Pages?
1. I already use GitLab
a. I use GitHub too...
2. Less work
3. FREE

8. 8#GitLabCommit
The road to success...
… Is paved with failure

9. 9#GitLabCommit
Previously, I had unsuccesfully pitched
using GitLab Pages as replacement for
WordPress/Drupal/Adobe across approx
100-200 sites.
Failed because…

10. 10#GitLabCommit
Normal people don’t write markdown...
… I do.

11. 11#GitLabCommit
Why Hugo?
1. Fast
2. Uses Golang... all the cool kids use
that.
3. Fairly simple to use
4. Not something I already know,
learning opportunity
The world’s fastest
framework for
building websites

12. 12#GitLabCommit
Migrating to GitLab Pages...
...Takes a lot of Copy Pasta

13. 13#GitLabCommit
Migrating to GitLab
Pages
1. Found theme I liked
2. Made a custom theme in Hugo
3. Put it together in GitLab and turned on
GitLab Pages...
5. Spend 8 months copying/pasting content
and restructuring…
7. Spent 3 months building extra bits theme...
4. BOOM! Site done!
6. BOOM! Site done!
8. BOOM! Site done!

14. 14#GitLabCommit
How Can I Make it
Better?
1. Custom domain
(willhallonline.co.uk)
2. SSL Cert (Let's Encrypt - built in a
separate CI pipeline)
3. CI to improve it (Linting (Stylelint,
Javascript), Deployment,
Performance Testing, etc)
4. CloudFlare (CDN)

15. 15#GitLabCommit
The CD Process:
Lint
image: monachus/hugo
stages:
- lint
- test
- deploy
- performance
stylelint-lint:
image: willhallonline/stylelint:10-alpine
stage: lint
allow_failure: yes
script:
- stylelint ./static/css/tweaks.css
stylelint-fix:
image: willhallonline/stylelint:10-alpine
stage: lint
allow_failure: yes
script:
- set +e
- apk add --no-cache git
- stylelint --fix ./static/css/tweaks.css
- git status
- git -c user.name='Will Hall' -c
user.email='incoming+who-sites/willhallonline-
hugo@gitlab.com' commit -am "Coding Standards
Formatting"
- git diff origin/$CI_COMMIT_REF_NAME >
$CI_COMMIT_SHA.patch
when: manual
artifacts:
paths:
- $CI_COMMIT_SHA.patch
expire_in: 1 week

16. 16#GitLabCommit
The CD Process:
Test
image: monachus/hugo
stages:
- lint
- test
- deploy
- performance
test:
stage: test
script:
- hugo
except:
- master

17. 17#GitLabCommit
The CD Process:
Deploy
image: monachus/hugo
stages:
- lint
- test
- deploy
- performance
pages:
stage: deploy
script:
- hugo
artifacts:
paths:
- public
only:
- master

18. 18#GitLabCommit
The CD Process:
Performance
image: monachus/hugo
stages:
- lint
- test
- deploy
- performance
performance:
stage: performance
image: docker:git
variables:
URL: https://www.willhallonline.co.uk
services:
- docker:stable-dind
script:
- mkdir gitlab-exporter
- wget -O ./gitlab-exporter/index.js
https://gitlab.com/gitlab-org/gl-
performance/raw/master/index.js
- mkdir sitespeed-results
- docker run --shm-size=1g --rm -v
"$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:8.11.0 --
plugins.add ./gitlab-exporter --outputFolder sitespeed-
results $URL
- mv sitespeed-results/data/performance.json
performance.json
when: manual
artifacts:
paths:
- sitespeed-results/
reports:
performance: performance.json
only:
- master

19. 19#GitLabCommit
The Current Pipeline

20. 20#GitLabCommit
Post Some Things
Online...
1. Tell my mum
2. Twitter, LinkedIn, Hacker News
3. Do some more blog posts
4. Blog post about Web Browsers
5. Oh…

21. 21#GitLabCommit
The Hacker News effect...
… Don’t read the comments

22. 22#GitLabCommit
My Year
5,300 Users
7,000 Pageviews

23. 23#GitLabCommit
1 Week in April
3,000 users
3,460 pageviews

24. 24#GitLabCommit
April 18th-19th
Max 600 users per hour

25. 25#GitLabCommit
Costs
1. Private Git Hosting
2. Private CI tools
3. Static site hosting
4. SSL Certs (Let's Encrypt)
5. Global CDN (CloudFlare)
6. Domain name - £4.69 per year! I
lied
7. Scale to thousands of users.

26. 26#GitLabCommit
What have we learnt?
1. GitLab Pages simple to deploy static
sites
2. Costs non-existent
3. Hacker News is brilliant challenging

27. 27#GitLabCommit
In a Git-centered world, do we bear the
responsibility of saving the Internet?

28. 28#GitLabCommit
Image by https://pixabay.com/users/Rainer_Maiores-147114/
Image by https://pixabay.com/users/Free-Photos-242387/
Image by https://pixabay.com/users/hschmider-3108740/
Image by https://pixabay.com/users/acekreations-1659208/
Image by https://pixabay.com/users/jarmoluk-143740/
Image by https://pixabay.com/users/DariuszSankowski-1441456/
Image by https://pixabay.com/users/RyanMcGuire-123690/
Image by https://pixabay.com/users/cpastrick-35190/
Image by https://pixabay.com/users/StefanHoffmann-152440/
Credits