Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


Preface

This article is intended for beginner.

Goal: Making Github/ Gitlab Pages Step By Step

Table of Content

Here, I present a Hugo Tutorial, step by step, for beginners.

  • Preface: Table of Content

  • 1: Create Account

  • 2: Practice Basic Git

  • 3: Create Github Page: Plain HTML

  • 4: Create Gitlab Page: Plain HTML

  • 5: Gitlab Page: Deploy Hugo

  • Conclusion


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

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.

Github: Project Page Repository

Check Setting.

If it said ready to be published, then something is missing.

You should choose branch, such as master, as your source.

Github: Site Setting Master

Open in Browser.

Here is an example of the output my project page.

Github: Project Page in Browser


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.

Gitlab: Jobs Menu

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

Gitlab: Jobs CI Verbose

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.

Gitlab: Hugo Job List

And you can also see the result:

Gitlab: Hugo Job Docker CI


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.