Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

Question

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

I have developed a simple jQuery plugin and uploaded it to Github. I am using both the Github website and Github for Windows to manage this project.

However, when I try to include the .js or .css files from Github using the Raw links, my browser fails due to the MIME-type being set as plain/text.

After spending hours researching, I understand that creating a project page (gh-pages branch) is the first step to make these files accessible for linking. But most of the guides I found assume a UNIX-based system or require console-based tricks:

References: GitHub, SO, SO

There must be a simpler way to share these source files for inclusion. After automating the creation of a 'project page', I'm now faced with another branch that appears to lag behind the 'master' branch, leaving me confused on the next steps. It's unclear why I need to create an additional branch in the first place, making this process unnecessarily complex.

To summarize:

Created a new branch in Github (using Windows app and website)
Able to manage and update files without issues
Cannot include .js and .css files using 'raw' links
Desire to include these files on a page
Hoping to achieve this via Github for Windows or the website itself

If anyone can provide guidance on this matter, I would greatly appreciate it, and I believe many others would benefit from a clear solution as well.

EDIT: Referencing a popular Github project where files are easily accessible through Github:

Select2:

EDIT2: I now understand the purpose of creating a separate branch to share files, as Github's source control is not intended to act as a CDN. The project page serves as a public platform for hosting files, so the question now shifts to how I can transfer files from the master branch to the gh-pages branch. I simply want access to the directory structure to manually place the files there, without worrying about automation at this point. Despite being "10 commits behind," syncing my branch with Github Windows shows no content to retrieve from the gh-pages branch. What could be causing this?

EDIT3: Added my own findings and solutions to the situation thus far.

javascript jquery css github github-for-windows

Answer 1

Answer №1

There is an abundance of resources available for those utilizing console-based Git software, but finding information on exclusively using Github Windows proved to be a challenge. However, here is the solution:

Here's a breakdown of the process:

Start by creating a project page following the instructions provided here:
Unfortunately, only console-based solutions are offered for obtaining a local copy. Here's how you can navigate this using Github Windows (assuming your project is named myproject, comprised of myproject.js and myproject.css).
Once the page is created (which may take a few minutes), launch Github Windows.
In Github Windows, access the repository for your project. From the top menubar, select "master" and switch to the "gh-pages" branch - view this helpful example from StackOverflow.
Upon switching branches, the folder
```
C:\Users\YourName\Documents\GitHub\myproject
```
will display the files for the "gh-pages" branch. Returning to the "master" branch in Github Windows will reconfigure the folder structure accordingly. This distinction initially caused confusion for me, as directories for both branches cannot be viewed simultaneously.
Choose the "master" branch within Github Windows.
In Windows Explorer, copy myproject.js and myproject.css to a separate directory (e.g., c:\temp).
Return to Github Windows and select the "gh-pages" branch.
In Windows Explorer again, move the previously copied files from c:\temp to a new location like
```
C:\Users\YourName\Documents\GitHub\myproject\myproject-1.0\
```
Head back to Github Windows, where you'll observe "2 files to be committed." Enter your commit message and click 'Commit'.
Then, click 'Sync'.
You can now utilize these files in your webpages by referencing a URL such as:
```
http://yourname.github.io/myproject/myproject-1.0/myproject.js
```

Undoubtedly, this method proves to be quite cumbersome when frequent updates to source file(s) are expected. An automated approach would certainly be more convenient. There's a solution addressing this on StackOverflow here, albeit involving UNIX-based scripting which may not be feasible for all users. If a more efficient way using solely GUI-based tools emerges, myself and others would eagerly welcome it.

EDIT: It's worth noting that this solution deviates from Github's intended workflow; clicking on the "gh-pages" branch on the Github website reveals it as being "5 commits ahead and 11 commits behind" the master branch, notwithstanding the identical files present. As such, I remain open to alternative GUI-based approaches to address this issue promptly.

Answer 2

There is an abundance of resources available for those utilizing console-based Git software, but finding information on exclusively using Github Windows proved to be a challenge. However, here is the solution:

Here's a breakdown of the process:

Start by creating a project page following the instructions provided here:
Unfortunately, only console-based solutions are offered for obtaining a local copy. Here's how you can navigate this using Github Windows (assuming your project is named myproject, comprised of myproject.js and myproject.css).
Once the page is created (which may take a few minutes), launch Github Windows.
In Github Windows, access the repository for your project. From the top menubar, select "master" and switch to the "gh-pages" branch - view this helpful example from StackOverflow.
Upon switching branches, the folder
```
C:\Users\YourName\Documents\GitHub\myproject
```
will display the files for the "gh-pages" branch. Returning to the "master" branch in Github Windows will reconfigure the folder structure accordingly. This distinction initially caused confusion for me, as directories for both branches cannot be viewed simultaneously.
Choose the "master" branch within Github Windows.
In Windows Explorer, copy myproject.js and myproject.css to a separate directory (e.g., c:\temp).
Return to Github Windows and select the "gh-pages" branch.
In Windows Explorer again, move the previously copied files from c:\temp to a new location like
```
C:\Users\YourName\Documents\GitHub\myproject\myproject-1.0\
```
Head back to Github Windows, where you'll observe "2 files to be committed." Enter your commit message and click 'Commit'.
Then, click 'Sync'.
You can now utilize these files in your webpages by referencing a URL such as:
```
http://yourname.github.io/myproject/myproject-1.0/myproject.js
```

Undoubtedly, this method proves to be quite cumbersome when frequent updates to source file(s) are expected. An automated approach would certainly be more convenient. There's a solution addressing this on StackOverflow here, albeit involving UNIX-based scripting which may not be feasible for all users. If a more efficient way using solely GUI-based tools emerges, myself and others would eagerly welcome it.

EDIT: It's worth noting that this solution deviates from Github's intended workflow; clicking on the "gh-pages" branch on the Github website reveals it as being "5 commits ahead and 11 commits behind" the master branch, notwithstanding the identical files present. As such, I remain open to alternative GUI-based approaches to address this issue promptly.

Answer 3

Answer №2

My experience with Git(hub) software for Windows has been less than smooth, in fact, it's probably the buggiest tool I've ever used (and that says a lot, considering Windows itself). Trying to get anything done with Git on Windows was always a struggle for me.

But, let me help you out with your question. If you open a command prompt and type in

git checkout -b gh-pages

(if there's an error about branch gh-pages already existing, just remove the -b.)

it will switch the branch for you. Then, you can open notepad++ or your preferred text editor (~~you might need to do this from the terminal, but I'm not entirely sure~~), add the file you want, and then enter this command (in cmd):

git add .

This will add all files in the folder to Git recursively.

git commit -m "Add file for easy user download"

This includes the commit message.

git remote add origin <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d3d9c5e1d3d9c5dddac9dee2dfd3">[email protected]</a>:yourusername/yourrepository.git

This connects your Github repository so you can push your changes to it.

git push origin gh-pages

Now, you've successfully pushed your changes to Github!

If you're interested, you may want to check out this resource on Git branching.

Answer 4

My experience with Git(hub) software for Windows has been less than smooth, in fact, it's probably the buggiest tool I've ever used (and that says a lot, considering Windows itself). Trying to get anything done with Git on Windows was always a struggle for me.

But, let me help you out with your question. If you open a command prompt and type in

git checkout -b gh-pages

(if there's an error about branch gh-pages already existing, just remove the -b.)

it will switch the branch for you. Then, you can open notepad++ or your preferred text editor (~~you might need to do this from the terminal, but I'm not entirely sure~~), add the file you want, and then enter this command (in cmd):

git add .

This will add all files in the folder to Git recursively.

git commit -m "Add file for easy user download"

This includes the commit message.

git remote add origin <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d3d9c5e1d3d9c5dddac9dee2dfd3">[email protected]</a>:yourusername/yourrepository.git

This connects your Github repository so you can push your changes to it.

git push origin gh-pages

Now, you've successfully pushed your changes to Github!

If you're interested, you may want to check out this resource on Git branching.

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

Answer №1

Answer №2

Similar questions

Why isn't my CSS float behaving as I anticipated?

What are some effective design principles for creating REST APIs in expressjs?

Function that returns an array

Transferring an array from PHP to Javascript using GET method

Posting and deleting data in AngularJS using HTTP requests

Encountered a problem during the insertion of data into the database through ajax and php

Creating a custom jQuery plugin with an undefined JavaScript function

The Kendo Date Picker is failing to update properly when the k-ng-model is modified

Retrieve information from a controller and pass it to a Component in AngularJs

Error message: The protocol "https:" is not compatible with this function. Please use "http:" instead

Loading of iframes occurs only after receiving the content sent through the postMessage function

A simple way to deactivate a React component (or the onClick event itself) using the onClick event

Combining two arrays of objects using JavaScript

The child element fails to increase in size if the parent element has a minimum height specified

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

Can Next.js 13 components maximize performance by utilizing server and client components simultaneously? What is the best approach to achieve this?

Exploring the possibilities of reading and writing data in localStorage?

It is not possible to highlight the text that appears in the title of the tooltip in React MUI

What is the correct method for redefining properties and functions in Vue.js?

Avoiding the Popover Component from Covering the Screen When the Menu Component Opens in React Material UI