Is There a Good GitHub Pages Hosting Tutorial

[Sean Behan]

Hello, 

I am trying to use the code labs project to generate markdown files into code labs and utilize the CodeLabs site to provide links to the individual labs. 

Following the tutorials and trial and error I can get the site and my codelabs generated and served using "gulp serve --codelabs-dir=codelabs" and viewing on my localhost.  

The above works fine, but when I use "gulp dist --codelabs-dir=codelabs" and try to view the site that was generated in the "dist" folder the site looks like below.

Also the links are broken. 

So I am looking for some help finding my disconnect between the gulp serve and gulp dist, then getting it hosted on a site. 

Thanks in advance for the help. 

Sean

[Brandon Neo]

Hi I'm facing the exact same issue as well. It'll be great if some expert could provide some guidance on this.

Brandon

[Zarin Lokhandwala]

I have created a tutorial on how to generate these files which you can find here: https://link.medium.com/4MTtF1fua8

I have a personal website hosted on GitHub: https://github.com/zarinlo/zarinlo.github.io

I call the code labs like this: https://github.com/zarinlo/zarinlo.github.io/blob/master/index.html#L69

This website references a codelabs folder: https://github.com/zarinlo/codelabs

After I use claat to export the files to a code lab format, I actually have to go and modify the index files that get exported. There is a minor change to the file path. So take a look at the index file of each codelab that gets exported. Like this: https://github.com/zarinlo/codelabs/blob/master/springboot-api/index.html#L10

Hopefully with this example, you figure out how to do this. 

Zarin

--
You received this message because you are subscribed to the Google Groups "codelab-authors" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codelab-autho...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/codelab-authors/1393684c-5163-4e8b-a7f8-322b36956efco%40googlegroups.com.

[Brandon Neo]

Thanks Zarin. I actually figured out earlier today and got it working and haven't got the chance to update.

Thanks again for your blog! I provided me an awesome start :)

Brandon

[Zarin Lokhandwala]

No worries, glad to see it helped you out! 

Zarin

[Sean Behan]

TL:DR

I have been successful in repeating hosting individual codelabs on GitHub, but using the site page in the tools repo does not generate proper links for hosting on GitHub

I am trying to figure out where codelabUrl is defined so it can automatically add the “pages/gituser/repo”  to the codelabs url for the site landing page. 

Hello Zarin, 

First, thank you for your tutorial, it was very helpful to get me up and running as well.   As for your suggestions I have been able to accomplish the same type of setup, using my own site page to link directly to the code labs that are generated from claat. 

However, the main issue I have run into is using the Codelab site generator and hosting that on github.  Site page as from the tools repo for Codelabs.

https://github.com/googlecodelabs/tools/blob/master/site/README.md

Using gulp to create this site will automatically create the site page with tiles for my different code labs, however, this is not working properly due to linking issues.

Site page example I am referring to: https://codelabs.developers.google.com/

   Interestingly enough it does serve fine when I use a local HTTP server but fails on GitHub.   With help from Marc, I have been able to get it to work by manually updating the default index.html for the site and adding “pages/gituser/repo” to all href links.  This will update the URL for the site page and load all the proper scripts.  However, I still have to update each link in the generated index.html, found in the dist folder, for each code lab when it is generated.  

I think the last step is to find where the codelabs URL is defined. 

Note using:

 gulp dist

 --codelabs-dir=codelabs 

--base-url=https://github.company.com/pages/user 

--codelabs-namespace=/pages/user

Does not seem to make a change in the output. 

Any insight would be helpful.  Once I figure it out I will post what I did.

Thanks

Sean

[Nick Comeau]

For anyone who is confused why they can't get the codelabs dashboard page to work with github pages: The codelabs themselves are static content, but the dashboard is dynamic and need to be hosted on a web server. I followed these instructions for using firebase to do this, and have successfully deployed my codelabs from a github repository with github actions. 

https://medium.com/pan-labs/dynamic-web-apps-on-github-pages-for-free-ffac2b776d45