Preface
This article is intended for beginner.
Goal: Making Github/ Gitlab Pages Step By Step
Create Account
Where ?
You can create git repository using
Practice
Now you can make repository, with any name:
Note that, this is just an example, you should use your username account. and you should use your own repository.
Clone
After make a repository, clone your own repository to your directory.
$ git clone https://github.com/epsi-rns/anycode
$ cd anycode
Now you should continue to basic git.
Basic Git
New to git ? Read this first:
That article above will guide you common git task such as:
Check First
$ git status
Add and Check Status
$ git add --all
$ git status
Commit with Message
$ git commit -m "Site: First Commit"
Push
$ git push -u origin master
More recent github using main
instead of master
.
$ git push -u origin main
Create Github Page: Plain HTML
I start with github, because it is easier, for beginner. Later we are going to use gitlab, that is more flexible.
Reading
Create Repository
You should repository name, that match your name, for example:
Clone your own repository on terminal.
$ git clone https://github.com/epsi-rns/epsi-rns.gitlab.io
$ cd epsi-rns.gitlab.io
In github, do not use uppercase. And do not rename repository. If you make mistakes in repository naming, you’d better create the repository from scratch.
Create index.html.
Then make a simple index.html containing simple message, such as “hello world”.
$ echo "<p>Hello, World</p>" > index.html
Do not forget to add, commit and push to master.
Here is an example of the source of my project page on github.
Check Setting.
If it said ready to be published, then something is missing.
You should choose branch, such as master, as your source.
Open in Browser.
Here is an example of the output my project page.
Create Gitlab Page: Plain HTML
While github only support Jekyll, gitlab support many SSG, including plain text.
This means gitlab require more setup using .gitlab-ci.yml.
Reading
Create Repository
You should repository name, that match your name, for esample
Clone your own repository on terminal.
$ git clone https://github.com/epsi-rns/epsi-rns.gitlab.io
$ cd epsi-rns.gitlab.io
Create public directories
Gitlab plain html use public directories. You should make this directories first.
$ mkdir public
$ cd public
Create index.html.
Create a simple index.html containing simple message, such as “hello world”.
$ echo "<p>Hello, World</p>" > index.html
Create .gitlab-ci.yml
Plain html setting for .gitlab-ci.yml is as simply as below:
image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
Now it is a good time add, commit and push to master.
You should see Jobs menu in CI/CD in gitlab site.
Gitlabs Runner
you should see the Jobs CI, something similar as below:
Running with gitlab-runner 11.2.0-rc2 (1644837a)
on docker-auto-scale fa6cab46
Using Docker executor with image alpine:latest ...
Pulling docker image alpine:latest ...
Using docker image sha256:11cd0b38bc3ceb958ffb2f9bd70be3fb317ce7d255c8a4c3f4af30e298aa1aab for alpine:latest ...
Running on runner-fa6cab46-project-8124772-concurrent-0 via runner-fa6cab46-srm-1535465534-7eb4894d...
Cloning repository...
Cloning into '/builds/epsi-rns/site-plain'...
Checking out 42afacfb as master...
Skipping Git submodules setup
$ echo 'Nothing to do...'
Nothing to do...
Uploading artifacts...
public: found 5 matching files
Uploading artifacts to coordinator... ok id=92747504 responseStatus=201 Created token=S98g_FHG
Job succeeded
Open in Browser.
Here is an example of the output of my project page on gitlab.
Your site, might have different looks.
5: Gitlab Page: Deploy Hugo
As has been said before, gitlab support some SSG, including Hugo.
Reading
.gitlab-ci.yml for Project Pages
Project Pages, can be set to use their own URL.
Supposed you have this code>config.toml.
baseURL = "http://epsi-rns.gitlab.io/"
Your development server will open url at http://localhost:1313.
If you want to use project pages such as code>/demo-hugo, you can set it in .gitlab-ci.yml as below:
image: registry.gitlab.com/pages/hugo:latest
variables:
GIT_SUBMODULE_STRATEGY: recursive
pages:
script:
- hugo --baseURL="https://epsi-rns.gitlab.io/demo-hugo/"
artifacts:
paths:
- public
only:
- master
After add, commit and push to master. You should see Jobs menu in CI/CD in gitlab site.
And you can also see the result:
Conclusion
This is our last article in our Hugo tutorial. There is no next article. Now it is your turn to explore your creativity.
Have fun with coding.