How to Deploying to Github Pages? Don't Forget to Fix Your Links

Is your site not working after you've deployed to Github Pages?

You see a blank page, or maybe the homepage shows up fine, but then you click on a link and nothing happens. You pop up dev inspector only to find a bunch of 404 status codes.

It happens to many developers — the website works fine on localhost but after deploying to Github Pages, everything breaks.

By understanding the core problem, you will be able to spot it and prevent it from happening in all your future deployments, not just on Github Pages.

Let's investigate the issue and make your site work as expected in production.

#github 

What is GEEK

Buddha Community

How to Deploying to Github Pages? Don't Forget to Fix Your Links

A Simple Guide to Github Page Deployment

Long story short: Jekyll is a template engine changing

markdowndocuments on staticHTMLwebpages, that you can then host anywyere, because you don’t need databases or server that has PHP or Python.

Usual Process

Normally the process of adding new post looks like this:

  • I write markdown document with setting parameters like title, date and tags
  • when I’m happy with what I wrote (never), I commit changes and push it to repository on GitHub. Repository name comes from my nick and is also address for blog asvid.github.io
  • Github after pushing to branch master builds website from sources using Jekyll - probably something like running jekyll build
  • result of Jekyll build is not present in a repository, but you see it right now after visiting bloga page

#github-pages #github-page-with-jekyll #jekyll #github-actions #github #deployment #continuous-deployment #web-development

Myriam  Rogahn

Myriam Rogahn

1593518640

Deploying to Github Pages? Don't Forget to Fix Your Links

1
Is your site not working after you’ve deployed to Github Pages?
2

3
You see a blank page, or maybe the homepage shows up fine, but then you click on a link and nothing happens. You pop up dev inspector only to find a bunch of 404 status codes.
4

5
It happens to many developers — the website works fine on localhost but after deploying to Github Pages, everything breaks.
6

7
By understanding the core problem, you will be able to spot it and prevent it from happening in all your future deployments, not just on Github Pages.
8

9
Let’s investigate the issue and make your site work as expected in production.
10

11

What are root-relative links?

12

13
To better understand why links often break when deploying to Github Pages, first we need to learn what root-relative links are.
14

15
Root-relative links1 are links that start with a forward slash (/). When clicked, a root-relative link ignores the path location of the current URL. Which part of an URL is the path? Everything that comes after the domain. The path of the following URL, for example, https://example.com/blog/articles is /blog/articles.
16

17
A root-relative link always leads to the same path within the current domain, regardless of where it is found. Consider the following examples:
18

19

20
<!--
21
  Root-relative links ignore the current URL and always lead
22
  to the same path within the current domain
23
-->
24
​
25
<!-- Current location: https://example.com/ -->
26
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->
27
​
28
<!-- Current location: https://example.com/blog -->
Is your site not working after you’ve deployed to Github Pages?

You see a blank page, or maybe the homepage shows up fine, but then you click on a link and nothing happens. You pop up dev inspector only to find a bunch of 404 status codes.

It happens to many developers — the website works fine on localhost but after deploying to Github Pages, everything breaks.

By understanding the core problem, you will be able to spot it and prevent it from happening in all your future deployments, not just on Github Pages.

Let’s investigate the issue and make your site work as expected in production.

What are root-relative links?
To better understand why links often break when deploying to Github Pages, first we need to learn what root-relative links are.

Root-relative links1 are links that start with a forward slash (/). When clicked, a root-relative link ignores the path location of the current URL. Which part of an URL is the path? Everything that comes after the domain. The path of the following URL, for example, https://example.com/blog/articles is /blog/articles.

A root-relative link always leads to the same path within the current domain, regardless of where it is found. Consider the following examples:

<!--
	Root-relative links ignore the current URL and always lead
	to the same path within the current domain
-->

<!-- Current location: https://example.com/ -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

<!-- Current location: https://example.com/blog -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

<!-- Current location: https://example.com/blog/articles -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

#blog #github #github pages

Oral  Brekke

Oral Brekke

1617437520

Deploying my portfolio website on Github Pages using Github Actions.

I recently deployed  my portfolio site and wanted to try out github actions and this is my experience of automating the deployment.

This article is more focused on how you can use the GitHub actions and how easy it is to deploy your code to GitHub pages rather than the portfolio site code.So every time you make an update or build to your website ,the changes are automatically reflected and this automated deploying process makes work much faster.

The way GitHub action works is you create actions in your repositories by creating one or more yaml files and these are called workflows.Workflows now can handle build tasks like CI CD. This means you use the action to test your code and push the site to the desired hosting platform (in this case GitHub pages ) when the main branch changes .

First step assuming that you have a GitHub account is to create a repository having your website code in it.Now I have a bootstrap website but in the future I do plan on adding node JS so I already added package.json.

#workflow #portfolio #github #github-actions #github-pages

Edison  Stark

Edison Stark

1603861600

How to Compare Multiple GitHub Projects with Our GitHub Stats tool

If you have project code hosted on GitHub, chances are you might be interested in checking some numbers and stats such as stars, commits and pull requests.

You might also want to compare some similar projects in terms of the above mentioned stats, for whatever reasons that interest you.

We have the right tool for you: the simple and easy-to-use little tool called GitHub Stats.

Let’s dive right in to what we can get out of it.

Getting started

This interactive tool is really easy to use. Follow the three steps below and you’ll get what you want in real-time:

1. Head to the GitHub repo of the tool

2. Enter as many projects as you need to check on

3. Hit the Update button beside each metric

In this article we are going to compare three most popular machine learning projects for you.

#github #tools #github-statistics-react #github-stats-tool #compare-github-projects #github-projects #software-development #programming

Publishing A Three.js Project On GitHub Pages

In this article, I am going to show you how to publish a Three.js project on GitHub Pages. You don’t have to buy a costly domain or any hosting plan to do so.

I won’t go into how to develop a Three.js project from scratch. I am assuming you know that and already have a project to showcase on GitHub pages. If you don’t then clone my repo and get started [switch over to the master branch coz I haven’t set it up as the default one]👇

This is how it looks like👇

STEPS

✅Step 1: Create a new folder called “dist” in your project.

_If you have cloned the above repo then the “dist” folder is already there. You can skip this step and step 2. Jump directly to Step 3.) _

#three.js #deployment #github-pages #projects #open-source #github