{"id":3936,"date":"2023-11-04T23:13:57","date_gmt":"2023-11-04T23:13:57","guid":{"rendered":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/"},"modified":"2023-11-05T05:48:26","modified_gmt":"2023-11-05T05:48:26","slug":"how-to-build-a-blog-with-hugo-and-netlify","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/","title":{"rendered":"How to Build a Blog with Hugo and Netlify"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Nowadays, having a personal blog is a great way to showcase your expertise, share your thoughts, and engage with a wider audience. In this tutorial, we will walk you through the process of building a blog using Hugo, a popular static site generator, and Netlify, a powerful hosting and deployment platform. By combining these two tools, you will be able to quickly create a fast and efficient blog with a streamlined development and deployment workflow.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before we get started, make sure you have the following installed on your machine:<\/p>\n<ul>\n<li>Git: <a href=\"https:\/\/git-scm.com\/downloads\">Download and install Git<\/a>.<\/li>\n<li>Hugo: <a href=\"https:\/\/gohugo.io\/getting-started\/installing\/\">Download and install Hugo<\/a>.<\/li>\n<\/ul>\n<h2>Step 1: Create a new Hugo site<\/h2>\n<p>First, let&#8217;s create a new Hugo site using the following command:<\/p>\n<pre><code class=\"language-bash\">$ hugo new site my-blog\n<\/code><\/pre>\n<p>This will create a new directory called <code>my-blog<\/code> with the basic structure for a Hugo site.<\/p>\n<h2>Step 2: Choose a theme<\/h2>\n<p>Next, let&#8217;s choose a theme for your blog. Hugo has a wide range of themes available, which you can browse on the <a href=\"https:\/\/themes.gohugo.io\/\">Hugo Themes website<\/a>.<\/p>\n<p>For this tutorial, let&#8217;s use the <code>Anatole<\/code> theme. Open a terminal window and navigate to the root of your Hugo site directory (<code>my-blog<\/code>), then run the following command to add the theme as a submodule in the <code>themes<\/code> directory:<\/p>\n<pre><code class=\"language-bash\">$ git submodule add https:\/\/github.com\/lxndrblz\/anatole.git themes\/anatole\n<\/code><\/pre>\n<p>Alternatively, you can clone the theme into the <code>themes<\/code> directory manually:<\/p>\n<pre><code class=\"language-bash\">$ git clone https:\/\/github.com\/lxndrblz\/anatole.git themes\/anatole\n<\/code><\/pre>\n<p>Once you have added the theme, open the <code>config.toml<\/code> file in the root of your Hugo site and add the following lines to specify the <code>anatole<\/code> theme:<\/p>\n<pre><code class=\"language-toml\">theme = \"anatole\"\n<\/code><\/pre>\n<p>Don&#8217;t forget to save your changes.<\/p>\n<h2>Step 3: Create some content<\/h2>\n<p>Now it&#8217;s time to create some content for your blog. Switch back to your terminal and navigate to the root of your Hugo site if you&#8217;re not already there.<\/p>\n<p>Run the following command to create a new blog post:<\/p>\n<pre><code class=\"language-bash\">$ hugo new posts\/my-first-post.md\n<\/code><\/pre>\n<p>This will generate a new Markdown file called <code>my-first-post.md<\/code> in the <code>content\/posts<\/code> directory.<\/p>\n<p>Open the newly created file in your favorite text editor and add some content to it. Feel free to use Markdown syntax to format your post. For example:<\/p>\n<pre><code class=\"language-markdown\">title: \"My First Post\"\ndate: 2021-01-01T12:00:00+00:00\ndraft: false\n\nHello world!\n\nThis is my first blog post using Hugo and Netlify. I'm really excited to share my thoughts and experiences with you. Stay tuned for more updates!\n<\/code><\/pre>\n<p>Save your changes and close the file.<\/p>\n<h2>Step 4: Preview your site<\/h2>\n<p>To preview your site locally, run the following command in your terminal:<\/p>\n<pre><code class=\"language-bash\">$ hugo server -D\n<\/code><\/pre>\n<p>This command starts a local development server and generates your site. You should see an output similar to the following:<\/p>\n<pre><code>| EN\n+------------------+-----+\n  Pages            |  16\n  Paginator pages  |   0\n  Non-page files   |   0\n  Static files     |   8\n  Processed images |   0\n  Aliases          |   0\n  Sitemaps         |   1\n  Cleaned          |   0\n\nWeb Server is available at http:\/\/localhost:1313\/ (bind address 127.0.0.1)\nPress Ctrl+C to stop\n<\/code><\/pre>\n<p>Open your web browser and navigate to <a href=\"http:\/\/localhost:1313\/\">http:\/\/localhost:1313\/<\/a> to see your blog in action. You should see your first post displayed on the homepage.<\/p>\n<h2>Step 5: Customize your site<\/h2>\n<p>The Anatole theme comes with many customization options that you can modify to suit your preferences. To find out which options are available, refer to the <a href=\"https:\/\/themes.gohugo.io\/hugo-theme-anatole\/\">theme documentation<\/a>.<\/p>\n<p>To customize your blog&#8217;s appearance, open the <code>config.toml<\/code> file in the root of your Hugo site and start making changes. For example, you can modify the site title by changing the following line:<\/p>\n<pre><code class=\"language-toml\">title = \"My Blog\"\n<\/code><\/pre>\n<p>Feel free to experiment with other configuration options and save your changes.<\/p>\n<h2>Step 6: Deploy to Netlify<\/h2>\n<p>Now that your blog is up and running locally, it&#8217;s time to deploy it to Netlify and make it accessible to the world.<\/p>\n<p>First, make sure you have a Netlify account. If you don&#8217;t have one, you can sign up for free at <a href=\"https:\/\/www.netlify.com\/\">https:\/\/www.netlify.com\/<\/a>.<\/p>\n<p>Once you&#8217;re logged in, click on the &#8220;New site from Git&#8221; button on your Netlify dashboard. Choose your Git provider and select the repository where your Hugo site is hosted.<\/p>\n<p>Netlify will guide you through a series of steps to configure your deployment settings. Here are the recommended settings:<\/p>\n<ul>\n<li><strong>Build command<\/strong>: <code>hugo<\/code><\/li>\n<li><strong>Publish directory<\/strong>: <code>public<\/code><\/li>\n<li><strong>Environment variables<\/strong>: <em>(optional)<\/em> You can set environment variables if your site requires additional configuration.<\/li>\n<\/ul>\n<p>After configuring your deployment settings, click on the &#8220;Deploy site&#8221; button. Netlify will start building and deploying your site.<\/p>\n<p>Once the deployment is complete, Netlify will provide you with a unique URL where your blog is now live. You can customize this URL by configuring a custom domain if you prefer.<\/p>\n<h2>Conclusion<\/h2>\n<p>Congratulations! You have successfully built and deployed a blog using Hugo and Netlify. Now you can start publishing articles, customizing your blog&#8217;s appearance, and sharing your thoughts with the world.<\/p>\n<p>Remember that Hugo and Netlify offer many more features and possibilities, so don&#8217;t hesitate to explore their documentation to take your blog to the next level. Happy blogging!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Nowadays, having a personal blog is a great way to showcase your expertise, share your thoughts, and engage with a wider audience. In this tutorial, we will walk you through the process of building a blog using Hugo, a popular static site generator, and Netlify, a powerful hosting and <a href=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[444,446,445,442,443,447,237,448,441],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build a Blog with Hugo and Netlify - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Blog with Hugo and Netlify\" \/>\n<meta property=\"og:description\" content=\"Introduction Nowadays, having a personal blog is a great way to showcase your expertise, share your thoughts, and engage with a wider audience. In this tutorial, we will walk you through the process of building a blog using Hugo, a popular static site generator, and Netlify, a powerful hosting and Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:26+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\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\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Build a Blog with Hugo and Netlify\",\n\t            \"datePublished\": \"2023-11-04T23:13:57+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:26+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\"\n\t            },\n\t            \"wordCount\": 714,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"build a blog\\\"\",\n\t                \"\\\"CMS\\\"\",\n\t                \"\\\"content management system\\\"\",\n\t                \"\\\"Hugo\\\"\",\n\t                \"\\\"Netlify\\\"\",\n\t                \"\\\"static site generator\\\"\",\n\t                \"\\\"website development\\\"\",\n\t                \"\\\"website hosting\\\"]\",\n\t                \"[\\\"blogging\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\",\n\t            \"name\": \"How to Build a Blog with Hugo and Netlify - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:57+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:26+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Build a Blog with Hugo and Netlify\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build a Blog with Hugo and Netlify - Pantherax Blogs","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":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Blog with Hugo and Netlify","og_description":"Introduction Nowadays, having a personal blog is a great way to showcase your expertise, share your thoughts, and engage with a wider audience. In this tutorial, we will walk you through the process of building a blog using Hugo, a popular static site generator, and Netlify, a powerful hosting and Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:57+00:00","article_modified_time":"2023-11-05T05:48:26+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Build a Blog with Hugo and Netlify","datePublished":"2023-11-04T23:13:57+00:00","dateModified":"2023-11-05T05:48:26+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/"},"wordCount":714,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"build a blog\"","\"CMS\"","\"content management system\"","\"Hugo\"","\"Netlify\"","\"static site generator\"","\"website development\"","\"website hosting\"]","[\"blogging\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/","url":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/","name":"How to Build a Blog with Hugo and Netlify - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:57+00:00","dateModified":"2023-11-05T05:48:26+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-hugo-and-netlify\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Build a Blog with Hugo and Netlify"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3936"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3936"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3936\/revisions"}],"predecessor-version":[{"id":4572,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3936\/revisions\/4572"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3936"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}