Tag: github

Host a Free Static Website in 5 minutes with Github Pages

Github allows for the hosting of static Html sites for users, and organizations. This can be super valuable for developer starting off who wants to do something simple like host a personal resume website or a technical blog without the overhead costs.

The first version of this blog was actually hosted on Github pages when I started it fresh out of college. I used a combination of Jekyll, Html and Css. My posts were generated with a custom Rake task, and edited in Vim.

You can use a Github site for your personal account however I already have so I’ll be creating a new organization for this example. Make sure you are logged into Github and create a new organization by going to this url https://github.com/organizations/plan.

It should look something like this:

Create New Organization

Create a new public repo underneath that organization and name it <name>.github.io. Replace name with either your user name or the org’s name depending on your situation. Make sure that the name is spelled correctly and that the visibility of the project is Public.

Create the new Repository, Ensure it’s public, and named correctly

Next clone the repository onto your machine and create an index.html file. 

git clone git@github.com:<name>/<name>.github.io.git
cd <name>.github.io
touch index.html

Open your index.html and add some content. Here is my example content: 

<h1> P3rishable Blog </h1>

<h3> Loads of content </h3>

<p> Make sure to like and share </p>

Commit and push up to Github:

git add . 
git commit -m "initial commit"
git push -u origin main

Next we will go to settings and open the pages section. In here you will set the source branch to main and save. This means any time you commit to main, Github will automagically deploy out your changes. You can also find the url to the hosted site on this page as well as the section for making it a custom domain.

Repository Settings -> Pages

Then if we access our site through the provided link https://p3rishable-blog.github.io/ on the settings page. We will see the following content rendered:

You can also use themes provided by Github or even use a secondary tool like Jekyll to create a static website. I focused on raw Html and Css because I think that is more useful when designing a unique looking site that stands out. You can see an example of my personal resume I have hosted on GitHub pages, with a custom url. https://www.alexmyers.net/

Easy Blogging with Rake and Jekyll

Fresh out of College, I read everything on how to make yourself more marketable. Several places suggested, write a blog to get your name out there. However, as a graduate, I was not looking to drop money on a hosted blog or pay for a server to run my own. Also there is something awkward about dot wordpress dot com sites, that just makes people run away from them.

In walks GitHub pages. A useful tool for you to make a simple site for a project, but as you can work on yourself, You could argue that you are your biggest project. So while building this blog I decided to use Jekyll since GitHub will allow me to host it for free on their servers.

In order to make the process easier I created a Rake file too easily create new Posts. 

# Ask for title
def ask message
  print message
  STDIN.gets.chomp
end
title = ask('Title: ')

#Create new a post
desc "Default 'rake' command creates a new post"
task :default do
  filename = "#{Time.now.strftime('%Y-%m-%d')}-#{title.gsub(/\s/, '_').downcase}.markdown"
  path = File.join("_posts", filename)
  if File.exist? path; raise RuntimeError.new("File exists #{path}"); end
  File.open(path, 'w') do |file|
    file.write <<-EOS
---
layout: post
title: #{title}
date: #{Time.now.strftime('%Y-%m-%d %k:%M:%S')}
---

Content goes here
    EOS
  end

  # open the file in vim
  sh "vim #{path}"

end

Then to create a new blog post you just run:

rake