How to Create a Personal Blog With Hugo and Netlify

In this article, I am going to share the step-by-step method I followed while building a blog website using a static site generator and deploying it to . I encountered some small errors during the process; I am gonna entertain those as well. Let's get started. Hugo Netlify As I am using Windows, commands may be different, follow while building your own website using Hugo. Also, I am running all commands on git bash. official docs Step 1 Create any folder on the Desktop and open . Now, time to install Hugo. git bash choco install hugo -confirm Or if you need the “extended” Sass/SCSS version: for some supported theme. Better install it from by running it as an administrator. cmd choco install hugo-extended -confirm Step 2 Now, it's time to create a new website and add a cool theme to it. You can choose any theme from the Hugo theme library. Run the below commands. // Choose your site name in place of blognerd hugo new site blognerd The above will create a new Hugo site in a folder named . blognerd It's time to add a theme to the site. See the for a list of themes to consider. I am using the theme. theme library Beautiful Hugo cd blognerd git init You can access the GitHub repo of themes by just clicking the download button on the theme page as you can see in the above picture. Now, download the theme from GitHub and add it to the site's theme directory. git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo Now, add the theme to the site configuration: echo theme = \"beautifulhugo\" >> config.toml Step 3 It's time to add some content to the newly created site. You can also add them manually, but I am creating this using commands. hugo new posts/my-first-post.md Now, open the whole folder in any code editor, I am using VS Code. Edit your post as you wish. You can see the screenshot of my editor below for a reference of the posts files. The above content may be different for the theme you are using. I am going to add one of my article contents to this post, for example, see the below screenshot. You can edit metadata between accordingly. --- Step 4 Now, is the time to test the site we created by running the Hugo server. hugo server -D //run only this command Start building sites … hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio | EN -------------------+------ Pages | 10 Paginator pages | 0 Non-page files | 0 Static files | 184 Processed images | 0 Aliases | 2 Sitemaps | 1 Cleaned | 0 Built in 4884 ms You can check the live view on http://localhost:1313/ Here’s my live view... Step 5 It's time to give the final touch to the newly created site. You can customize the theme or configure the site by opening up in a text editor and edit accordingly. In this theme, I took help from their GitHub . config.toml readme Now, time to build a static site. Run the below command after closing the Hugo server by pressing Ctrl+c hugo -D //run only this command Start building sites … hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio | EN -------------------+------ Pages | 16 Paginator pages | 0 Non-page files | 0 Static files | 184 Processed images | 0 Aliases | 5 Sitemaps | 1 Cleaned | 0 Total in 763 ms Step 6 Everything is now set. You can add more blog content or customize the site according to your requirement. Now, the final work is to deploy it to . Netlify I have Netlify CLI installed, so I am going to the final step. You can install it by going to Netlify official docs and login in to your account. After installing, run the following commands: netlify dev It will open the Netlify live server on . After checking everything on your site, close the Netlify server by pressing . Time to deploy.. http://localhost:8888 Ctrl+c netlify deploy //run only this command This folder isn't linked to a site yet ? What would you like to do? (Use arrow keys) > Link this directory to an existing site + Create & configure a new site Follow the instruction and select the directory. Now deploy production. (.) netlify deploy --prod // select public directory Hurray! Now, you can access your live website with the Netlify domain from the Netlify dashboard. I have created one other site and it's deployed, check my live website here... If You ❤️ My Content! Connect With Me on or Supports Me By Twitter Buying Me A Coffee☕ Also published here