View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content
View mbirabhadra's full-sized avatar

Block or report mbirabhadra

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mbirabhadra/README.md

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

ElementTagExample usage
Headerh1<h1>Title of page</h1>
Linka<a href="http://example.com">Check out this link</a>
Imageimg<img src="http://www.example.com/image.jpg">
Paragraphp<p>This is a new paragraph.</p>
Line breakbrThis 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)

Popular repositories Loading

  1. TCPIP-Delphi-Indy10-Client-Server-Demo TCPIP-Delphi-Indy10-Client-Server-DemoPublic

    Learn Indy with these examples

    Pascal 8 4

  2. ColorRecHelper ColorRecHelperPublic

    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 …

    Pascal 3 1

  3. RosettaCodeData RosettaCodeDataPublic

    Forked from acmeism/RosettaCodeData

    RosettaCode Data Project

    1 1

  4. delphi delphiPublic

    Forked from eversonturossi/delphi

    Pascal 1

  5. Indy9-10-TCP-RecordExchangeD7-DXE5 Indy9-10-TCP-RecordExchangeD7-DXE5Public

    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

    1 1

  6. RADRecorder RADRecorderPublic

    1 1