{"id":1310,"date":"2024-06-14T13:00:15","date_gmt":"2024-06-14T13:00:15","guid":{"rendered":"http:\/\/suimy.me\/?p=1310"},"modified":"2024-06-19T17:07:54","modified_gmt":"2024-06-19T17:07:54","slug":"how-to-publish-website-on-github-pages-in-three-simple-steps","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/06\/14\/how-to-publish-website-on-github-pages-in-three-simple-steps\/","title":{"rendered":"How to Publish Website on Github Pages in Three Simple Steps"},"content":{"rendered":"

Github Pages offers a valuable service by allowing you to host a static website directly from a Git repository. It\u2019s an ideal platform for solo developers to showcase portfolios, support open-source projects, or disseminate information about educational institutions or organizations.<\/p>\n

Many prominent projects utilize Github Pages for hosting, including well-known ones like Bootstrap<\/a>, NormalizeCSS<\/a>, and Yelp<\/a>.<\/p>\n

This tutorial will walk you through the steps to create and publish a straightforward site using Github Pages. It is assumed that you have a basic understanding of Git and its commands, such as how to create and push commits to a remote repository. If not, I recommend checking out our guide: 30 Basic Git Commands You Should Know<\/a>.<\/p>\n

Let\u2019s get started!<\/p>\n

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

First, you need a Github account to create a repository. You can name the repository anything you like; there are no specific naming requirements.<\/p>\n

\"Creating\"Creating<\/span><\/span><\/figure>\n

After creating the repository, the next step is to clone it to your local computer. If you have the Github Desktop<\/a> application installed, you can easily accomplish this by going to File > Clone Repository<\/strong> within the application.<\/p>\n

\"Cloning\"Cloning<\/span><\/span><\/figure>\n

Alternatively, you can clone the repository using the git<\/code> command-line interface (CLI), for example:<\/p>\n

\r\ngit clone https:\/\/github.com\/hongkiat\/fuzzy-adventure.git\r\n<\/pre>\n
Step 2: Create the Main Page<\/h4>\n
To set up a homepage, Github primarily looks for a file named index.html<\/code>. It can also utilize index.md<\/code> or README.md<\/code>. This file can be placed at the root of your repository or within a subdirectory to separate your site from the main source code\u2014commonly in the docs<\/code> or site<\/code> directory.<\/p>\n
In this example, I\u2019ll demonstrate adding an index.html<\/code> file in the docs<\/code> directory, supplemented with styles and scripts from Bootstrap<\/a>.<\/p>\n
\"Adding\"Adding<\/span><\/span><\/figure>\n
With the files in place, we can now add and push them to the Github repository.<\/p>\n
Step 3: Configure Page Deployment<\/h4>\n
In your Github repository, navigate to Settings > Pages<\/strong>. Here, select the source you wish to deploy as Github Pages. Since we\u2019ve placed the index.html<\/code> file in the docs<\/code> directory, choose the appropriate branch and set the directory to \/docs<\/code> under the \u201cBuild and deployment\u201d<\/strong> section.<\/p>\n
\"Configuring\"Configuring<\/span><\/span><\/figure>\n
That completes the setup for your Github Pages site. The site will be accessible through a URL pattern provided by Github. For example, if your repository is at github.com\/hongkiat\/fuzzy-adventure<\/code>, then your Github Pages site will be at hongkiat.github.io\/fuzzy-adventure<\/code>.<\/p>\n
\"Preview\"Preview<\/span><\/span><\/figure>\n
Bonus: Using a Custom Domain<\/h4>\n
Using a custom domain for your Github Pages site provides a personalized URL that\u2019s easier to remember and enhances your site\u2019s branding. Here\u2019s how to set it up.<\/p>\n
Step 1: Add DNS Record<\/h5>\n
To begin, add a DNS record to link your custom domain to Github Pages. For instance, if you want to use fuzzy-adventure.hongkiat.net<\/code>, you\u2019ll need to create a CNAME<\/code> record in your domain\u2019s DNS manager that points to hongkiat.github.io<\/code>.<\/p>\n
If you\u2019re unsure where to find your DNS manager or how to add a new DNS entry, please contact your domain registrar for assistance.<\/p>\n
Step 2: Wait for Domain Propagation<\/h5>\n
After setting the DNS record, it takes some time for the changes to propagate, which can vary from a few minutes to 24 hours. You can monitor with DNS propagation tools<\/a> like WhatsMyDNS<\/a> or by using the command below:<\/p>\n
\r\ndig fuzzy-adventure.github.io +nostats +nocomments +nocmd\r\n<\/pre>\n
Once the DNS propagation is confirmed, you might see results similar to this:<\/p>\n
\"Results\"Results<\/span><\/span><\/figure>\n
Step 3: Add Domain to Repository<\/h5>\n
After DNS propagation completes, inform Github about your custom domain. Go to your repository\u2019s Settings<\/strong>, head to the Pages<\/strong> section, and enter your custom domain in the Custom Domain<\/strong> field. Github will verify the domain and set it up. Once verified, you can also secure your site by enabling the \u201cEnforce HTTPS\u201d<\/strong> option.<\/p>\n
\"Verifying\"Verifying<\/span><\/span><\/figure>\n
Now your Github Pages site should be accessible via your custom domain!<\/p>\n
The post How to Publish Website on Github Pages in Three Simple Steps<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Github Pages offers a valuable service by allowing you to host a static website directly from a Git repository. It\u2019s […]<\/p>\n","protected":false},"author":1,"featured_media":1312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1310"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=1310"}],"version-history":[{"count":3,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1310\/revisions"}],"predecessor-version":[{"id":1320,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1310\/revisions\/1320"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/1312"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=1310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=1310"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=1310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}