Hello World!! A tutorial to start with GitHub Pages.

in #utopian-io7 years ago (edited)

Discovering a New World with GitHub Pages

GitHub Pages


How did it begin?

I can say that the story of this contribution is long, it maybe began when a friend, @sirrius start beta-testing some products as busy.org. In that moment his work seemed so complex for me and so is now. Time pass and news about utopian.io begin to fill the blockchain inviting everybody to participate. That’s great but is not for everyone since utopian-io is for programmers, I thought. Still, I was just thinking that I needed to get more involved.

I’m a theater actor, playwriter and teacher and now I’m just about to begin Master studies in Scenic Direction, this is one of the main reasons which bring me to the blockchain, the possibility to manage posts of academic worth that could remain in it forever.

So, between thinking in utopian.io and my own interests I find this post:

How to integrate Wikiversity, @Utopian.io and @Steemiteducation by @chrisaiki

I asked some questions to him:


And then the Light comes, So I returned to @sirrius in this post:

Added text search ordered by relevance score for Utopian

and asked my questions:


Getting into utopian.io and GitHub

Here the adventure begins. With the given information I went directly to utopian.io, and subscribe…

In utopian.io I could see, as @chrisaiki and @sirrius told me, the direct link to GitHub so I went there. The first impression was a shock, I have to say. I was one step to quit, but I decide to give a chance and made my “Hello World”. What is that?? In the GitHub start page you can find the next tutorial.

The Hello World project is a time-honored tradition in computer programming. It is a simple exercise that gets you started when learning something new. Let’s get started with GitHub!
You’ll learn how to:
Create and use a repository
Start and manage a new branch
Make changes to a file and push them to GitHub as commits
Open and merge a pull request

Repositories, branches, commits, pull requests?? Those new words were twisting into my head!! But now I need to say this, anyone can make it!! And I started. Now I have seen it, I have two repositories and 54 commits within, there are very few, but I’m sure will be more. I created the repository leveuf/escenika where I intend to create the web page about the experience of my coming studies.

Please note in the left side on the top there’s a square showing: Branch gh-pages. Also is important to notice in the right side on the top those options for create, upload, and find a file, through these options you can create the necessary pieces of your project which could be software, web apps or blog pages. I'll try to show all these aspects in the next video, there’s no voice because my spoken english is very bad. :/ I hope that writing I manage to make me understand.



In the video I was highlighting one of my greatest discoveries on GitHub, GitHub Pages. This application is fully integrated to the repositories, however you have to make some special settings to achieve this. For example you need to eliminate (I’m going to that) the master-branch and replace it for this branch gh-pages as the default. By doing so GitHub Pages manage better the repository. Before telling how I know, there's something important about the folders. This is what I found, you need to create a file including the name of the folder first, in the example I click create a file, then wrote “docs/”, then the name of the file with the respective extension, in the example I create an ".html" file. When you create the file the folder is also created and you can upload or create more files there.

GitHub for Poets

But now it’s time to tell you how I learn so much things. ;) Maybe some of you know them, but Im sure I’m going to know them more. I find the youtube channel The train code and there’s the GitHub organization (a group of collaborators in GitHub) called Coding Train, there's where I start to understand more things. In youtube they have a beautiful play list called GitHub for Poets You can imagine my face. In that series of videos they explain the process to make web pages using GitHub, they were who told me to delete the Master Branch. The videos are there and I have no much to say than I’m grateful and I have a lot to learn... and also they're funny!! :)

I’m projecting to get close to other GitHub users who openly share their repositories for other people so they can make contributions in those projects. That's the spirit of the open-source projects. You can make a pull request which means that you are suggesting some code for a part of the repository, maybe some translation, visuals or designs. You get a copy of the whole repository to make and prove your changes and the owner can approve the changes merging them and including in the Master Branch. That’s how the open-source projects can grow.

For now I need to learn more about the different codes that are allowed in GitHub. I confess I was a blogger but this has much, much more potential. I need to check Jekill which is the app that manage to post GitHub Pages in more easy way, but it seem little complex to install. About Wikiversity I’m subscribed too, and when I begin to prepare my articles I will learn the rules and adapt the code to also share the academic articles there.


Here is in summary the process of the Project so far:

1.- You need to subscribe in https//utopian.io, for that you need an account related to Steem, as steemit.com. You will be asked for your user and your active key to register.

2.- You need to register in https://github.com, for that registration you will be asked to sig-up using an email adress.

3.- Once in GitHub you can make the “Hello-World” tutorial which link is included in the start page with the option Read the Guide when you sign-in. Or you can go directly to Start a Project and:


  • Create a new repository: Here you create the root of your project. By selecting initialize with a README You create a “.md” file which is the front page of your project by default.
  • You add a short description for your repository and create it.
  • Once in the new repository, you can work on it by selecting the README.md file and then click the pencil in this options: Untitled picture01.png
  • The front page of your project can be changed if you create a file called index in the root of your repository, this file could be an html. In this way when you call your page in a browser the Index file will apear.

NOTE: Every time you create or edit some file you need to go to the bottom of the page in the edition and then press commit changes, you have the option to give a title for that commit and also comment it. Every commit in GitHub has his own register in the platform and is the way to interact between colaborators.

4.- You can create or upload the files you need in your project and you can create folders for those files as was explained before.

5.- Once your material is in place you can do the settings to work with GitHub Pages

  • In the root of your repository you will find this: Untitled picture03.pngIn the Branch option you can create a new Branch and call it gh-pages and then here, (this is optional) you can delete the Master Branch Untitled picture 04.png. You will have two branches in that moment. This section is where all the Pull-requests from the owner or collaborators are organized.
  • Once you've created the gh-pages branch: Untitled picture02.png you need to go to settings on the main page of your repository, there you will see these options:
-Here you choose Branches and you will see the option to change the default branch, select your new gh-pages as the default.
- Return to the main Options menu and scroll down a little to find the options of GitHub Pages
-Once there you select in the Source menu your gh-pages branch.


- In the same section you can choose a Jekill Template which are free templates that you can use in your GiHub Pages project.
- You can click on the link of your GitHub Page in the same section.

6.- Now you are ready to check in your browser the result of your diferent files adding the paths in your url. The leveuf/escenika repository for example, has this url https://leveuf.github.io/escenika/ but if I add the path of a file you will get that page:
https://leveuf.github.io/escenika/docs/ensayo.html

7.- Now you just need to put in practice your coding skills. Or like me you start a research to improve your web designer knowledge, the limits are only those of your choice!!


Thanks.

I'm much grateful with @sirrius and @chrisaiki for spent with me those words that gave me the impulse for this adventure! I hope to find more helping hands in this journey thanks to this contribution to an open-source project.

Miguel Ángel Canto @leveuf



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

This is a fascinating article, @leveuf. I have had a lot of questions relating to Github, and reading how you have discovered it, and how to get started with it is really helpful. I have upvoted and resteemed this post as my daily post promotion for people whom I have previously curated. I plan to follow up on the links you suggested. I'm hoping you write another article that continues to describe what you are learning about Github, and how you are using it for your projects. Thanks for writing this post in English! Cheers!

Thank you very much for you words, @Mitneb!! It's important because then I know that people can understand these kind of tutorial!! :) I hope you find GitHub useful as well!!
Maybe not for now but maybe for tomorrow, I send you a message in steemit.chat, it's another text in english. Please you will tell me what you think!! A Huge Hug!!! :)

That's great, @leveuf! Thanks for letting me know. Yes, it was understandable. It might be even better if you were able to use some of the markup formatting techniques to break the narrative up, and highlight some of the essential points, but that's not essential for understanding what you wrote. I will be watching for your chat message! Cheers!

Thanks @Mitneb, yes I will improve the formating of the post, for now I have a category issue to solve, but I hope it will be fine! Cheers my friend I will be telling you more!! :)

It's looking good now, @leveuf! You have a typing error in the first paragraph heading, and within that paragraph. Change the heading to read: How it Began (without the "?")(or if you wanted to keep the question you could say, "How did it begin?")
Then, in the two places you have "beggin" change them to "began" for the correct tense. The proper spelling for the present tense is "begin". You do add an additional "n" when you want to spell "beginning." Don't you love how easy English is? Cheers!

In the beginnig of the article I was begging for Help!!
Thanks so much for saving me @Mitneb, you are simply great!!
Cheers and the best vibes!! :)

I am glad to be of help, @leveuf! Cheers and a big hug!

Hola :D Nos mudamos a utopian ejejjejejeje :D Está mejor la fiesta ahí XDXDXD

World is huge by nature!!! :)

I don't speak english ¡Lol! :D

Jajajaja!! You need to do it, not just for here in steemit but in life. I've been practicing a lot!! XDXD

Tellible :D When you give me some classes?

Of course!! When do you want your first lesson? It could be english cat lessons!! ;)

A github for poets, that is a good news !
Congratulations for your tutorial, it is not easy to understand how commits works.

Thank you for visiting and for your words!! I'm glad you like it!!
Yes is difficult and I'm beginning to learn but I'm sure colaboration offer much more potential of both growing and geting knowledge! Thank you very much again I'm glad to meet you!! :)

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thank you very much!!! :-)

Hey @leveuf I am @utopian-io. I have just upvoted you at 7% Power!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!
  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • I introduced a competition factor. My vote is based also on how competitive the category used is.

Human Curation

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Wow @leveuf I am really glad that I was part of your inpiration to create your own open-source repository. I am really impressed. I will look through your repository and maybe also make a pull request :)

I think that if you keep updating it and improving it it will become great. You can even find translators or artists that can contribute to your repo.

@Sirrius of course you are my first inspiration!! I was looking to your job on busy.org and I was admired for how you were growing in your contributions and participation. Of course your contributions have been important since I've seen in your post comments how are they valorated!! If I have an utopian.io Hero, that's you!! :) It will be great if you check the Repo. For now I think on getting some examples of code to study and work. I have basic knowledge of html, so information about html or java script for begginers or what you consider that's a good start it will be OK!! Thank you very Much, @Sirrius, now I´m trying to fix some issues that I was called to, but the excitement of this journey is great!! I send a Big Hug, and always only the best vibes!!! :)

The @OriginalWorks bot has determined this post by @leveuf to be original material and upvoted(1.5%) it!

ezgif.com-resize.gif

To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!

Your contribution cannot be approved yet, because it is in the wrong category. The correct category for your post is Blog post. See the Utopian Rules. Please edit your post to use the right category at this link, as shown below:

You can contact us on Discord.
[utopian-moderator]

Hello, @shreyasgune!! I read your message and I was trying to make the changes, but there's a problem. When I try to change to "blog-post" category I don't have that option to edit the post. Only apear the 12 categories from "Suggestion" to "Copywriting", but no "Blog-Post" I went to the discord channel to question and so far I understand that changing to "blog-post" is not possible. You can only choose it when you are making a new contribution! Is that correct? If that's the case, do I need to make a new contribution post??
Thanks a lot for your attention to the post and for your help!!!

Since you have already made such a good post. I will approve if you can include a step by step tutorial about how to do what you did at the end and change category to tutorial.

Thanks.

I'm grateful for your words and encouragement, of course I will make those changes!!! Is it ok to find you or other Mods in Discord when it's done?
Thanks for your attention!!! :)

I included the "step by step" already, I think looks fine!! I also already changed the category to: tutorial.
Thanks!! :)

Congratulations @leveuf! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Congratulations @leveuf! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of comments received
Award for the number of comments

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Coin Marketplace

STEEM 0.19
TRX 0.13
JST 0.030
BTC 63630.78
ETH 3406.29
USDT 1.00
SBD 2.55