Exit slides and browse as normal page.

Building a Business Website with Gitlab Pages from A to Z

Overview

In this tutorial, we will build a website for an imaginary Toffee and Coffee shop, using Gitlab Pages, a free hosting service from Gitlab. By the end of the tutorial, you will have a general idea of the whole web publishing process, and how Go and Talk page builder fits in this process.

Important note about website hosting: at the time of writing this tutorial (26 Feb 2019), Gitlab allows certain type of business websites to be hosted with Gitlab Pages. Please make sure to review their terms of conditions if you intend to host your website there. If you expect high traffic to your website, it is probably a better idea to host your website with a commercial hosting provider.

Prerequisite

For the purpose of this tutorial, you will need the following

  • a computer with internet connection.
  • a Gitlab account. You can register a Gitlab account for free if you don’t have an account yet. Gitlab dashboard has many buttons and may take a little while to get used to. We will only use a very small subset of these buttons. The screenshots will help you to navigate through the dashboard.
  • some images you want to use on the website.
  • text and the story you want to tell.
  • go through the page builder overview to get the big picture.

operation in gitlab.com dashboard

Creating a Public Group on Gitlab.com

If this is your first time, look for the plus sign on the toolbar at the top of the screen, click on it, and then click on New Group to show the form.

The group name must be unique, but not necessarily a registered business name. This tutorial has already used the group name “toffee-and-coffee”. You will need to pick a different name.

A new group is private by default. you need to change it to a public group in order to create a public repository and fetch images without password.

Your group name is referred as [groupname] below. Please replace it with the actual name.

operation in gitlab.com dashboard

Forking a Repository on Gitlab.com

A repository is a folder with information of a project. Forking means copying the folder to your account.

gitlab.com dashboard

Renaming a Repository on Gitlab.com

  • look for the settings (cog) icon on the toolbar at the left side of the screen, and click it. you may need to scroll the toolbar to show the settings icon.
  • look for a section with the label “Advanced”, click on “Expand” button in the section to show more options.
  • rename this newly forked repository following the pattern [groupname].gitlab.io. Click on “Rename project” to save the new name.

gitlab.com dashboard

Run a Pipeline to Enable Gitlab Pages

  • in Gitlab dashboard, click on CI/CD (rocket) icon on the left toolbar to show more options
  • look for the button “Run Pipeline”, and click it.
  • look for the button “Create Pipeline”, and click it to create a new pipeline. The pipeline configuration file is already at the root of the repository. You can create a new pipeline without entering anything. The pipeline simply copies web pages to Gitlab’s web server.

Waiting for Website to be Ready

  • the pipeline will take a few seconds to run, however at the time of writing this tutorial, it takes about 10 minutes for the website to be set up initially (future updates won’t take that long). It is time to get some real coffee, relax, upload images, or plan your website on a piece of paper.
  • wait for at least 10 minutes, then check and verify you can visit the demo page by entering the address [groupname].gitlab.io.
  • if you can’t visit the page yet, try again after a little while.

gitlab.com dashboard

Uploading Images to Gitlab.com

  • Upload your images to the “images” folder of the repository you have forked and renamed, if the images are on your computer.
  • Your images will be available under the link [groupname].gitlab.io/images/[image-name].
  • Supported image suffix: jpg, jpeg, png, gif, webp, svg. You may give a meaningful name to the images in order to search by name later.
  • Big images are slow to upload and download. You may resize them before uploading, and save different sizes of the same image.
  • the image size can be included in the file name or folder name.
  • You can also link to your images online, or search for free images and link directly to custom resized images from unsplash.

Published Page and Editable Page

  • each sample page in a bundled theme is represented by two files under a folder (or at the root for home page)
    • index.html is published and read-only for the public. It has an edit link to navigate to the editable page
    • index.goandmake.html is editable in the browser. It loads Go and Talk page builder from goandmake.app, and has sample data on the page.
  • index.html is the default file to serve, and can be omitted from the navigation links.
    • /about/ is equivalent to /about/index.html
    • “about” is a folder in the repository

Editing Homepage

  • scroll to the bottom of the home page, and look for the edit link. It is under the copyright statement.
  • click the edit link to go to the editable home page.
  • a database by the name “gt” is automatically created in your browser when you visit the page index.goandmake.html for the first time.
  • your contents and settings are saved automatically to this database while you type.
  • before you publish the revised page online, your contents are in your browser, and only rendered on your computer.

Selecting Uploaded Logo

  • hover on the left edge of the screen to show the vertical toolbar, click on the globe icon to show site setting window.
  • click on the grid () icon at the top of the window to show extra tabs, and enter the full address of your new website under “Current” tab.
  • click on the grid () icon again to hide extra tabs.
  • go to tab “Website Repo”, and fill in the name of your gitlab group and repository. Make sure to select “gitlab” for field Hosting Provider.
  • click on the “Fetch List” button to refresh image list, then click on the dropdown icon to select your logo.
  • by default the images are fetched from the folder “images” and its subfolders.
  • if you can’t see the file list, verify that repo owner and name are properly filled in above.
  • if you can see the file name but can’t see images in the dropdown list, verify that your website address is properly filled in the “Current” tab of site setting.
  • it may take a little while for newly uploaded images to be available on the website.

Selecting Uploaded Image in Page Builder

  • images are available in some sections.
  • you can click the cog icon () on the horizontal toolbar to show the section option window, and select images in the following tabs: highlight image, background image, mobile background, base image, and mobile base.
  • images are rendered in layers on screen. The highlight image is closer to you, and the base image is away from you.
  • mobile background image and mobile base image are optional. These are useful when you want to use a different manually cropped photo when the page is displayed on mobile phones.
  • the image location is set in “Website Repo” tab of site settings. you can click on the Fetch List button to update image list after uploading images.
  • if you know the full address of the image, you can click on any image in edit mode, and paste the image url in the small popup window.

Editing Page

  • click around and make changes as you wish. Your changes are saved in the browser database automatically.
  • you may need to click on vertical toolbar icon on any section toolbar to hide global toolbar and make room for the editor buttons.
  • select different images. If you can’t find any image, check the site settings and make sure the names of your group and repository are correct.
  • edit menu links and sections. You can specify different source for the embed map and video by toggling on the app, and click on the cog icon () to open the options window. Go to Iframe tab and embed a new resource, for example a calendar.

At Top and Left

Hiding Toolbars During Preview or Editing

Global Toolbar

  • At the left side of the screen.
  • Manage global settings.
  • Apply to the current page, or all pages.
  • Hide all section tools.
  • Hide itself.

Section Toolbar

  • At the top of each section.
  • Manage current section.
  • Apply to current section.
  • Turn app on and off.
  • Toggle edit mode.
  • Toggle global toolbar.

Context Toolbar

  • Available in some sections.
  • Toggle button to switch toolbars.
  • Toggle on to edit.
  • Toggle off when done.
Hover or tap to show the toolbars.

Loading About Page

  • click on “about” page in the navigation menu to go to “About” page.
  • look for the edit link at the bottom of the page. It is below website copyright statement.
  • click the edit link to load Go and Talk page builder and default data for “About” page.

gitlab.com dashboard

Creating New Pages

  • each page is represented by a subfolder, and two files index.html and index.goandmake.html
  • in Gitlab dashboard, create a new folder under the repository
  • download index.html and index.goandmake.html from a similar page, and upload these two files to the new folder
  • make sure to commit changes under the default master branch. This will trigger a pipeline to make the new pages available on your website.
  • update the navigation menu or links, so that you can navigate to the new page for editing.

Exporting a Web Page for Hosting with Gitlab Pages

  • hover on the left edge of the screen to show the toolbar
  • click on file icon () to show the page setting options
  • click on the grid icon () to show extra tabs.
  • click on tab “Export Webpage”, and select “web” for Webpage Link Format.
  • copy the content of the web page, and paste it to the file index.html under the gitlab repository you have just created. You can click Edit button or Web IDE button in Gitlab dashboard to edit index.html file.
  • alternatively you may click on the download button at the bottom of the form, save the web page as index.html to your computer, then upload the file and replace the file in your gitlab repository.
  • make sure to save changes to the default master branch, so that the updates will trigger a pipeline to update the website.

Exporting About Page for Hosting with Gitlab Pages

  • hover on the left edge of the screen to show the toolbar
  • click on file icon () to show the page setting options
  • click on the grid icon () to show extra tabs.
  • click on tab “Export Webpage”, and select “web” for Webpage Link Format.
  • copy the content of the web page, and paste it to the file index.html under the “about” folder in the gitlab repository you have just created.
  • alternatively you may click on the download button at the bottom of the form, save the web page as index.html to your computer, then upload the file and replace the file in “about” folder.
  • make sure to save the changes under the default master branch. This will trigger the pipeline to update the website.

Visiting Your Website

  • Wait a few minutes and visit your website at [groupname].gitlab.io. Please replace [groupname] with the actual name of the group you have created.
  • You should be able to see the changes you have made to the home page. The changes may take up to a few minutes to populate to your website.
  • gitlab Pages support custom domain name and SSL encryption. If you have your own domain name, you may update the DNS record to point to the [groupname].gitlab.io address. For details please refer to gitlab Pages documentation.

Summary

Go and Talk page builder integrates with Github and Gitlab to for data storage and media library. When Go and Talk page builder is bundled with a theme, users can navigate to editable pages using the menu of their website. This is more intuitive and easier to follow.

The processes described in this tutorial can also be used to design and publish a theme.

When your website has grown in size, Go and Talk premium theme for Hugo ( a site generator) can batch process your data files and turn these files into web pages.

This tutorial gives a step to step guide to build and host your first website. You can add unique marketing pages one by one. You can save the homepage as a new page, add and remove sections as required, and create a new page quickly.

If you already have a hosting space and domain name, you can save the web pages to your hosting space.

Please visit other tutorials and find more information on the topic of interest.

Tutorials

About Go and Talk Page Builder

Go and Talk page builder is a lightweight web design tool running in the browser. It empowers designers and marketers to create presentable pages quickly without coding. It is optimized for running on mobile devices such as tablets. The generated web pages are responsive, lightweight and optimized for search engines.
Copyright Goandmake SEO Marketing 2019. All rights reserved.
Golden theme by GoandMake.app Powered by we.goandmake.app Edit