A while back, I was wondering what was GitHub and how it was used. Although I had downloaded some resources from it, I never really understood what it was used for.
Turns out that I learned a ton more of many other things. I had zero clue what they were.
The start of my learning journey
I was finally interested enough to begin my learning journey with Github.
After watching many Youtube videos on what Github was, I realized that I needed a project to use Github to get me started.
I decided to build a simple website (this website is right here), but I didn’t know where to start.
The last time I built a website was in 2005. I used Adobe Dreamweaver to create a canvas and publish it through an FTP connection. I am no expert, but that is not the best method to build a website.
I had zero knowledge of markdown, and my HTML skills couldn’t go beyond a “Hello World” page.
What I learned?
- What is GitHub, and how to use it.
- What is Hugo and how to use it
- What is Visual Studio Code and how to use it
- What is Netlify and how to use it
- What is Google Analytics and how to use it
Tools used
Hugo
I turned to Hugo as it promised to be the simplest way to build a website. Hugo uses templates like the one I am using on this website (Piko) created by heksagon. After many failed attempts using other templates (I’m sure I was doing it wrong) decided to stick with Piko. It was a bit difficult to understand at first, but there is no doubt this is one of the best Hugo templates out there.
I am still wrestling with some issues. Sometimes I spend way too long trying to get something to work. After hours of watching Youtube videos or reading online, I have to move on to use a different strategy. Unfortunately, there is not a lot of documentation I could use to overcome these issues.
Netlify
To publish my website, I went with Netlify because of a good suggestion from a Youtube video. The first template I used had massive issues. I learned that adding the public directory and declaring the version of Hugo I used to fix those critical errors. After long hours, the website did not look the same as it did on my localhost. I am not sure why that was, but after three days, I gave up using the clarity theme.
Initially, I didn’t know how to get the social media buttons or the contact form to work, but I could figure it out by accident. I want to add a lot more content to the website, but I will build it little by little. I am delighted with the progress I made.
Goggle Analytics
Google Analytics is a tool to track the number of visitors to your website. The Piko template made it very easy to set up. Simply set up a free account with Google Analytics and add your code, name, and number to a set area in the main file. It works as expected.
Steps
Github Setup
After all of these issues were straightened out, I was able to practice how to use GitHub.
- I created a GitHub account jeanburgos where I could find and fork the Piko theme. I understand that forking creates a copy of the original content and places it on your account. This makes sense because I want to change my website, not the original template.
GitHub is more than just a repository (a place to store files online); it is great for version control. See, building a website is not a one-time deal kind of thing. It will have multiple iterations of the site. Change a word here and there, add a picture, and make all the little tweaks you want to get your site just right. I build this alone but imagine multiple people working towards the same goal. GitHub helps keep control of every version.
Developing Environment
I got mixed up between Visual Studio 2022 and Visual Studio Code. I still couldn’t tell you what the different application for both is, but I just knew that it looked different from many of the videos I watched trying to get Github and the developing environment. I used Visual Studio Code to link a master branch and link the repositories. Once this was completed, I was able to create push and pull requests between Github and my computer running Visual Studio Code. Another area that took me some time to understand was that it is necessary to not only save but commit what you saved so that it can be sent to GitHub.
After GitHub was set up, I was able to link it with Netlify. The chain reaction looked like this.
- Changes made to my computer
- Save changes > commit saved changes (must type commit message)
- Commit is saved and updated in Github
- Github content is sent and synced with Netlify to publish on the website automatically.
Thoughts
Building all of this has taken a few weeks to design and develop. It has been a tremendous yet unexpected learning opportunity. I feel a lot more comfortable with the process and appreciate each tool’s value. There is excellent help online. Each tool has a great and helpful community that consistently adds valuable content to assist everyone on their learning journey.