Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/boxbot6/simple-website-template-with-banner-v3

Simple HTML website template with an image banner and horizontal margins.
https://github.com/boxbot6/simple-website-template-with-banner-v3

banner-image banner-style css free github-pages github-pages-template github-pages-website horizontal-margins hosting html template website website-template

Last synced: 29 days ago
JSON representation

Simple HTML website template with an image banner and horizontal margins.

Awesome Lists containing this project

README 

        
# A simple free HTML website template for hosting on GitHub and elsewhere:



![simple-website-template-with-banner-v3-sample.png](images/simple-website-template-with-banner-v3-sample.png)



#### [Click this link to visit and try out the actual template being created from this repository and hosted on github-pages (https://boxbot6.github.io/simple-website-template-with-banner-v3).](https://boxbot6.github.io/simple-website-template-with-banner-v3)







## To copy and use the template:

* Create a new folder on your computer and name it - this folder will be your new websites root directory folder.

* Use the green '\<\> Code' button at the top of this repository's github page to 'Download ZIP' of this repository.

* Unzip the download and copy the internal contents to the new folder keeping all its subfolders intact.

* This folder now contains your new website ready to be personalised by editing the contents as outlined in the section below and when you are happy with the results you can host it for free on GitHub (as shown further down on this page) or simply move the complete new root directory folder to wherever else you wish to host it.



## To edit your new website:

* Open the index.html file from your new folder (using Notepad or another html editor) and edit the contents to create your own home page (A good beginners guide here: [HTML For Beginners The Easy Way: Start Learning HTML & CSS Today](https://html.com/)).

* (To test the website while you are editing - save changes and then click on the index.html and a browser window will open and display the results of your current edits - refresh the browser tab after saving any further edits to display subsequent changes).

* Update \ with your own info.

* Put any images you want to use into the images folder and link to them in the index.html by copying how its done for the demo images.

* Duplicate, add, remove and reposition other elements on the page as you want to suit your own purposes.

* Update any other elements\/texts on the page as required including the footer and then double-check that all the links work (see the links already included in the template for examples).

* Edit the .css file to change the website presentation and styles if needed.

* Delete or \<\!\-\- comment out \-\-\> anything not needed.

* Add any new pages you want by studying and duplicating the way the code is used for the existing pages (or just rename the existing pages to whatever you like (make sure you do a search to find and change all the references for each page!)).

* Edit the index.html files for the other pages including any new pages you have created (every page should have an index.html that is located in their own subdirectory folder) - add your own content to each of these subsequent pages as you did for the home page.

* When you are happy with everything host it on GitHub (as shown below), upload it to a hosting service or move the main root directory folder to the location where you wish to host it via your own server.



## Using free github hosting:

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository (Size\/usage limits apply: sites may be no larger than 1 GB with a soft bandwidth limit of 100 GB per month).



### github repository bit:

* Sign in to your account on [Github.com](https://github.com/), go to 'Your repositories' and select 'New' (top right).

* In 'create a new repository' give the new repository a name (this name will also apply to your website), add an optional description, keep check box 'Public' to make your repository and website created from it visible online to the general public. (don't add a README file, .gitignore or Licence here, the relevant files will be added later).

* Press 'Create repository' at the bottom.

* This will take you to Quick setup, select 'uploading an existing file'

* On the next page drag and drop all the files and folders together as a bundle from inside the new root directory folder that you made earlier in 'To copy and use the template' onto the upload section.

* Press 'Commit changes' at the bottom

* After creating the repository double-check that it is listed as Public (if not change the visibility in settings).

* Change the Licence etc. at this time if you want to.

### github-pages bit:

* Now use 'Settings' to open GitHub Pages (shown as Pages in the column on the left).

* Select Source - Deploy from a branch, select main, then save.

* Wait a few minutes for the website to be created and become active - when its done the https address will be shown in github-pages - copy the link and you can use it in the option below to replace this README.md file with a simpler one that displays just the name and description of your own website and contains the link to that new site.







Example of a simple README.md file to replace this one:



---



# HTML Website Hosting For:



### put-your-website-name-here







* [Click this link to view the website being created from this repository by github-pages.](https://put-your-github-name-here.github.io/put-your-website-name-here/)







(After creating your own website you can edit this README.md to show your own sites name above and update the https link beneath it to take you to your new websites address (find the link in github-pages)). - You can then write your own description here and if you want add an image to help visitors quickly see what your site looks like - you can then delete this comment!)



---







Code for the above example: (replace the text in your repository's README.md with this).



      # HTML Website Hosting For:



      ### put-your-website-name-here



      



      * [Click this link to view the website being created from this repository by github-pages.](https://put-your-github-name-here.github.io/put-your-website-name-here/)



      



      (After creating your own website you can edit this README.md to show your own sites name above and update the https link beneath it to take you to your new websites address (find the link in github-pages)). - You can then write your own description here and if you want add an image to help visitors quickly see what your site looks like - you can then delete this comment!)

      









Share and include the link from GitHub Pages which can be used directly or entered into a search bar for anybody to visit your site. 











**Update:** If you are having trouble getting your site to appear in google search results:



You may have to wait a few days for your GitHub repository to show up in google searches but worse still the github-pages website version (github.io) may not be indexed for many days or even weeks after you create it - there are many different reasons and remedies explaining how to get google search to index your site quicker on the internet - here are just a few pointers:

* Go to google search console to verify your site (there are various ways to do this but the easiest is probably to enter your github-sites URL, download a file and put it in the main directory of your repository, then (after waiting a couple of minutes for github-pages to update your site with the new file and the site to become active again) go back to google search console and verify it).

* Add a sitemap.xml and robots.txt to the main directory of your site to encourage google to index your site if it is crawled - it's also very important to then submit the sitemap directly to google search console as well (again, let github-pages update the changes to your site first before you do this).

* Make many external links to and from your site so it can be easily found and accessed in many different ways by the google searchbots.

* **Please note:** Images may take even longer to be indexed because a different slower googlebot is used for image crawling (you can try including the images in the sitemap to help but this doesn't really seem to make much difference - Linking to your site from as many other higher traffic sites as possible seems to be the most effective solution for quicker indexing that I have been able to find that works so far).







Visit the link below to view the website being created from this repository by github-pages.



[(https://boxbot6.github.io/simple-website-template-with-banner-v3)](https://boxbot6.github.io/simple-website-template-with-banner-v3)