Giter Club home page Giter Club logo

Simple Website Using Github Pages

Make a simple HTML website and publish it using Github Pages.
View example: https://cplmakerlab.github.io/simple-website-template/

Setup

  • Create a Github account (if you don't have one yet)
  • Fork this repository to copy it to your account, i.e. github.com/username/simple-website-template (you can rename it as well)
  • Make sure you see the gh-pages branch (it should be the default)
  • Edit website files on the gh-pages branch, then wait a minute or two for Github Pages to update and deploy your site.
  • View your site: https://username.github.io/simple-website-template

How does this work?

This website template uses CSS & JS to hide and show different parts of index.html and uses Github Pages to render the website from the gh-pages branch.

Things to try

  • Edit index.html and change the title of the page (both <title> in the header and <h1> in the body)
  • Upload your own logo.jpg and background.jpg images to overwrite the default images.
  • Edit index.html and change the content displayed in home, about, and contact.
  • Edit index.html and change the content in the footer region.
  • Edit style.css and change the link color and font style.
  • Update the metadata in the header portion of index.html (this is used by search engines and browsers).

Common tags

Element Tag Example usage
Header h1 <h1>Title of page</h1>
Link a <a href="http://example.com">Check out this link</a>
Image img <img src="http://www.example.com/image.jpg">
Paragraph p <p>This is a new paragraph.</p>
Line break br This is the first line of a poem. <br> This second line will appear below the first.

Further reading

Where can I learn more about HTML, CSS, JS, and webdevelopment in general?

Check out Mozilla Developers Network (https://developer.mozilla.org). They have lots of good resources, tips, and tutorials to further your knowledge.

Can I configure a custom domain for my site, i.e. johnnymakerportfolio.com?

Yes! Github Pages supports custom domain configuration. However, you will need to buy a domain name from a registrar such as NameCheap or Gandi -- the cost is usually around $10 - $15 a year.

Can I add tracking?

Yes! You can embed Google Analytics to see who is visiting your site.

Can I add a blog, etc?

Not really. This template works best for simple sites. For a simple blog check out Jekyll, which is a static site generator that also works on Github pages. For more functionality, you will probably need a content management system (CMS) such as Wordpress, Drupal, or Django. A CMS will require additional setup and a website host, such as Dreamhost.

Can I sell products or add a store?

Not easily, but if you are determined you can add Paypal buttons or something like SnipCart. If you are interested in selling many products online or need a full store, check out Woocommerce, BigCartel, Shopify, or Etsy.

Can I make separate HTML files for each page?

Yes, you can use Javascript AJAX calls to pull in external content into your index.html page. See script.js for more details.

I heard I need to be using XYZ framework (Bootstrap, React, etc).

Web technology changes rapidly, and it easy to get lost in the hype. Learning the basics of HTML, CSS, and JS is a good place to start. From there, you can explore different frameworks and libraries to see what interests you.

I don't want to write code or deal with website hosting. Are there any website builders you recommend?

  • Google Sites (free)
  • Squarespace
  • Wix
  • Strikingly (free tier includes single product store)
  • Big Cartel, Shopify, Etsy (e-commerce)

mbirabhadra's Projects

colorrechelper icon colorrechelper

Jerry Dodge's ColorRecord Helper for easy manipulating of Web Colors, Delphi Colors. XE5 Example App, Use-cases, and bad but useful (to me) enhancements. Performs RGB - HSV -TColor - String - HTML Hex - Delphi Hex (- CMYK untested by me!) Manipulations

delphimidiplayer icon delphimidiplayer

By de Koning inc. Based on David Churcher's orginal MIDI Components | XE5 Compiled with Demo

fasterthread icon fasterthread

FasterThread delphi component XE5 compiled and with executable

indy9-10-tcp-recordexchanged7-dxe5 icon indy9-10-tcp-recordexchanged7-dxe5

A legacy D7 application with Indy 9 - recieving, intercepting, editing, re-transmitting a record over TCP - from and to a modern XE5 Indy 10 Client

kazip-2.0-xe5-built icon kazip-2.0-xe5-built

From the original KaZip 2.0 minus BZIP. Built in Delphi XE5. Clean and make a build of your own.

socify icon socify

:rocket: Socify is an open source social networking platform written in Ruby on Rails

synapse icon synapse

Synapse Library for Delphi - XE5 Tested. Alternative to Indy.

tmagnetic-delphi icon tmagnetic-delphi

Delphi XE5 Compiled TMagnetic Pas and Demo Project for Snapping of Forms together like Winamp

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.