{"id":1882,"date":"2025-05-15T10:47:00","date_gmt":"2025-05-15T07:47:00","guid":{"rendered":"https:\/\/upcloud.com\/global\/us\/resources\/tutorials\/how-to-deploy-and-configure-hugo-for-fast-and-seo-friendly-static-websites\/"},"modified":"2025-05-15T10:47:00","modified_gmt":"2025-05-15T07:47:00","slug":"how-to-deploy-and-configure-hugo-for-fast-and-seo-friendly-static-websites","status":"publish","type":"tutorial","link":"https:\/\/upcloud.com\/global\/resources\/tutorials\/how-to-deploy-and-configure-hugo-for-fast-and-seo-friendly-static-websites\/","title":{"rendered":"How to Deploy and Configure Hugo for Fast and SEO-Friendly Static Websites"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Developers need fast, secure, and efficient ways to build modern websites\u2014whether it&#8217;s a personal blog, product landing page, or documentation site. A static site generator like <a href=\"https:\/\/gohugo.io\/\" target=\"_blank\" rel=\"noopener\">Hugo<\/a> is that\u2019s fast, easy to use, and highly customizable is a great solution to deploy and pull content quickly. Unlike traditional CMSs that rely on databases and server-side rendering, Hugo generates pre-rendered static HTML files, making your site lightning-fast, secure, and easy to deploy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But performance doesn\u2019t stop at build time. To fully take advantage of Hugo\u2019s speed, you need reliable hosting that can keep up. <a href=\"https:\/\/upcloud.com\/global\/\">UpCloud<\/a> offers just that\u2014scalable, SSD-backed infrastructure, custom firewalls, and fast networking to ensure your site stays online and loads in seconds.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this guide, we&#8217;ll walk you through everything you need to build a Hugo static site, configure it for optimal performance and SEO, and deploy it to UpCloud for fast delivery.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Hugo?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo is an open-source static website framework designed for developers who prioritize speed, simplicity, and flexibility. As one of the most popular static site generators, Hugo empowers you to build high-performance websites without the overhead of traditional, database-driven CMS platforms like WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Built in Go (Golang), Hugo is exceptionally fast and capable of generating thousands of pages in seconds. This speed makes it ideal for developers who want a responsive workflow and quick deployment cycles. When you run a Hugo build, it converts your content (written in Markdown or other supported formats) into pre-rendered static HTML files, ready to be served by any web server or <a href=\"https:\/\/www.ibm.com\/think\/topics\/content-delivery-networks\" target=\"_blank\" rel=\"noopener\">CDN.<\/a> This approach results in fast page loads, minimal server-side dependencies, and fewer security vulnerabilities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While Hugo is not a CMS in itself, it\u2019s flexible enough to work seamlessly with headless CMSs like <a href=\"https:\/\/www.netlify.com\/blog\/netlify-cms-to-become-decap-cms\/\" target=\"_blank\" rel=\"noopener\">Netlify CMS<\/a>, or <a href=\"https:\/\/www.sanity.io\/\" target=\"_blank\" rel=\"noopener\">Sanity.<\/a> This allows teams to combine the performance of static sites with the convenience of visual content editing, making Hugo suitable for both solo developers and collaborative teams.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use Hugo with UpCloud for Static Websites?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When it comes to building modern static websites that are fast, secure, and easy to manage, Hugo stands out as one of the best tools available. Here&#8217;s why:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fast Builds<\/strong>: Hugo can generate sites with thousands of pages in just seconds, making it perfect for large projects.<\/li>\n\n\n\n<li><strong>Easy Content Management<\/strong>: All content is written in plain Markdown files, which are easy to write, edit, and version control\u2014no special tools required.<\/li>\n\n\n\n<li><strong>Enhanced Security<\/strong>: Since there\u2019s no dynamic content generation on the server, Hugo sites are less vulnerable to common web attacks.<\/li>\n\n\n\n<li><strong>Highly Customizable<\/strong>: With support for themes and flexible templating, Hugo lets you fully control your site\u2019s design and structure.<\/li>\n\n\n\n<li><strong>No Backend Needed<\/strong>: Hugo sites are completely static, so you don\u2019t need databases, plugins, or complex back-end logic.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you pair it with UpCloud\u2019s high-performance hosting, you get a deployment setup that\u2019s both powerful and efficient\u2014ideal for everything from personal blogs to large documentation sites. UpCloud offers features that align perfectly with the way Hugo works like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SSD-Backed Performance<\/strong>: UpCloud uses high-speed MaxIOPS block storage, ensuring fast deployments and smooth content delivery.<\/li>\n\n\n\n<li><strong>Global Infrastructure<\/strong>: With data centers around the world, you can deploy your site close to your users for faster load times and lower latency.<\/li>\n\n\n\n<li><strong>Scalable and Cost-Efficient<\/strong>: Whether you&#8217;re starting small or running a high-traffic site, UpCloud offers flexible, scalable plans that fit your needs and budget.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites for Deploying Hugo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before you can deploy your Hugo static website to a host like UpCloud, make sure you have the right tools and access in place. Here\u2019s what you\u2019ll need:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hugo Installed Locally<\/strong><br>You\u2019ll need to install Hugo on your development machine to build your site. To verify your Hugo installation, open a terminal and run: <code>hugo version<\/code>. This command will display your installed version if Hugo is properly set up. If it\u2019s not installed yet, follow the official <a href=\"https:\/\/gohugo.io\/installation\/\" target=\"_blank\" rel=\"noopener\">Hugo install guide<\/a> for your operating system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>An UpCloud Server<br><\/strong>To deploy your website, you\u2019ll need access to a server or cloud instance on UpCloud. If you haven\u2019t created one yet, you can sign up and spin up a cloud server in minutes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Basic Command Line Knowledge<br><\/strong>Familiarity with terminal commands is essential. You\u2019ll be using the command line to build your site, configure SSH access, and push files to your UpCloud server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installing Hugo: A Step-by-Step Guide<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have confirmed that everything needed for this application is in place, let us get started.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First of all, let&#8217;s look at how to install Hugo on our computer(macOS, Windows, and Linux users):<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose the method based on your operating system:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For macOS (using Homebrew):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nbrew install hugo<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For Windows (using Chocolatey):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">powershell\n\nchoco install hugo -confirm<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For Ubuntu\/Debian-based Linux (using apt):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nsudo apt update \nsudo apt install hugo<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For RedHat\/CentOS-based Linux (using yum):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nsudo yum install hugo<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Verify the Installation<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To make sure Hugo is installed correctly, run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nhugo version<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 3: Create a New Hugo Site<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Once installed, you can initialize a new Hugo project by running:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nhugo new site my-documentation<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Replace my-documentation with your desired project name. This command creates the folder structure for your new Hugo site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once created, this is what the project structure will look like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">perl\n\nmy-documentation\/\n\u251c\u2500\u2500 archetypes\/     # Content templates\n\u251c\u2500\u2500 content\/        # Your Markdown pages\n\u251c\u2500\u2500 layouts\/        # Custom HTML templates\n\u251c\u2500\u2500 static\/         # Static assets like images, CSS, JS\n\u251c\u2500\u2500 themes\/         # Site themes\n\u251c\u2500\u2500 config.toml     # Main configuration file\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Building and Testing a Static Website with Hugo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once your Hugo project is set up, it\u2019s time to start building content, applying a theme, and testing your site locally. The Hugo static site generator makes this process fast and efficient.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Create Pages Using Markdown<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo uses <strong>Markdown files<\/strong> for content, which makes writing and organizing pages easy. To create a new page or post:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nhugo new posts\/blog.md<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This creates a new Markdown file in the <code>content\/posts\/<\/code> directory. Open the file and start writing your content using plain Markdown syntax.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each content file starts with front matter (in YAML, TOML, or JSON), where you define metadata like title, date, and draft status. Once written, Hugo\u2019s templating system will render this Markdown into a fully styled HTML page based on your chosen theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/1-hugo-frontmatter-1024x187.png\" alt=\"-\" class=\"wp-image-65953\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Configure a Theme&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the sake of this demo, we will be using an free theme from <a href=\"https:\/\/themes.gohugo.io\/themes\/hugo-book\/\" target=\"_blank\" rel=\"noopener\">Hugos\u2019s page <\/a>for this documentation project. Hugo&#8217;s theming system allows you to quickly change the look and feel of your website.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can configure your projects to use this theme using the following commands:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\ncd my-documentation\ngit init\ngit submodule add https:\/\/github.com\/alex-shpak\/hugo-book themes\/hugo-book\ncp -R themes\/hugo-book\/exampleSite\/content.en\/* .\/content<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/2-hugo-start-building-site-1024x321.png\" alt=\"-\" class=\"wp-image-65956\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This command creates a folder called <strong>Themes<\/strong> in your project directory, which consists of all the components of the theme selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/3-hugo-toml-config.png\" alt=\"-\" class=\"wp-image-65959\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To preview your site locally to ensure everything looks and works as expected, run the following command in your in your terminal to start the Hugo development server.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nhugo server<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The theme we are working with should render like this in your browser. Since this is not exactly what we want in our documentation, you can go ahead and customize it to suite your desired needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/4-hugo-example-site-1.png\" alt=\"-\" class=\"wp-image-65966\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Customize Your Theme<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So since I need this theme for documentation, I will be customizing the project to suit my project documentation. I will change the title and indicate the name of the theme I am using for this article in the hugo.toml file(or config.toml file).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/5-hugo-customise-config-1024x348.png\" alt=\"-\" class=\"wp-image-65964\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also add more files to your project to modify it with the same format as earlier. Using this command, create an html file inside your themes folder that will serve as the home page for our documentation.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nhugo new themes\/hugo-book\/layout\/index.html<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After customizing to your project&#8217;s needs, your output should look like this<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note: you can make a lot more changes to your project to fit your needs using <a href=\"https:\/\/gohugo.io\/documentation\/\" target=\"_blank\" rel=\"noopener\">the Hugo docs<\/a>.&nbsp;Now that is working, let&#8217;s proceed to build the application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/6-hugo-documentation.png\" alt=\"-\" class=\"wp-image-65969\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Build Hugo App<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;re satisfied with your local preview, stop the Hugo server (press Ctrl + C in the terminal).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You need to build the static files that will be deployed to the cloud server. In your terminal, within your Hugo site directory, run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">bash\n\nhugo <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This command generates the complete static website in a new directory named public at the root of your Hugo project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/7-hugo-project-statistics-1024x273.png\" alt=\"-\" class=\"wp-image-65970\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Deploying a Hugo Website to UpCloud<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that your Hugo site is built, it\u2019s time to deploy it to a live server so it can be publicly available. Hosting it on an UpCloud server gives you full control, performance, and flexibility. Here is how you can deploy your Hugo app to UpCloud:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Create an UpCloud Server <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To deploy your Hugo app, start by creating a new cloud server on UpCloud. During setup, connect your SSH keys to enable secure, password-less access. UpCloud\u2019s user-friendly dashboard makes this process straightforward, even for first-time users. For step-by-step instructions, <a href=\"https:\/\/upcloud.com\/global\/docs\/guides\/deploy-server\/\">refer to UpCloud\u2019s official documentation<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/8-hugo-connect-ssh-1024x692.png\" alt=\"-\" class=\"wp-image-65972\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Connect to the UpCloud Server<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, access your UpCloud server using SSH by connecting with the server&#8217;s IP address and the SSH key you configured during setup. Note that UpCloud exclusively supports SSH key authentication for enhanced security. If you&#8217;re using a terminal on macOS, Linux, or Windows with WSL, run the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nssh username@your_server_ip_address<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Upload Static Files to UpCloud<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With your UpCloud server running, the next step is to transfer the contents of your Hugo project&#8217;s public directory to the server. We&#8217;ll use scp (Secure Copy) for this, which is a secure way to transfer files over SSH.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will need to create a directory manually into your UpCloud server using this command(replace with your preferred name).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo mkdir -p \/var\/www\/myproject.com\/html<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/9-hugo-set-file-permissions-1024x68.png\" alt=\"-\" class=\"wp-image-65975\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Open your local terminal and navigate to the root directory of your Hugo project (the one containing the public folder) and run the following command. This takes the pre-built static files from your local Hugo project&#8217;s public directory and securely transfers them over the internet to a specific location on your remote UpCloud server.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nscp -r public\/* &lt;your_username&gt;@&lt;your_server_ip&gt;:&lt;remote_path&gt;\/<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/10-hugo-copying-files-1024x248.png\" alt=\"-\" class=\"wp-image-65977\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Install and Configure Nginx<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To serve the static Hugo website to the public, you need a web server like<a href=\"https:\/\/nginx.org\/en\/\" target=\"_blank\" rel=\"noopener\"> Nginx<\/a> installed on your UpCloud instance. Nginx is a lightweight, high-performance web server that is well-suited for serving static content like your project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Within the UpCloud server, update the package list with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo apt update<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Install Nginx with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo apt install nginx -y<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next, you will need to create an Nginx server block (virtual host) configuration. This tells Nginx how to handle requests for your domain.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo nano \/etc\/nginx\/sites-available\/myproject.com<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the file created, input the following configurations and adjust the root directive to point to the directory where you uploaded your Hugo public files:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">server {\n    listen 80;\n    listen [::]:80;\n\n    root \/var\/www\/myproject.com\/html; # Adjust this path if necessary\n    index index.html index.htm;\n\n    server_name yourdomain.com www.yourdomain.com; # Replace with your domain(s)\n\n    location \/ {\n        try_files $uri $uri\/ =404;\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Configure a custom domain and SSL<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To make this static website accessible via an actual domain name (e.g., http:\/\/www.allweather.world\/) you will need to set up the DNS records.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the DNS management settings in the specific domain registrar you are using (where you purchased your domain name). I am using name.com for this article.<\/li>\n\n\n\n<li>Create an A record for your root domain ( @ or leave the name field blank) pointing to your UpCloud server&#8217;s IP address.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/11-hugo-dns-a-record.png\" alt=\"-\" class=\"wp-image-65980\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the domain name and update your Nginx configurations according like this:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/12-hugo-nginx-server-config-1024x410.png\" alt=\"-\" class=\"wp-image-65981\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once that is done, save your file and enable the configuration by creating a symbolic link using this command<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo ln -s \/etc\/nginx\/sites-available\/myproject.com \/etc\/nginx\/sites-enabled\/<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Then make sure you test the Nginx configuration for errors with this command. Ensure that the output shows &#8220;syntax is ok&#8221; and &#8220;test is successful.&#8221;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo nginx -t<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, restart the Nginx service<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Bash\n\nsudo systemctl restart nginx<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/13-hugo-nginx-config-check-1024x139.png\" alt=\"-\" class=\"wp-image-65983\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You should be able to access your static site using the domain name after a few minutes. This is what my Hugo documentation site looks like in the browser.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/upcloud.com\/media\/14-hugo-documentation-site.png\" alt=\"-\" class=\"wp-image-65985\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Optional: Pair with a CDN<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To boost performance even further, you can pair your UpCloud-hosted Hugo static site with a Content Delivery Network (CDN) like <a href=\"https:\/\/www.cloudflare.com\/\" target=\"_blank\" rel=\"noopener\">Cloudflare<\/a>. This will help to reduce the latency, improve load times globally, and add an extra layer of security to your static website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optimizing Hugo Websites for Performance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo provides several built-in features to optimize your website&#8217;s assets directly during the build process. For instance:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Minify CSS and JavaScript:<\/strong> This can be used to reduce file sizes and improve loading times. Hugo can automatically minify your CSS and JavaScript files. Enable this in your <code>config.toml<\/code> (or <code>config.yaml<\/code>) under the [<code>minify<\/code>] section:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Ini, TOML\n\n[minify]\n  minifyOutput = true\n  [minify.tdewolff.css]\n    keepCSSDeclarationOrder = true\n  [minify.tdewolff.js]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;Setting <code>minifyOutput = true<\/code> activates minification for all applicable output formats.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Image Optimization Tools:<\/strong> Hugo&#8217;s<code> image<\/code> processing functionality allows you to resize, crop, and convert images during the build. This ensures that you serve appropriately sized images to different devices, reducing bandwidth consumption and improving load times. For example, in your content files or templates, you can use the <code>resources.Get<\/code> and <code>.Resize <\/code>methods:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Code snippet\n\n{{ $image := resources.Get \"images\/my-image.jpg\" }}\n{{ $thumb := $image.Resize \"300x webp\" }}\n&lt;img src=\"{{ $thumb.Permalink }}\" width=\"{{ $thumb.Width }}\" height=\"{{ $thumb.Height }}\" alt=\"My Image\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This example resizes my-image.jpg to a width of 300 pixels and converts it to the WebP format (which often offers better compression and quality).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Server-Side Optimizations with Nginx<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You can also configure Nginx on your UpCloud server for faster delivery with:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Caching:<\/strong> Implementing browser caching instructs the visitors&#8217; browsers to store static assets locally after the first visit. This significantly speeds up subsequent page loads. Add the following to your Nginx server block configuration (<code>\/etc\/nginx\/sites-available\/<a href=\"http:\/\/yourdomain.com\" target=\"_blank\" rel=\"noopener\">yourdomain.com<\/a><\/code>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">nginx\n\nlocation ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg)$ {\n    expires 30d;\n    add_header Cache-Control \"public\";\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gzip Compression:<\/strong> Gzip compression reduces the size of text-based assets (HTML, CSS, JavaScript, XML) transmitted over the network. Enable it in your Nginx<code> http<\/code> block (usually in <code>\/etc\/nginx\/nginx.conf <\/code>or <code>\/etc\/nginx\/conf.d\/gzip.conf)<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">Nginx\n\ngzip on;\ngzip_types text\/plain text\/css application\/json application\/javascript text\/xml application\/xml application\/xml+rss text\/javascript;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After modifying the Nginx configuration, remember to test it with sudo <code>nginx -t <\/code>and restart Nginx with <code>sudo systemctl restart nginx<\/code>.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How UpCloud Enhances Performance<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">UpCloud&#8217;s infrastructure is designed for high performance, which directly benefits your Hugo static website. Its robust and <a href=\"https:\/\/upcloud.com\/global\/docs\/products\/networking\/utility-network\/#network-speed\">low-latency network<\/a> ensures fast data transfer between the server and your visitors, contributing to quicker page load times. UpCloud&#8217;s deployment of new servers featuring <a href=\"https:\/\/upcloud.com\/global\/docs\/changelog\/2025-04-03-epyc-turin\/\">AMD EPYC Turin processors<\/a> also significantly enhances performance for hosted Hugo websites.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These cutting-edge CPUs offer a 30-40% performance boost and faster DDR5 memory, leading to quicker processing and reduced latency for serving static files.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another unique feature that improves application performance is the UpCloud CLI; deploying a new cloud server with UpCloud takes but a single command. This speed and efficiency in infrastructure provisioning perfectly complements Hugo&#8217;s rapid build times.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hugo stands out as an excellent static website generator, offering remarkable speed in build times, inherent security due to the lack of dynamic content processing, and exceptional flexibility through its theming system and content organization. Pairing Hugo with UpCloud further amplifies these benefits for your static site.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UpCloud&#8217;s infrastructure delivers superior speed and performance, ensuring your site loads quickly for visitors worldwide. Its scalable architecture allows your hosting to grow seamlessly with your website&#8217;s traffic, providing a reliable and robust foundation.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To experience this scalability and speed firsthand, start your <a href=\"https:\/\/upcloud.com\/global\/\">free trial with UpCloud.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>What is Hugo, and why should I use it?<\/strong>\n<ul class=\"wp-block-list\">\n<li>Hugo is a fast and flexible static website framework for generating pre-rendered HTML files. It\u2019s ideal for creating high-performance websites with minimal resources.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>How do I install Hugo?<\/strong>\n<ul class=\"wp-block-list\">\n<li>Install Hugo using package managers like Homebrew or Chocolatey, verify installation with hugo version, and initialize a project with hugo new site.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>How can I deploy a Hugo website on UpCloud?<\/strong>\n<ul class=\"wp-block-list\">\n<li>Use hugo build to generate static files, upload them to an UpCloud server, and serve them using Nginx.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>What makes Hugo fast for static websites?<\/strong>\n<ul class=\"wp-block-list\">\n<li>Hugo\u2019s Go-based architecture allows rapid builds, and its pre-rendered HTML files reduce server processing time for faster delivery.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Why choose UpCloud for hosting a Hugo site?<\/strong>\n<ul class=\"wp-block-list\">\n<li>UpCloud\u2019s high-speed SSD storage, global network, and affordable scalability make it an ideal hosting solution for static websites.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"author":83,"featured_media":53011,"comment_status":"open","ping_status":"closed","template":"","community-category":[250],"class_list":["post-1882","tutorial","type-tutorial","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/tutorial\/1882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/tutorial"}],"about":[{"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/types\/tutorial"}],"author":[{"embeddable":true,"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/comments?post=1882"}],"version-history":[{"count":0,"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/tutorial\/1882\/revisions"}],"wp:attachment":[{"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/media?parent=1882"}],"wp:term":[{"taxonomy":"community-category","embeddable":true,"href":"https:\/\/upcloud.com\/global\/wp-json\/wp\/v2\/community-category?post=1882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}