Hi there! This is my first post on this site and I think it’s a nice tradition to start it from the explanation on how this site was setted up.

Why a static website Link to heading

In short the combination of these gives you a very simple, fast and reliable personal blog:

  • Hugo - for generation a static website
  • GitHub Pages - for hosting your static website
  • Namecheap - for buying the domain name of your site

Additionally it worth mentioning that the costs of this setup is that your domain name will cost, Hugo and GitHub Pages are free for small blogers.

While setting up my own website I came across several good instructions from more experienced blogers, which you can consider worth reading too. For example, you can read how to install Hugo on Mac from Dillon, or a well-structured guide from Christoper Hart.

These guys made a very good job on explaining everything, so in my guide I concentrate mostly on fullness of the istallation.

Step 1: Buy a Domain Name Link to heading

Purchase a domain name from Namecheap or another domain registrar. Do not purchase any fancy additional services as we only need the domain name.

Step 2: Install Hugo and Git Link to heading

First, you need to install Hugo and Git. This is the only distro-specific step in the entire process, and I’m using EndeavourOS, so I’m using pacman. To install Hugo and Git, run the following commands in your terminal:

sudo pacman -S hugo git

These commands will install Hugo and Git on your system, which are required for creating and publishing your static website.

Step 3: Create a new GitHub repository Link to heading

Next, you need to create a new GitHub repository for your website. Go to GitHub.com, log in to your account, and click the “New repository” button. Give your repository a name (e.g., name-of-your-site.github.io) and click the “Create repository” button.

Step 4: Create local folders for your future site Link to heading

To manage your site easily on your local machine, you’ll need to create directories with the following structure:

/name-of-your-site/public

The name-of-your-site directory will be used as the Hugo root directory.

The public directory will be used to configure your GitHub Pages.

Step 5: Install the hugo-coder theme Link to heading

Change to the root directory of your Hugo site and install the hugo-coder theme by running the following commands:

cd name-of-your-site
git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

Step 6: Configure the website Link to heading

Copy the configuration file from the exampleSite directory to the root directory of your Hugo site by running the following command:

cp -av themes/hugo-coder/exampleSite/* .

Then edit the config.toml file to update the settings for your website. For example, you can change the base URL to https://your-site-address/.

Step 7: Create and publish content Link to heading

Create content for your website by creating new markdown files in the content/ directory. You can use the example files in the exampleSite/content/ directory as a starting point.

Once you have created some content, you can preview your website locally by running the following command:

hugo server -D

This will start a local web server at http://localhost:1313/, where you can view your website.

Step 8: Set up your new gh-pages branch Link to heading

Clone your website repository to your local machine and create a new branch called gh-pages by running the following commands:

git clone https://github.com/your-git-name/your-website-repository.git cd your-website-repository git checkout -b gh-pages

After you have created your gh-pages branch, go to the “Settings” of your GitHub repository and click on the “Pages” tab. Under “Source,” select the “gh-pages” branch and click “Save.” This will configure your repository to use the new branch for hosting your website.

Step 9: Publish the website Link to heading

Once you are satisfied with your website, you can publish it to GitHub Pages by running the following commands:

hugo
cd public
git add .
git commit -m "Publishing to gh-pages"
git push origin gh-pages

This will generate your website in the public/ directory and push it to the gh-pages branch of your GitHub repository. Your website should now be live at https://your-repository.github.io/.

Please check the website is working as it will be down for quite a while after steps 10 and 11.

Step 10: Configure SSL Link to heading

  1. In your GitHub repository, go to the “Settings” tab and scroll down to the “GitHub Pages” section.
  2. Under “Custom domain”, enter your domain name (which you bought on Namecheap site) and click “Save”.
  3. GitHub will generate an SSL certificate for your domain name. This process may take a few minutes.
  4. Once the certificate is generated, select the “Enforce HTTPS” option to force HTTPS connections for your website.

Step 11: Configure DNS on Namecheap Link to heading

  1. Sign in to your Namecheap account and select the “Domain List” menu.
  2. Click on the “Manage” button next to your name-of-your-site domain.
  3. Under the “Domain” section, click on “Advanced DNS”.
  4. In the “Host Records” section, click on the “Add New Record” button.
  5. Select “CNAME Record” from the drop-down menu.
  6. In the “Host” field, enter www.
  7. In the “Value” field, enter your-repository.github.io. (with a trailing period).
  8. Leave the “TTL” field as the default value.
  9. Click on the “Save Changes” button.
  10. Next, you need to create an A record for your domain. In the “Host Records” section, click on the “Add New Record” button again.
  11. Select “A Record” from the drop-down menu.
  12. In the “Host” field, enter @.
  13. In the “Value” field, enter the IP address of the GitHub Pages server, which is 185.199.108.153 for your-repository.github.io.
  14. Repeat the previous two steps to create additional A records for the other three GitHub Pages IP addresses: 185.199.109.153, 185.199.110.153, and 185.199.111.153.
  15. Finally, click on the “Save Changes” button to save your DNS settings.

It may take some time for the DNS changes to propagate, but once they do, you should be able to access your website at name-of-your-site.

Step 12: Relax Link to heading

Remember that DNS propagation can take some time, so don’t worry if your site isn’t immediately available. It may take up to 24-48 hours for your domain name to fully propagate.

Take some time to relax and come back tomorrow to check if your site is available. Once it’s up and running, start enjoying your new blog!