Creating My Own Website Using Github Pages

Motivation

I have always been interested in web development, both front-end and back-end, but never took the time to truly learn all of the requisite languages needed for web development. It always seemed daunting to try to learn, considering you at least need to learn HTML, CSS, and JavaScript to be competent at front-end development, and need to know a back-end language, such as PHP and possibly a database language such as SQL, to be competent with back-end development. In the past, I have tried out some of the online learning options such as CodeSchool, and have learned the basic HTML and CSS syntax before, but I never felt like those option truly helped me understand what I was doing or helped me retain any of the information that I was learning.

Finally, I heard about GitHub Pages, which is an option provided by GitHub to host static web pages, which can be maintained like a normal Git repository. This option felt much less overwhelming, knowing that GitHub would handle the hosting and generation of the site, and I could dedicate my time to just becoming comfortable with HTML, CSS, and JavaScript. I knew that many people in my field have their own dedicated homepages that they can customize separately from social media sites, where they keep information about themselves, their projects, and their interests. This gave me the perfect opportunity to learn a new skill as well as create a site that I would be able to use professionally, and maintain as I wish.

Process

After deciding to start learning front-end development in this manner, I had to decide how I would go about learning. I decided to look into the best tools for beginners, and discovered W3.css and Twitter Bootstrap, which are both CSS Stylesheets that provide a simple, easy, and well-documented styling framework, which means that I would only have to change the CSS when I wanted to change the look of my site from the defaults of those style sheets. At the same time, however, I didn't want to implement CSS that I didn't understand, so I made sure to first learn the basic syntax of CSS, then consult the documenation of each to get a better understanding of what they are doing. Additionally, I would also use the Chrome developer tools inspector to change CSS styles and immediately be able to see the effect of the changes on the generated page, which helped me gain a better understanding of the stylesheets as well as the CSS in general.

When deciding on how to structure my respository, I looked towards the GiHub Pages tutorials, which involved using Jekyll for converting Markdown to HTML. These tutorials taught me how to make a configuration file for my project, as well as make global variables which I could reference throughout my pages. The last, but perhaps most important thing I learned from these was how to template different layouts, where then on each page you can select which tmplate you want each of the page bodies to be inserted into. This is how I went about making the header and footer, where the default page would only have those two elements, and each other page would simply have its content inserted between the header and footer.

Finally, I decided to reference some started templates, using both Bootstrap templates as well as W3.css templates. For me, it is much easier and quicker for me to learn once I see how pages are built, and then think of how I could change them to suit my needs, rather than starting from the ground up, at least for the time while I am still learning.

Lessons Learned

I learned many things throughout this initial process, all of which will help me int the future in terms of being a better developer and being a faster developer. The first thing I learned is that I really enjoy front-end web development. I renjoy the creativity that it offers, and the ability to put different levels of polish on a site depending on how much time you wish to put into it, and that, for the most part, anything that you can think of can be done. I learned about HTML, CSS, JavaScript, Jekyll, and am now starting to learn ReactJS. I also learned that it is very time consuming to be tedious, at least in my development environment where I was simply usnig a text editor, and no framework or web development tool. In conclusion, I think this was a great was to get my feet wet in the field of front-end development, by taking much of the weight off of me and making the process more accesiible through GitHub pages. I would recommend using GitHub pages for any beginner feeling too overwhelmed by all there is to learn in the field of web development.