|
|
Please Note, due to scaling issues with GitHub, the custom domain name, kevinjconnell is not https however the underlying website is. This is due to the hundreds of thousands of sites built on GitHub servers using DNS CName which is exactly the situation here. So if you want to go to the secure version go here: https://mo4dawg.github.io/
I decided to build the site from scratch just for fun rather than use GitHub pages which have some nice templates. The primary pattern I used to create the site was from www.jmcglone.com/guides/github-pages/ hosted by Jonathan McGlone. If you follow his instructions step by step you will end up with a plain grey site with no photos or interesting details but you will find it a robust platform for building your site.
To get started is free, just go to github.com and sign-up and you will end up with a site called username.github.io. My next step was to go to Go Daddy and buy my domain name. I was super excited to find kevinjconnell.com available. See my blog dated May 24. From there I was able to use a DNS CName entry to alias my new site name, kevinjconnell.com to point to the GitHub domain where it is hosted.
You can download for free a GitHub app but I found it easiest to do all my work directly on github.com. There are a couple tutorials to show you how the tool works. Remember Git is basically a code repository so it is check out, edit, and then commit. For complex changes you can use a branch but I just went for it on the main branch. If you mess up you can also revert back or compare to a previous version.
I used Google a lot and I used www.w3schools.com because web development has grown up since I last played with it.
Photos were an interesting trick. I created an Issue on my GitHub site and drug the photo into the issue comments. An issue is a bug report and is handled separately from your web pages. After the issue is saved I right clicked on the photo and copied its link address into the html. This was one of those discoveries through Google. Also, make your photos small, compressed to 336 x 448 or so. For alignment use tables. Do not use frames! I also played around with resizing as you mouseover and mouseout the photos. I included an additional larger size if you click on the photos.
The primary font used is Google's Roboto, sans-serif. The header and footers are a playful dichotomy of Comic MS Sans. Fonts continue to be an area of experimentation and change.
A later enhancement was adding the tags so blog posts can be categorized. It was difficult to get the new page to blend into the site but again I found a great foundational start here. I was surprised to see this worked. But the formatting took me a couple hours to fix.
If you want to make a page different from the rest you can create a separate css file and a separate layout page putting them under the corresponding folders. This has been real fun as I have experimented with background photos for the home page. A single edit of the hompage index.html from the default layout to the home layout can immediately toggle between the trial vesion and the original version.
Lastly this site is a work in progress.
Kevin
If there is ever something visible below here it's just me playing around with new concepts
I'm going to update the photo page with thumbnails and a picturebox. Need to do a bunch of image management before it can go live because I need inividual thumbnails and full size photos in my repository. It's nice to see I have my POC working. It's a simple DOM manipulation function with onclick.
Pick a Theme!
|
|
|