Exit slides and browse as normal page.

Building A Marketing Website with Github Pages from a to z

Overview

In this tutorial, we will build a marketing website for an imaginary not-for-profit golf club Hilly Golf using Github Pages, a free hosting service from Github. 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.

Some steps in this tutorial are similar to building a website with Gitlab Pages. Some steps are deliberately different to show how to load data from remote backup.

A not-for-profit organization needs marketing itself to potential members too. It differentiates itself from other clubs and communicates the benefits to members by joining this club.

Important note about website hosting: at the time of writing this tutorial (26 Feb 2019), Github allows certain type of non-commercial websites to be hosted with Github Pages. Please make sure to review their terms of conditions and usage limits 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.

Preparation

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

  • a computer with internet connection.
  • a free Github account. This is optional if you already have a web hosting account and your domain name. You will need a Github account to use media library.
  • 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.

In github.com dashboard

Creating an Organization on Github.com

  • create a new organization in your Github account. The organization name must be unique, but not necessarily a registered business name. This tutorial uses the organization name “hilly-golf”. You will need to pick a different name.
  • your organization name is referred as [orgname] below. Please replace it with the actual name.

In github.com dashboard

Forking The Repository of Demo Website

A repository is a folder of files pertaining to a project. Forking is the process of copying the folder to a folder under your account.

  • go to https://github.com/hilly-golf/hilly-golf.github.io, and click on the fork button at the top right corner. Then follow the prompt and select the organization you have just created to fork this repository.
  • click on the settings tab below the repository name, and rename this newly forked repository following the pattern [orgname].github.io.
  • you need to click on the rename button to confirm the name change. Github will enable site hosting for this repository automatically after the renaming.
  • check and verify you can visit the demo page by entering the address [orgname].github.io.
  • if you can’t visit the page yet, try again after a little while. It may take a few seconds for the page to work, but occasionally it takes longer.
  • if the website still does not work after 10 minutes, delete the repository, and repeat the above steps to trigger the processes in Github Pages.

Uploading Images to Github.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 [orgname].github.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.
  • 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 webpage of the demo site is represented by a folder or subfolder with two files

  • index.html, published for the general public
  • index.goandmake.html is editable

There is an edit link at the bottom of the published page, below the copyright statement. You can navigate to an editable page using the menu, then click this link.

Loading Theme Setting with Go and Talk Page Builder

Go and Talk page builder supports loading configuration data from remote backup.

  • you can open another tab and click this link to create a new site project. You will see a placeholder page without navigation menu links.
  • a database by the name hilly_golf will be created automatically in your browser.
  • 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() to show extra tabs.
  • go to tab “Remote Data”, select “github” for the field Data Hosting Provider, enter “themedata” as data repo owner and “hilly-golf” as data repo name. Then click on the button “Load Remote Site Setting”. This will load the theme’s default settings, and the navigation menu links.
  • go to tab “Current”, and update your website information and copyright statement there. The base url must be updated to your new website address, so that the media library knows where to find your uploaded images.
  • hover on the top edge of the screen to show the horizontal app toolbar, and click on “Save” button to save the changes.

Loading Home Page of Theme

  • hover on the left edge of the screen to show the vertical toolbar, click on the file icon() to show page setting window, click on the grid icon() to show extra tabs.
  • go to tab “Remote Page”, click on the “Fetch List” button to refresh article list, then click on the dropdown icon to select “content/_index.md”. This is the data for the home page.
  • click on the “Load Remote Page” button to load the home page of this theme.
  • if you can’t see the article list, double check the Remote Setting tab of site setting, and make sure the data repo owner and name are properly filled in.

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.
  • go to tab “Website Repo”, and fill in the name of your Github organization and repository. Make sure to select “github” for the 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”. If you have uploaded your logo to a subfolder, you can fill in the full path of the subfolder, for example “images/logos” to list images from the subfolder. When you have selected a logo, you can reset the image folder to “images”, so as to select images from that folder while you edit a page.
  • 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.

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.
  • images selected for mobile background and mobile base will be displayed when the page is viewed on mobile phones.
  • the image location is set in “Website Repo” tab of site settings. Make sure to select “github” for the field Hosting Provider. You can click on the Fetch List button to update image list after changing image directory.
  • 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.
  • select different images. If you can’t find any image, check the site settings and make sure the names of your organization 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

  • hover on the left edge of the screen to show the vertical toolbar, click on the file icon() to show page setting window, click on the grid icon() to show extra tabs.
  • go to tab “Remote Page”, click on the dropdown icon to select “content/about.md”. This is the data for the about page.
  • click on the “Load Remote Page” button to load the about page of this theme.
  • edit this page as you wish.

Exporting a Web Page for Hosting with Github 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 github 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 your Github repository.

Exporting About Page for Hosting with Github 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 Github 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.

Visiting Your Website

  • Wait a few seconds and visit your website at [orgname].github.io. Please replace [orgname] with the actual name of the organization you have created.
  • You should be able to see the changes you have made to the home page.
  • Github Pages support custom domain name. If you have a domain name, you may update the DNS record to point to the [orgname].github.io address. For details please refer to Github Pages documentation.

What People Say About It

Love It

I know code and web technology. I have used a few page builders and editors. Go and Talk has helped me to create and format content at a speed I could never achieve with other tools, without touching code again. That’s why we have built this tool, for designers and content creators. I love it, and I believe you will find it helpful too.
hopeful2
Fullstack developer, lead developer of Go and Talk

Summary

This tutorial gives a step to step guide to build and host your first website with Github Pages. 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.

Go and Talk page builder can load theme setting and data files from remote storage, and fetch image list from your website repository. You can back up work in progress data to a data repository, continue editing from another computer, export and publish to the website repository when done.

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.

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.

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