{"id":790,"date":"2024-12-07T02:10:57","date_gmt":"2024-12-07T10:10:57","guid":{"rendered":"https:\/\/www.bhavyatechnologies.com\/blog\/?p=790"},"modified":"2024-12-07T02:38:35","modified_gmt":"2024-12-07T10:38:35","slug":"creating-a-website-on-github-pages","status":"publish","type":"post","link":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/","title":{"rendered":"Creating a Website on GitHub Pages"},"content":{"rendered":"\n

In today’s digital world, having a personal or professional website is essential. While there are many hosting options available, one of the best (and free) ways to create a website is through GitHub Pages<\/strong>. Whether you’re a developer, a student, or someone looking to showcase your portfolio, GitHub Pages provides an easy and efficient way to publish your website.<\/p>\n\n\n\n

In this blog post, we\u2019ll walk you through the process of creating a website on GitHub Pages, from setting up your GitHub account to customizing your website\u2019s design. Let\u2019s dive in!<\/p>\n\n\n\n

What is GitHub Pages?<\/h4>\n\n\n\n

GitHub Pages is a service offered by GitHub that allows you to host websites directly from a GitHub repository. The best part? It’s completely free for personal and organizational use. You can use it to host static websites, blogs, portfolios, documentation, and even project showcases.<\/p>\n\n\n\n

Since GitHub Pages is designed to host static content (HTML, CSS, JavaScript), it\u2019s perfect for simple websites that don\u2019t require server-side programming.<\/p>\n\n\n\n

Prerequisites<\/h4>\n\n\n\n

Before you get started, you\u2019ll need:<\/p>\n\n\n\n

A GitHub account: <\/strong>If you don\u2019t have one yet, head over to GitHub.com and sign up.
Basic knowledge of HTML, CSS, and JavaScript:<\/strong> While you don’t need to be an expert, understanding the basics of these web technologies will help you customize your site.
A text editor: <\/strong>Use a text editor like VS Code or Sublime Text to write your HTML and CSS files.<\/p>\n\n\n\n

Step 1: Create a New Repository<\/h4>\n\n\n\n

Sign in to GitHub: Head to your GitHub account and log in.
Create a new repository:<\/p>\n\n\n\n

On the main GitHub page, click on the “New” button to create a new repository.
Name your repository something like username.github.io (replace “username” with your GitHub username). This is important because GitHub Pages will automatically recognize repositories with this format as hosting sites.
You can leave the repository as public and initialize it with a README.md (optional).<\/p>\n\n\n\n

Step 2: Set Up GitHub Pages<\/h4>\n\n\n\n

Once your repository is created, it\u2019s time to set it up for GitHub Pages.<\/p>\n\n\n\n

Go to the repository settings:<\/strong> Inside your repository, click on the Settings tab.
Scroll down to GitHub Pages:<\/strong> Under the “Code and automation” section, you’ll find the GitHub Pages option.<\/p>\n\n\n\n

Select the source:
<\/strong>For a basic site, you can choose the main branch and the \/ (root) folder.
If you have a specific folder (like \/docs), you can choose that instead.
Save: After selecting your source, click the Save button. GitHub will now generate a live URL for your website, such as https:\/\/username.github.io\/.<\/p>\n\n\n\n

Step 3: Add Your Website Files<\/h4>\n\n\n\n

Now that your GitHub Pages site is set up, you need to upload your website files.<\/p>\n\n\n\n

Clone the repository to your local machine: If you want to work locally, use Git to clone your repository.<\/p>\n\n\n\n

Create HTML and CSS files:<\/strong> In the repository folder, create your website files.<\/p>\n\n\n\n

Start with an index.html file for your homepage.
Create a styles.css file for your website\u2019s design.<\/p>\n\n\n\n

Push your files to GitHub:<\/strong><\/p>\n\n\n\n

Use the following commands to stage, commit, and push your changes:<\/p>\n\n\n\n

Check the live site:<\/strong> After a few minutes, your site will be live at https:\/\/username.github.io\/.<\/p>\n\n\n\n

Step 4: Customize Your Website<\/h4>\n\n\n\n

Once your basic site is set up, it’s time to customize it.<\/p>\n\n\n\n

Choose a theme: <\/strong>GitHub Pages offers several pre-built themes. You can use one of them by navigating to the Settings > GitHub Pages section and selecting a theme. This is a quick way to get started without needing to write CSS from scratch.
Use a static site generator: <\/strong>For more advanced websites, you might want to consider using a static site generator like Jekyll (GitHub\u2019s default), which allows you to create blogs, portfolios, and documentation sites with minimal effort.
Custom domain:<\/strong> If you have your own domain name (e.g., www.yourdomain.com), you can link it to your GitHub Pages site by configuring the CNAME file in your repository and updating your DNS settings.<\/p>\n\n\n\n

Step 5: Publish and Maintain Your Website<\/h4>\n\n\n\n

After your website is live, you can continue to update it by pushing new changes to the repository. Any changes you make to the main branch will automatically update the website.<\/p>\n\n\n\n

Here are some tips for maintaining your GitHub Pages site:<\/strong><\/p>\n\n\n\n

Regularly update content:<\/strong> Keep your content fresh and relevant. You can update your website’s text, images, or add new pages.
Monitor performance: <\/strong>While GitHub Pages is generally fast, consider using a service like Google Analytics to track your site\u2019s traffic.
Secure your site: <\/strong>GitHub Pages automatically provides HTTPS encryption for your site, making it secure by default.<\/p>\n\n\n\n

Conclusion<\/h4>\n\n\n\n

Creating a website on GitHub Pages is a straightforward and free way to share your work with the world. Whether you\u2019re building a personal blog, a professional portfolio, or hosting documentation, GitHub Pages makes it easy to get started and scale your site.<\/p>\n\n\n\n

If you\u2019ve never used GitHub before, it may take a little bit of time to get used to, but once you\u2019ve got the hang of it, you\u2019ll appreciate the control and flexibility it provides.<\/p>\n\n\n\n

So, why wait? Head to GitHub today and start building your website on GitHub Pages!<\/p>\n","protected":false},"excerpt":{"rendered":"

In today’s digital world, having a personal or professional website is essential. While there are many hosting options available, one of the best (and free) ways to create a website is through GitHub Pages. Whether you’re a developer, a student, or someone looking to showcase your portfolio, GitHub Pages provides an easy and efficient way … Continue reading Creating a Website on GitHub Pages<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[],"class_list":["post-790","post","type-post","status-publish","format-standard","hentry","category-tech-updates"],"yoast_head":"\nCreating a Website on GitHub Pages - Bhavya Technologies - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Website on GitHub Pages - Bhavya Technologies - Blog\" \/>\n<meta property=\"og:description\" content=\"In today’s digital world, having a personal or professional website is essential. While there are many hosting options available, one of the best (and free) ways to create a website is through GitHub Pages. Whether you’re a developer, a student, or someone looking to showcase your portfolio, GitHub Pages provides an easy and efficient way … Continue reading Creating a Website on GitHub Pages\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Bhavya Technologies - Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BhavyaWebTech\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-07T10:10:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-07T10:38:35+00:00\" \/>\n<meta name=\"author\" content=\"Bhavya Technologies\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:site\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhavya Technologies\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\"},\"author\":{\"name\":\"Bhavya Technologies\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\"},\"headline\":\"Creating a Website on GitHub Pages\",\"datePublished\":\"2024-12-07T10:10:57+00:00\",\"dateModified\":\"2024-12-07T10:38:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\"},\"wordCount\":878,\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"articleSection\":[\"Tech Updates\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\",\"name\":\"Creating a Website on GitHub Pages - Bhavya Technologies - Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\"},\"datePublished\":\"2024-12-07T10:10:57+00:00\",\"dateModified\":\"2024-12-07T10:38:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Website on GitHub Pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"name\":\"Bhavya Technologies - Blog\",\"description\":\"\u00a0Digital Marketing, Website design & development company in Hyderabad, India\",\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\",\"name\":\"Bhavya Web Technologies\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"contentUrl\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"width\":248,\"height\":100,\"caption\":\"Bhavya Web Technologies\"},\"image\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BhavyaWebTech\/\",\"https:\/\/x.com\/bhavyatech\",\"http:\/\/www.linkedin.com\/company\/bhavya-technologies\/\",\"http:\/\/www.youtube.com\/user\/bhavyatechnologies\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\",\"name\":\"Bhavya Technologies\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"caption\":\"Bhavya Technologies\"},\"description\":\"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.\",\"sameAs\":[\"http:\/\/www.bhavyatechnologies.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Website on GitHub Pages - Bhavya Technologies - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Website on GitHub Pages - Bhavya Technologies - Blog","og_description":"In today’s digital world, having a personal or professional website is essential. While there are many hosting options available, one of the best (and free) ways to create a website is through GitHub Pages. Whether you’re a developer, a student, or someone looking to showcase your portfolio, GitHub Pages provides an easy and efficient way … Continue reading Creating a Website on GitHub Pages","og_url":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/","og_site_name":"Bhavya Technologies - Blog","article_publisher":"https:\/\/www.facebook.com\/BhavyaWebTech\/","article_published_time":"2024-12-07T10:10:57+00:00","article_modified_time":"2024-12-07T10:38:35+00:00","author":"Bhavya Technologies","twitter_card":"summary_large_image","twitter_creator":"@bhavyatech","twitter_site":"@bhavyatech","twitter_misc":{"Written by":"Bhavya Technologies","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/#article","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/"},"author":{"name":"Bhavya Technologies","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895"},"headline":"Creating a Website on GitHub Pages","datePublished":"2024-12-07T10:10:57+00:00","dateModified":"2024-12-07T10:38:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/"},"wordCount":878,"publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"articleSection":["Tech Updates"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/","name":"Creating a Website on GitHub Pages - Bhavya Technologies - Blog","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website"},"datePublished":"2024-12-07T10:10:57+00:00","dateModified":"2024-12-07T10:38:35+00:00","breadcrumb":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/creating-a-website-on-github-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bhavyatechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Website on GitHub Pages"}]},{"@type":"WebSite","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","name":"Bhavya Technologies - Blog","description":"\u00a0Digital Marketing, Website design & development company in Hyderabad, India","publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization","name":"Bhavya Web Technologies","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","contentUrl":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","width":248,"height":100,"caption":"Bhavya Web Technologies"},"image":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BhavyaWebTech\/","https:\/\/x.com\/bhavyatech","http:\/\/www.linkedin.com\/company\/bhavya-technologies\/","http:\/\/www.youtube.com\/user\/bhavyatechnologies"]},{"@type":"Person","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895","name":"Bhavya Technologies","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","caption":"Bhavya Technologies"},"description":"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.","sameAs":["http:\/\/www.bhavyatechnologies.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=790"}],"version-history":[{"count":2,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/790\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/790\/revisions\/793"}],"wp:attachment":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}