DEV Community

Cover image for Gitlab (hosting&commands)
vishwa v
vishwa v

Posted on

Gitlab (hosting&commands)

#cicd #git #tutorial #webdev

Hosting with GitLab Pages is simple. First, you add a .gitlab-ci.yml file to tell GitLab how to publish your site. Then, push your HTML, CSS, and JS files to the repository. GitLab automatically builds and deploys your site, giving you a live URL. With this, you can host portfolios, blogs, or documentation without needing extra servers.

Steps for hosting
Step 1: Enable GitLab Pages
Open your project in GitLab.

Go to Settings → Pages.

This is where your site will be published once configured.

Step 2: Create a .gitlab-ci.yml File
In your project root folder, create a file named .gitlab-ci.yml.
Add this content:

pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r * .public
  artifacts:
    paths:
      - .public
  only:
    - master
Enter fullscreen mode Exit fullscreen mode

This tells GitLab CI/CD to build and publish your site.

Step 3: Add Your Website Files
Make sure your project has an index.html file (this will be your homepage).

Add CSS, JS, and images as needed.

Commit and push everything to the master/main branch.

Step 4: GitLab Builds Your Site
After pushing, GitLab will run the pipeline.

Once complete, go to Settings → Pages.

You’ll see a live URL like:

https://username.gitlab.io/project-name
Enter fullscreen mode Exit fullscreen mode

Step 5: Share Your Website
Copy the link and share it.

Your project is now hosted online with GitLab Pages

Gitlab common commands

git add
Use git add to files to the staging area.

git add <file_path>
Enter fullscreen mode Exit fullscreen mode

You can recursively stage changes from the current working directory with git add ., or stage all changes in the Git repository with git add --all.

git clone
Use git clone to copy an existing Git repository.

git clone <repository>
Enter fullscreen mode Exit fullscreen mode

git commit
Use git commit to commits staged changes to the repository.

git commit -m "<commit_message>"
Enter fullscreen mode Exit fullscreen mode

If the commit message contains a blank line, the first line becomes the commit subject while the remainder becomes the commit body. Use the subject to briefly summarize a change, and the commit body to provide additional details.

git init
Use git init to initialize a directory so Git tracks it as a repository.

git init
Enter fullscreen mode Exit fullscreen mode

A .git file with configuration and log files is added to the directory. You shouldn’t edit the .git file directly.

The default branch is set to main. You can change the name of the default branch with git branch -m <branch_name>, or initialize with git init -b <branch_name>.

git pull
Use git pull to get all the changes made by users after the last time you cloned or pulled the project.

git pull <optional_remote> <branch_name>
Enter fullscreen mode Exit fullscreen mode

git push
Use git push to update remote refs.

git push
Enter fullscreen mode Exit fullscreen mode

git log
Use git log to display a list of commits in chronological order.

git log
Enter fullscreen mode Exit fullscreen mode

git status
Use git status to show the status of the working directory and staged files.

git status
Enter fullscreen mode Exit fullscreen mode

When you add, change, or delete files, Git can show you the changes.

git reset
Use git reset to undo a commit and rewind the commit history and continue on from an earlier commit.

git reset
Enter fullscreen mode Exit fullscreen mode

Top comments (0)