How To Create A Blog With Hugo
Hugo is a static site generator with lightning fast rendering speed and excellent ease of use. Thanks to all of its content-oriented features, you can always focus on creating content rather than building the environment:
- With Hugo, you can build a running-anywhere static site in several minutes without concerning tedious dependencies or databases.
- You can compose your content in Markdown, the most convenient writing style, and instantaneously see the changes you've made on the web.
- Furthermore, you can make the most of Hugo's affluent theme repository and fast-growing community.
In this tutorial, I will show you how to install and use Hugo to build a static blog site on a CentOS-based Vultr LEMP server instance.
Login to your instance as a non-root user with sudo permissions. See how to create such a user in this article.
Step 1: Install the Hugo program
Hugo can be installed on almost all of the mainstream platforms. For CentOS, you just need to download the latest program file in a
.tar.gz archive and unzip it to a convenient location. At the time of writing, the latest version is 0.15.
sudo yum update -y sudo yum install git -y cd ~ wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz tar -zxvf hugo_0.15_linux_amd64.tar.gz sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo
Test your installation with the following command:
Step 2: Build your site
With Hugo, you can build your site from within any folder on your server. Here, I built a site in the directory
mysite/ under my home directory.
cd ~ hugo new site ~/mysite
Run the following commands to see the site's architecture:
cd mysite ls -lF
As you see, the site's current architecture resembles:
With another two to-be-created directories,
public/, the whole architecture of a Hugo site is compact yet comprehensive.
As a starter, know that your content should be stored in the directory
Step 3: Install themes from the Hugo repository
To install all themes from the Hugo repository, run the following commands. These will create a directory named
themes/ in your site directory and download all of the themes from the Hugo theme repo.
cd ~/mysite/ git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes
If you just want to install a single theme, visit the Hugo theme repo to determine your favorite theme. Copy its URL and paste it into the
git clone command below.
cd ~/mysite/ mkdir themes cd themes git clone https://github.com/jaden/twentyfourteen
Step 4: Make some basic configuration changes
The file named
config.toml in your site directory contains the global configuration for your Hugo site. Edit the file with a text editor to make some basic configuration changes as listed below. Remember to replace the values according to your specific conditions.
baseurl = "http://[YourSiteIP]/" languageCode = "en-us" title = "Your Site Name" theme = "twentyfourteen"
Step 5: Compose your content
In your site directory, input the following command to create a content page in the directory
cd ~/mysite/ hugo new post/about.md
Open the file in a text editor, the format of the file should resemble the following.
+++ date = "2015-12-25T03:21:23Z" draft = true title = "about" +++
Between the two lines of
+++ lies the meta information about your content page. Here, you can remove the line
draft = true and modify the title line as you wish.
Under the second
+++ line, add the content that you want to display on the web page. Remember to write your content in the Markdown language.
## This is an H2 headline Text goes here.
After finishing this edit, keep the text editor open for later use.
Step 6: Adjust your content with the Hugo server
You can use Hugo's built-in web server to deploy your site, which can instantaneously display your changes on the web page as soon as you modify your content in a text editor.
Open another terminal, configure the
iptables rules to allow your access to your site on Hugo server's default port 1313:
sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT
Launch the Hugo server:
hugo server --bind="[YourServerIP]"
Visit your site from a browser:
Now, you can try to edit the content of the page file in the previous terminal or add/remove a page file. You will find that any modifications in the
content/ directory will be reflected simultaneously on your browser screen. This is a great feature for a busy blogger because you can always immediately see your modifications for better composing experiences.
After you finish your edit, press
Ctrl+C to stop the Hugo server.
Step 7: Publish your site
Now it is time to publish your site on the web. Run the following commands and Hugo will generate all of the static content suitable for publishing within the
cd ~/mysite hugo
Note: Hugo will not delete old files which were generated previously when you run the commands above. In order to avoid unexpected results, you can always delete the
public/ directory before you run the
hugo command or specify a new output destination as shown in the following command.
Since the Nginx web server has already been running on the server, all you need to do is copy the content of the
~/mysite/public/ directory or other custom destination directories to your web directory
Delete the original files:
cd /usr/share/nginx/html/ sudo rm -rf background.jpg index.php logo.png
Copy your static site files to the web directory:
cd ~/mysite/public sudo cp -R ~/mysite/public/. /usr/share/nginx/html/
That's it. Now you can visit your super fast static site from your browser:
To see more details, use the command
hugo help or visit the Hugo official website.