Building the Website Using GitHub

Link to Website: https://punzalanmoira.github.io/mms142-groupL-2020.github.io/

As our team were not familiar with using GitHub at the start of making the website, we first familiarized ourselves with its basic environment with the help of its guides and tutorials:

After making the first few changes to our README file, we also created the first pages of our Wiki for documentation. We slowly polished its contents and layouts in a logical fashion. Here, you can find the notes and drafts of the webpages' contents without having to access our Google document, as well as how the parts of the website modified from its default theme were done.

We started creating the team's website by following the simple steps instructed in :

One of us created the repository for the group, initializing it with a README.md file.
We activated or launched our webpages through the method¹ of creating a new branch called "gh-pages".
A GitHub Pages hosted static Jekyll Theme, called "Slate," was selected.
The default branch is then switched from "main" to "gh-pages".

Creating the Contents or Webpages

The first time our repository's GitHub Pages was initialized, it automatically displayed the only Markdown file as the website's content. In order to change the landing page of the site, we needed to create an index file, first, in Markdown text language and file. After the first webpage is created (i.e., index.md), the other contents of the site were created next similarly as markdown or .md files.

Previewing the new site, it was immediately noticed that the theme lacked a navigation bar. And in the theme's sample, navigation was provided through manually coded hyperlinks. Our group wished for a more complete website to make up for its simplicity.

Using the theme's documentation found in its own GitHub repository and gh-pages-template's sample and repository as reference and guide, the site's navigation structure was modified by editing mms142-groupL-2020.github.io's _config yaml file (a.k.a. .yml file).

The next task needed to be done was creating the navigation bar which will automatically use the data input in the _config.yml file to generate hyperlinks leading to the site's webpages.

The Navigation Bar

To create the navigation bar, we needed to study how the theme was constructed first. This can be done by studying the markdown pages, the layout files, and the stylesheet displayed and used in the theme's sample website.

Basically, there are three main file folders of the repository which will affect the appearance of the website:

the /root folder of the active branch (which is in this case, the "gh-pages" branch) which is where the files of the webpages or content are stored as markdown files. (Markdown files with a hashtag (#) in front of their names are pages hidden from the website or its visitors)
_layouts folder which will contain an HTML file called default.html that will serve as the layout template of the website's pages.
assets/css which will contain the stylesheet used in the site. The folder where images that will be used in the site will be stored in the same parent folder assets but in a different folder, called images. We followed the naming convention instructed by the jekyll theme we used.

1. Create the files and paths of the essential elements of the site

Using the guide provided in the theme's README documentation:

The `_config.yml` file or theme's metadata or settings:

We added the following lines to the group repository's _config.yml below the opening line already there:

Sample	Changes to `_config.yml`
`title: [The title of your site]`	`title: Online News Sites as Disruptive Technology`
`description: [A short description of your site's purpose]`	`description: This webpage discusses how online distribution of news through online sites, with the addition of social media, is now a new current and common means for publishers to disseminate information to the public, and how people receive these.`

Custom CSS stylesheet:

Create a file called /assets/css/style.scss in our site to add custom styles to the stylesheet.
Add the following content to the top of the file, exactly as shown to retain the theme's stylesheet:

---
---

@import "{{ site.theme }}";

And add any custom CSS (or Sass, including imports) you'd like immediately after the @import line. Since we didn't plan on changing the theme's Sass variables, we didn't set new values before the @import line in our stylesheet.

Layouts

To change the theme's HTML layout:

Copy the original template from the theme's repository (Pro-tip: click "raw" to make copying easier)
Create a file called /_layouts/default.html in your site
Paste the default layout content copied in the first step
Customize the layout as you'd like

2. Apply the layouts to the pages and create the navigation bar

Using [gh-pages-template](https://kutaybs.com/gh-pages-template/setup) setup as guide:

To apply the layout, add a "yaml front matter to the markdown/html file":

---
layout: full
---

To add links to the navigation bar:

`gh-pages-template`'s `_config.yml` settings	Changes made to the `_config.yml` settings, following `gh-pages-template`'s `_config.yml` as sample

	We listed down the pages that we want to be visible on the site under `navigation` line with the `- title:` and `- url:` and following the language convention used

However, even after setting up the site's data, the navigation bar is still not visible because default.html style.scss has not been customized yet. We can now proceed into making the navigation bar visible.

3. Customize the style of the website

First, to make sure that we can still navigate within the website while testing the news codes or modifications that will be added, manually coded links are added first:

<p style="text-align:center">
 <table>
  <tr>
   <th><a href="index">Home</a></th>
   <th><a href="about">About Us</a></th>
  </tr>
 </table>
</p>

Note: the table of links can be coded using HTML or markdown language.

The navigation bar

We created the navigation bar by adding the code from gh-pages-template together with a regular navigation bar code from W3Schools.com.

The theme uses Liquid language. Options to download the github repository has been deactivated through the config settings show downloads: False. And Navigation code is separated from the header nest so that the navigation bar spans the entire width of the webpage. A new class "inner2" was created and used for this same reason rather than using the already available "inner" as it does not span the entire width of the page.

For the stylesheet, we first studied how the theme is constructed to know which id or class we should call out and modify from the theme's original stylesheet, and from the new lines of code we added in the layout's defaul.html file.

nav {
  background: #0F79D0;
}

nav div.inner2 {
  max-width: 70%;
  padding: 9px 350px;
  background: #000;
  margin: 0 auto;
  overflow: hidden;
}

nav ul.topnav {
  float: right;
  list-style-type: none;
  padding: 0 2px;
  margin: 0 auto;
  overflow: hidden;
}

ul.topnav li{
  float: left;
  border: 2px solid #fff;
  margin: 3px;
  border-radius: 14px;
  background: #212121;
}

ul.topnav li a {
  display: block;
  text-align: center;
  padding: 7px 10px;
  background-color: #212121;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  font-weight: 200;
  text-shadow: #111 0px 0px 10px;
  border-radius: 14px;
}

ul.topnav li a:hover {
  background-color: #0F79D0;
  color: #fff;
  font-weight: 700px;
}

.active {
  background-color: #0F79D0;
}

.active:not {
  background: #212121;
}