Using Github Pages to Get Your Web Ideas up and Running

· Code

Back when I first started building Flybase, I had planned to include static site hosting, but then I ended up deciding it wasn't needed because there are other great tools that do the same thing, this let me focus on other areas of the system instead that people did want.

And one of the best tools for creating a static site is Github Pages, I use it for everything including hosting my main blog, the Flybase home page, the Flybase Blog and the Flybase status page

I also use it for prototyping various projects, and tutorials. It's just handy being able to create a GitHub repo and publish content as needed.

Toss in frontend systems like AngularJS or React or Vue or even vanilla HTML and JavaScript with Flybase as a database and you get powerful sites without any backends.

I won't get into using it to create a blog today another post maybe <(¬_¬<).

1. Setting up your repo.

If you haven't created a Github account yet then you should.

Github has two handy ways to create Github pages. First, you can create a github-name.github.io repo if you have never created one before.

Otherwise, you can create a branch inside any repo, call it gh-pages.

In the end, it doesn't matter what type you create, as you can add a CNAME file to either type of site and assign it to a domain.

1.1 Create a github-name.github.io site

You want to create a site called github-name.github.io, go ahead and create a repo called exactly
that: YOUR-GITHUB-USERNAME.github.io

Create a new folder on your computer and follow these steps:

  1. Create a new folder called test.
  2. git init
  3. echo "<html><head></head><body><h1>Hello</h1></body></html>" > index.html
  4. git add --all .
  5. git commit -m "first commit"
  6. git remote add origin https://github.com/github-name/github-name.github.io.git
  7. git push -u origin master

Now, if you go to your new github.io site, you will see your site.

1.2 Create a gh-pages powered site

This step works very close to the last step. In fact, I recommend doing the last step first so that you have a username.github.io site created, then you can create as many gh-pages repos as you want.

Now, create a new repo inside your Github account. For the purposes of this chapter, we’ll call the repo `test.

As before, create a new folder on your computer and follow these steps:

  1. Create a new folder called test
  2. git init
  3. git remote add origin https://github.com/github-name/test.git
  4. git checkout -b gh-pages
  5. echo "<html><head></head><body><h1>Hello</h1></body></html>" > index.html
  6. git add --all .
  7. git commit -m "first commit"
  8. git push -u origin gh-pages

This is set up the site as a directory off of your existing github.io site, so you can go to http://YOUR-GITHUB-USERNAME.github.io/test and see your site.

You can also edit or create files directly from your github account.

2. Adding a domain name

Ok, now we want to point this site to our static Github Pages site.

  1. In your repo, create a file called CNAME
  2. Add one line to the CNAME file, which is the domain name you want to use.
  3. git add --all .
  4. git commit -m "custom domain"

This final step depends on if you set up a github-name.github.io site, or a gh-pages powered site.

If you did the github-name.github.io type site, then run:

git push -u origin master

Otherwise, run:

git push -u origin gh-pages

Now go to your DNS provider, such as Godaddy, hover, namecheap or cloudflare and set the domain record as follows:

mydomain.com CNAME github-name.github.io

As you create new GitHub Pages sites, you can use the same record as above, just change the domain to what you want to use.

Closing

So you've got a quick way to create static web sites, either for landing pages, or for larger site ideas when combined with other tools.

This lets you get your work out there faster, cleaner and even cost effective.




About the Author: Roger Stringer

It's all about finding that Work-Life Balance.

I spend most of my time solving problems for people, and otherwise occupying myself with being a dad, cooking, coding, speaking, learning, writing, reading, and the overall pursuit of life.

Learn More
Roger Stringer
  • LinkedIn
  • Reddit
  • Google+
  • Pinterest
  • Pocket
Comments powered by Disqus