Application Note #2 - Host Blog on gitlab

Implementation of instructions found in the following links…

1. https://hexo.io/docs/gitlab-pages

Objectives

• Host a blog site on gitlab.
• The objective is to deploy the static website created in Application Note 1 to gitlab.
• Provide a summary of instructions and procedures in the form of bash scripts

Procedures

Step 1 : Create .gitlab-ci.yml in the root of the hexo static web site

• the .gitlab-ci.yml file is a script that tells the gitlab CI/CD system how to build and deploy the website on the server.
• • the script creates a linux/nodejs based docker image, installs hexo into it and then copies the web site files over to it. The web site is hosted on that docker image

    cd ~/static_web_sites/hexo/blog
    # The .gitlab-ci.yml configures the GitLab CI on how to build your page. Simply add the content below.
    cat << EOF > .gitlab-ci.yml
    image: node:10-alpine # use nodejs v10 LTS
    cache:
      paths:
        - node_modules/
    
    before_script:
      - npm install hexo-cli -g
      - npm install
    
    pages:
      script:
        - hexo generate
      artifacts:
        paths:
          - public
      only:
        - master
    
    EOF

    Step 5 - modify _config.yml to reflect correct URL and root.

• If you dont update this, when you open the blog it wont have any styling and the links will be broken
• the URL is found on your gitlab repo, in this case here https://gitlab.com/uu3/uu3.gitlab.io/pages

_config.yml==>

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://uu3.gitlab.io/
root: /

Step 6 : Push Your Website to GitLab

git add .
git commit -m "add .gitlab-ci.yml"
git push origin master

• check the pipeline for errors (note the URL of the gitlab page can be found on the gitlab repo page under Settings/Pages)
• NOTE** make sure the web page is visible to everyone:
  goto “Settings/General”/“Visibility, project features, permissions” on the gitlab project web page, and set “Pages” visibility to “Everyone”.

google-chrome-stable https://gitlab.com/uu3/uu3.gitlab.io/-/pipelines

Step 7 : Confirm the web site is hosted

• the link can be found here https://gitlab.com/uu3/uu3.gitlab.io/pages

google-chrome-stable https://uu3.gitlab.io/

• NOTE, by creating the project in the uu3 group we no longer get an invalid SSL/TLS digital certificate issue
  because it doesnt like “.” in the domain name of the project
  (See https://docs.gitlab.com/ee/user/project/pages/introduction.html#limitations)

back to Series…