DEV Community: Babátúndé Oyéṣíle

How To Host Websites on GitHub Pages

Babátúndé Oyéṣíle — Mon, 01 May 2023 04:02:01 +0000

GitHub, founded in 2008 and currently owned by Microsoft, is a web-based platform that offers a centralized location for software developers to collaborate on projects, share code, and manage version control.

Developers can use GitHub to create and manage repositories that store code, documentation, and related files for their projects.

They can collaborate on these repositories by submitting changes as pull requests, which can be reviewed and feedback provided by other developers before being merged into the main codebase.

GitHub also offers powerful tools for project management, issue tracking, and continuous integration and deployment, making it a comprehensive platform suitable for software development teams of all sizes.

GitHub hosts a vast number of open-source projects, which provides a valuable resource for developers who want to contribute to and learn from these projects.

GitHub Pages is a hosting service for static sites that enables the direct use of HTML, CSS, and JavaScript files from a GitHub repository.

GitHub Pages can optionally run these files through a build process before publishing the website. Examples of GitHub Pages sites can be found in the GitHub Pages examples collection.

With GitHub Pages, users can set up their website to use their own domain name instead of the default GitHub Pages domain.

They can also choose from a range of pre-built themes, making it easy to create a professional-looking website without starting from scratch.

GitHub Pages is a preferred option for developers and others seeking to host simple, static websites without having to use a separate web hosting service.

It is particularly useful for hosting project websites and documentation related to software repositories hosted on GitHub.

Benefits of Using GitHub Pages for Hosting Your Website

There are various benefits of using GitHub Pages for hosting your website, some of which are detailed below:

Easy to set up

Setting up a website on GitHub Pages is relatively easy and can be done in just a few steps, making it an excellent option for users who are new to web development and hosting.

Hosting is free

GitHub Pages offer free web hosting for your website, which can save you money compared to using a paid web hosting service.

Custom Domain Support

GitHub Pages support custom domain names, allowing you to use your domain name instead of the default GitHub Pages domain, which can give your website a more professional look and feel.

No installation required

Hosting your websites on GitHub pages does not require any installation of external build tools.

Multiple Website Support

You can host multiple websites from a single GitHub account with GitHub Pages, which can be a helpful feature if you need to host multiple websites for different projects.

Built-in Jekyll Support

GitHub Pages include built-in support for Jekyll, a popular static site generator, which can assist you in creating a website without having to write all of the HTML, CSS, and JavaScript code yourself.

Version Control

It automatically provides version control for your website files, enabling you to track changes, revert to previous versions, and collaborate with others on your website.

Web-based

Since it is web-based, you can start a page from your home computer and later continue working on it from your work computer without installing any software or manually copying files.

In summary, GitHub Pages is a powerful and flexible tool for hosting static websites, especially for developers who are already utilizing GitHub for collaboration and version control.

Prerequisites

These are a few prerequisites to consider before hosting a website on GitHub Pages.

A GitHub account

A GitHub account is required to host your websites on GitHub Pages. Create an account if you don't already have one.

Git

To use GitHub Pages, you must have Git, which is a version control system. You should install Git on your computer and be familiar with its usage.

A Repository

You will need to create a repository to store and track your website files.

Website files or Codebase

You will need to have your website files or codebase ready, including HTML, CSS, and JavaScript files.

Markdown knowledge (Optional)

Markdown is a simple markup language that can be used to format text on your website. Although it is not mandatory, familiarity with Markdown can simplify the process of creating and formatting content on your website. This is optional.

Domain (Optional)

You will need to have one registered and configure it to work with GitHub Pages If you want to use a custom domain. This is optional.

At the end of this step-by-step article, you will be able to host your websites on GitHub pages online with ease.

Steps to Hosting Your Websites on GitHub Pages

Detailed below are the steps to host a website on GitHub Pages, keep in mind that the specific details of your website and repository may cause these steps to vary, so use them as a general guideline.

Log in to your GitHub account

If you do not already have GitHub, sign up for one.

Create a new repository

Click on the "+" sign at the top-right of your GitHub profile and create a new repository. Name it based on your preference or based on the purpose of the website you are hosting. "Public" must remain checked to use GitHub pages. You can also add a README file that gives the description of the project but it's optional

Add your website files and Commit

Add your website files to the repository. This includes your HTML, CSS, and JavaScript files. Then, commit your changes and add an optional extended description, then push them to the repository.

Enable GitHub Pages

Click on "Settings" on the navbar, then click on "Pages" on the sidebar. Change the "none" to "main" under the Branch section to select a source to enable GitHub Page for this repository then click on "Save".

Your Website is Live

Your website should now be live on your GitHub Pages URL.

Choose a Theme and Configure a custom domain (Optional)

Go to the "Settings" tab of your repository and select a theme if you want to use a pre-built theme for your website and If you want to use a custom domain, add it to your repository's settings. These are optional.

Update your website

Any changes you make to your website files at any point in time can be committed and pushed to the repository to update your website.

Conclusion

This article gives a detailed step-by-step guide on how to host your websites on GitHub pages with ease. It also gives in detail the benefits of hosting your websites on GitHub pages.

Hosting your website on GitHub Pages may be based on preference as there are other ways or platforms to host your websites, for example, Netlify, Heroku, Medium, GitLab Pages, WordPress and so on.

Thank you for reading, kindly share your feedback in the comment section, and feel free to connect with me on GitHub | Twitter | and LinkedIn 💖, and see you at the next one, cheers 🍸.

Best 3 Bootstrap Alternatives

Babátúndé Oyéṣíle — Sun, 23 Apr 2023 10:33:59 +0000

Bootstrap is a free and open-source front-end framework developed in the mid-2010 by a designer and a developer at Twitter that provides a set of tools and resources for building responsive, mobile-first websites and web applications.

It is one of the most popular CSS frameworks used by web developers around the globe. Before Bootstrap became an open-sourced front-end framework, it was then referred to as Twitter Blueprint.

Bootstrap was initially released on 19th August 2011, it currently has a stable release, Bootstrap 5, released on the 22nd of November, 2022.

You can also visit the Bootstrap website and GitHub repository which currently has garnered over 163k likes and has been forked over 78k times by developers.

Installing Bootstrap

Bootstrap provides various ways to quickly get started, each one with a different procedure, skill level, and use case. The top ways to get started with Bootstrap are:

Download Bootstrap: One of the best ways to get started with using Bootstrap in your project is to download it and get the required files for your project. The latest version of Bootstrap can be downloaded from their website.
CDN via jsDelivr: If you will prefer not to download Bootstrap, you can add Bootstrap to your project via Content Delivery Network (CDN).



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Package Managers: Another option to pull Bootstrap source files into your projects is to use some of the most popular package managers.

npm: npm install bootstrap
yarn: yarn add bootstrap

Pros:

Bootstrap is one of the most used CSS frameworks among web developers around the world. This is because it provides relevant solutions to problems faced by these developers. Some notable benefits of Bootstrap are:

Responsive and Consistent Designs
It provides components e.g. grids, that allow developers to create a responsive website and web app, that are visually appealing to users both on large screens and smaller screens easily and also to ensure consistency of designs.
Community, Docs, and Access To Support
Bootstrap provides detailed docs that give information about the usage, and updates. Thousands of developers around the globe use Bootstrap in their projects and the open-source community provides the necessary support.
Customizable
Bootstrap ensures customization through its source Sass files, color, color modes, CSS variables, components, options, and optimization.

Cons:

Bootstrap, like every other good thing, has its downside. Some of these are listed below:

Requires Coding Skills
Bootstrap is a coding tool, therefore it requires coding skills to use it effectively. This, therefore, makes it difficult for non-developers with no prior coding skills to make use of it.
Websites look similar
Another popular demerit of Bootstrap is the idea that most of the websites built with it look similar and this makes it easy to identify websites built with Bootstrap.

Alternatives To Bootstrap

In 2023, there are numerous alternatives to Bootstrap that developers use in their projects to get their desired outcome. This article focuses on the three top alternatives based on usage, popularity, community, and preference.

TailwindCSS

Tailwind CSS is an open-source and utility-first CSS framework that provides a set of pre-defined classes that you can use to style your web pages quickly and efficiently, unlike other CSS frameworks, like Bootstrap, which comes with pre-designed components.

Tailwind CSS focuses on providing low-level utility classes that can be used to build custom designs without having to write custom CSS. It was built by developers at Tailwind Labs with CSS.

You can also visit the Tailwind CSS website and GitHub repository which currently has garnered over 67k likes and has been forked over 3k times by developers.

Getting Started with Tailwind CSS

Tailwind CSS provides a large number of utility classes that cover a wide range of design needs, including typography, spacing, layout, and more. The framework provides a few different ways to get started.

Tailwind CLI The Tailwind Command Line Interface (CLI) tool provides the easiest and quickest way to get started and work with TailwindCSS from scratch. This download requires the prior installation of Node.js and npm. ```

npm install -D tailwindcss
npx tailwindcss init


- **PostCSS**
TailwindCSS can also be installed as a PostCSS plugin which provides the easiest way to integrate it with other build tools.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init


- **Play CDN**
You can also use TailwindCSS right in the browser without any build step, this is specifically designed for development purposes alone and not the best choice for production purposes.


###Pros
The key idea behind Tailwind CSS is that instead of writing CSS from scratch, you can simply add pre-defined classes to your HTML markup. Some major benefits of using TailwindCSS are:

- **Speed**
TailwindCSS can help speed up your development process by reducing the amount of custom CSS you need to write.

- **Consistency and Maintainability**
Since all the styles provided in TailwindCSS are defined in pre-existing classes, it can help ensure consistency and maintainability across your codebase.

- **Responsive Design**
TailwindCSS provides utility classes that make websites and web pages be viewed on different devices with different resolutions e.g. laptops, mobile phones, and iPads.

- **Customizable and Community Support**
TailwindCSS is highly customizable as it provides core concepts such as hover, focus, and other states, reusable styling, and functions and directives.

###Cons
TailwindCSS provides amazing benefits to developers but it's not an all-rounder as it poses some demerits, some of which are:

- **Ugly HTML**
The addition of multiple utility classes to the HTML file can sometimes look ugly and might have just posed the question, "Why not just use inline CSS styling?".

- **Coding Skills and Installation Process**
In order to properly use TailwindCSS, you need to be familiar with the usage of custom CSS and you also need to run the installation process that generates the CSS which may be time-consuming and require additional cost.

- **Increases HTML Files**
Since you do not have to write your own CSS rules but rather use the utility classes provided by TailwindCSS, this makes the HTML file larger than usual.

##Materialize
Materialize CSS is a front-end web development framework that is based on Google's Material Design guidelines. It provides a set of CSS classes and JavaScript components that make it easier to create responsive and mobile-friendly websites.

Materialize provides elements and components such as grids, typography, color, and imagery that are visually pleasing. Emphasis on different actions and components creates a visual guide for developers. It is also called Material Design.

You can also visit the Materialize [website](https://materializecss.com/) and [GitHub repository](https://github.com/dogfalo/materialize) which currently has garnered over 38k likes and has been forked over 4k times by developers.

[![Materialize GitHub page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pibur633rcfla3rwwo0p.png)](https://github.com/dogfalo/materialize)

###Installation of Materialize
Just like other CSS frameworks, Materialize provides a variety of ways to install and get started with using the framework. The major ways of getting started with Materialize are:

- **Download Materialize**
You can download Materialize to your computer based on your preference and expertise as it provides the standard version and the sass version, which contains the source SCSS files.

- **CDN**
You can also use Materialize right in the browser without any build steps.

- **NPM**
Another option to pull Materialize source files into your projects is to install Materialize through the node package manager.
`npm install materialize-css@next
`

###Pros
Materialize is a front-end web development framework that makes use of classic principles of outstanding design along with innovation and technology. Here are some of the pros of using Materialize:

- **Easy to Use**
Materialize is a front-end framework that provides easy-to-use syntax that makes it easy to implement designs and interactivity on websites and web pages.

- **Consistent and Responsive Design**
Materialize gives consistent design based on its guidelines and also makes it easier to create a responsive design on large and smaller screens because it provides a grid system and pre-designed elements.

- **Community Support**
Materialize also possess a strong online community via their GitHub repository that allows getting answers to problems or bugs encountered.

###Cons
Explained in detail below are some downsides of Materialize and also contribute to factors to consider when choosing your CSS framework of choice.

- **Requires Coding Skills**
Materialize requires that users have some prior knowledge of coding and in some cases JavaScript as well, which may not be suited for all users.

- **Large file size**
Materialize requires that users have some prior knowledge of coding and in some cases JavaScript as well, which may not be suited for all users.

- **Large file size**
Materialize contains pre-designed components that may result in a larger file size and can make load times slower for websites and web pages.

- **Customization is limited**
Even though Materialize provides consistent designs, their pre-designed components might be limiting for users who may want to make further adjustments.

- **Pricing**
Materialize also has a monthly subscription which may cause additional costs for developers.

##Custom CSS
Also referred to as CSS, Pure CSS, or Vanilla CSS, Custom CSS is a style sheet language used to describe the presentation of a document written in HTML (Hypertext Markup Language) or XML (eXtensible Markup Language).

Custom CSS is basically used to format the layout of a webpage or website. CSS was developed by World Wide Web Consortium (W3C) with its initial release on the 17th of December, 1996.

You can also visit the [website](https://www.w3.org/TR/CSS/#css) for more insights.
[![W3C website snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou5aj16jc9z3axhr98dr.png)](https://www.w3.org/TR/CSS/#css)

###Using Custom CSS
You can select from the below-listed options to get started with using custom CSS in your projects.

- **Inline CSS**
You can start using custom CSS by simply adding the style attribute to the HTML element that requires styling.

`<p style="color:blue;">An inline styling</p>`

- **Internal CSS**
This entails defining the style for a single HTML page, which is placed in the `<head>` section of the HTML page, within a `<style>` tag.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lmqgb8o18izy2oy25db.png)

- **External CSS**
The external CSS can be used to provide style for many HTML pages. To use this, simply add a <link> to the <head> section of each HTML page.


###Pros
Using custom CSS boasts several merits and some of which have been detailed below.

- **Better User Experience and Consistent Design**
Custom CSS makes websites and webpages more interactive and appealing to the eye thereby improving user experience. It also allows developers to ensure the style elements are used as appropriate across the web pages.

- **No Installation process is required**
There is no prior installation required to get started with custom CSS, unlike the frameworks.

- **Speed and Time Saving**
Since CSS enables you to use less code, as you can repeat several styles across web pages, this thereby enhances faster page speed and saves time.

- **Responsive Design**
Custom CSS enables developers to build websites and web pages that are visually appealing on small screens as well as larger screens with the use of media queries.

###Cons
There are a few demerits of using CSS. It is imperative to have this at the back of your mind when building projects with custom CSS. Some of these downsides are:

- **Coding Knowledge**
CSS requires users to have prior coding experience as it has various properties and values that must be correctly understood and applied, and CSS can be difficult to learn and master.

- **Time consuming and Effort**
Learning CSS requires a lot of time to learn and practice, as well as a lot of effort to actually master its usage and functionality.

- **Confusion Due to Levels**
Figuring out which CSS to learn can be quite confusing as there are various levels e.g. CSS2, and CSS3, which might confuse most beginners.

##Conclusion
This article covers a detailed comparison between Bootstrap and 3 other alternatives (Tailwind CSS, Materialize, and Custom CSS), you should be aware that there are other notable alternatives to Bootstrap that you can learn.

Learning Custom CSS is a basic requirement before proceeding to select a preferred CSS framework, this is to ensure you have appropriate coding skills before moving ahead to frameworks.

Selecting a CSS framework to use in your project should be based on the use case, development, or production of such a project, and sometimes might be based on personal preference.

Thank you for reading, kindly share your feedback in the comment section, and feel free to connect with me on [GitHub](https://github.com/badbatunde) | [Twitter](https://twitter.com/badbatunde) | and [LinkedIn](https://linkedin.com/in/badbatunde) 💖, and see you at the next one, cheers 🍸.