Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

B #17

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

B #17

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 4 additions & 63 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,4 @@
# 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](https://help.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site). However, you will need to buy a domain name from a registrar such as [NameCheap](https://www.namecheap.com/) or [Gandi](https://www.gandi.net/) -- 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](https://help.github.com/en/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll). For more functionality, you will probably need a content management system (CMS) such as [Wordpress](https://wordpress.com), [Drupal](http://drupal.org), or [Django](https://www.djangoproject.com). A CMS will require additional setup and a website host, such as [Dreamhost](https://www.dreamhost.com/).

### Can I sell products or add a store?
Not easily, but if you are determined you can add Paypal buttons or something like [SnipCart](https://snipcart.com/). 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)


Hello,

World!
hi
3 changes: 3 additions & 0 deletions names.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

hi
hello