Deploy a Hugo site
Hugo is a tool for generating static sites, written in Go. It's incredibly fast and has great high-level, flexible primitives for managing your content using Markdown and JSON.
In this guide, you'll create a new Hugo application and deploy it using Cloudflare Pages. We'll be the
hugo CLI to create a new Hugo site.
First, install the Hugo CLI, using the specific instructions for your operating system below:
Your Linux distro's package manager may include Hugo. If this is the case, you can install it directly using your distro's package manager -- for instance, in Ubuntu:
$ sudo apt-get install hugo
If your package manager doesn't include Hugo or you'd like to download a release directly, see the "Manual" section below.
$ brew install hugo
$ choco install hugo --confirm
Creating a new project
With Hugo installed, you can create a new project using
$ hugo new site my-hugo-site
$ cd my-hugo-site$ git init$ git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
You should also copy the default configuration provided by the theme into the
config.toml file. Take the following information and customize it per your site's needs:
baseurl = "/"languageCode = "en-us"theme = "terminal"paginate = 5 [params] # dir name of your main content (default is `content/posts`). # the list of set content will show up on your index page (baseurl). contentTypeName = "posts" # ["orange", "blue", "red", "green", "pink"] themeColor = "orange" # if you set this to 0, only submenu trigger will be visible showMenuItems = 2 # show selector to switch language showLanguageSelector = false # set theme to full screen width fullWidthTheme = false # center theme with default width centerTheme = false # set a custom favicon (default is a `themeColor` square) # favicon = "favicon.ico" # set post to show the last updated # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated showLastUpdated = false # Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author # updatedDatePrefix = "Updated" # set all headings to their default size (depending on browser settings) # it's set to `true` by default # oneHeadingSize = false [params.twitter] # set Twitter handles for Twitter cards # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution # do not include @ creator = "" site = "" [languages] [languages.en] languageName = "English" title = "Terminal" subtitle = "A simple, retro theme for Hugo" owner = "" keywords = "" copyright = "" menuMore = "Show more" readMore = "Read more" readOtherPosts = "Read other posts" missingContentMessage = "Page not found..." missingBackButtonLabel = "Back to home page" [languages.en.params.logo] logoText = "Terminal" logoHomeLink = "/" [languages.en.menu] [[languages.en.menu.main]] identifier = "about" name = "About" url = "/about" [[languages.en.menu.main]] identifier = "showcase" name = "Showcase" url = "/showcase"
Creating a post
Finally, you can create a new post to give your Hugo site some initial content. Run the
hugo new command to generate a new post:
$ hugo new posts/hello-world.md
hello-world.md, you can add some initial content to flesh out your post. Make sure to remove the
draft line in your post's frontmatter when you're ready to publish the post: any posts with
draft: true set will be skipped by Hugo's build process.
Creating a GitHub repository
$ git remote add origin https://github.com/yourgithubusername/githubrepo$ git branch -M main$ git push -u origin main
Deploying with Cloudflare Pages
You can deploy your site to Cloudflare Pages by going to the dashboard, and creating a new site. Select your new GitHub repository that you created above, and in the configuration section, provide the following information:
Once you've configured your site, you can begin your first deploy. You should see Cloudflare Pages installing
create-react-app, your project dependencies, and building your site, before deploying it.
Once you've deployed your site, you'll receive a unique subdomain for your project on
pages.dev. Every time you commit new code to your Hugo site, Cloudflare Pages will automatically rebuild your project and deploy it. You'll also get access to on new pull requests, so you can preview how changes look to your site before deploying them to production.