UPDATE 2020: The Academic Theme, which is one of the most popular Hugo website themes and the one I use in this post, now has excellent documentation for setting up a website quickly and easily - check it out for up-to-date details on building a personal website with Hugo.
The next thing we need to do is create a directory from which we will build our website, this can be anywhere you like on your computer. You can create a directory using the macOS Finder or Windows File Explorer GUIs, or alternatively by using the command line. For example, the code below creates a new directory called websites in the Documents folder:
You can type ls to see that you now have a directory called hugo-academic (or whatever other theme you chose). Now cd into that directory and again type ls to see the content of the directory; these are the files and folders you will need to create your website.
GitHub Pages is such a fancy service where you can easily setup your own websites by just a few mouse clicks. Companies and project teams can easily create product homepages on it, and individuals who like to document things and share ideas can also easily build blogs on it.
There are tons of different ways to setup blogs on GitHub Pages. The most straightforward one is to create by Jekyll which is a static site generator with built-in support for GitHub Pages and a simplified build process. Various Jekyll blog frameworks have been provided for you to build a blog in just minutes.
One thing to note here, later when upload the my-blog site to Github repo (maybe private repo to backup this site files), you might encounter some warnings related to the theme repo since you clone another repo in an existing git repo. You should decide whether or not this theme repo (in my case, the hugo-theme-even in themes folder) should be tracked to the original repo on Github, which you should not since you just clone the repo from others. In that case you need to clear index for the theme repo and keep it just tracked in your my-blog private repo.
Follow the instructions on Hugo Docs to deploy my-blog to a Github private repo and deploy the public folder which is automatically generated by hugo command onto a Github Pages repo. Here are the main steps.
The hugo command builds your site, publishing the files to the public directory. To publish your site to a different directory, use the --destination flag or set publishDir in your site configuration.
Hugo does not clear the public directory before building your site. Existing files are overwritten, but not deleted. This behavior is intentional to prevent the inadvertent removal of files that you may have added to the public directory after the build.
As noted above, Hugo does not clear the public directory before building your site. Depending on the current evaluation of the four conditions above, after the build your public directory may contain extraneous files from a previous build.
While the server is running, it watches your project directory for changes to assets, configuration, content, data, layouts, translations, and static files. When it detects a change, the server rebuilds your site and refreshes your browser using LiveReload.
Most of our users deploy their sites using a CI/CD workflow, where a push1 to their GitHub or GitLab repository triggers a build and deployment. Popular providers include AWS Amplify, CloudCannon, Cloudflare Pages, GitHub Pages, GitLab Pages, and Netlify.
Now from within a Hugo project, we can start a Docker container serving the project, based on the said image.The image was pushed to Docker Hub already, such that the following command works even when the build step was skipped:
This runs the hugo serve command from within the container, on top of our working directory which gets mounted into the container as /hugo-project.The container server port 1313 is mapped to the host.Given that, the result of this call is equivalent to running hugo serve locally.You can open a browser at :1313, and it will behave exactly as with a locally running Hugo server, including LiveReload.
Maintaining the toolchain image over time should not be a manual task.When deploying to Docker Hub, you can also chose to create a build setup there which connects a GitHub or BitBucket repository with the Docker Hub build infrastructure.Once you push to your Git repository then, the new Docker image gets built and published automatically.
There are many approaches to building websites; why this one? Content Management Systems (CMS) like Wordpress, Drupal, or Wix have user interfaces for managing content stored in a database and assembled dynamically on access. They require no coding, and dynamic sites are also better able to handle complex features or large numbers of pages. Static Site Generators (SSG) like Hugo or Jekyll have several rival benefits, though. Because site content lives locally or in a Git repository, it is more accessible, portable, and transparent. SSGs facilitate easier and much more precise theme customization, and changes can be tested instantly before going live. Mobirise is a code-free drag-and-drop website builder; it combines some pluses of SSGs with the code-free aspect of CMSs, but it limits the ability to edit site code. Hugo and Jekyll have more of a learning curve, but they allow you to get under the hood and get experience with HTML and CSS. After experimenting with both I chose Hugo over Jekyll because installation is more streamlined and file storage more intuitively centralized.
In a file viewer window, copy and paste the contents of the site project from the sandbox directory into this new directory. Delete any extra themes after doing so. Verify it still works with hugo server and, when done, end the test with ctrl+c. This mywebsite directory and its corresponding repository will now be just for this particular website: the sandbox directory will remain for any unrelated tinkering or preparations for additional website projects.
(You could just as well do this by running the hugo, cd public, git add ., git commit -m "write a commit message here to describe the changes", and git push origin master commands in order, but the script streamlines deployment.)
Push changes to the site project repository as well by using the git add ., git commit -m "a commit message", and git push origin master commands in order. It is important to keep this repository up to date with local changes because these are the files from which the website repository is generated (they also contain any draft posts/pages). Should something happen to the files on your local computer, you will be able to git pull or git clone them again to recover them.
TL;DR: Create layout, create content, view locally with hugo serve --buildDrafts, remove draft flag from content, double-check with hugo serve, create static files with hugo, then copy contents of public/ folder to your remote server.
I made this blog site using the Hugo static site generator because I wanted to build a simple site where I could have full control over every detail - not like using Wordpress, Squarespace, or Wix. With Hugo, I can add and remove templates and functionality at will, and it feels great to have that kind of power. You probably ended up here because you want that, too.
On Github, our hugo-gh-pages-public repo now has some data. Go to the repo settings and find the Github Pages section. Set the Source of our site to master branch.
For example, mine will say aormsby.github.io/hugo-gh-pages-public. To understand the difference between setting up a project site and a user/organization site, see these Github Pages and Hugo docs on the matter.
The last step is to build a GitHub Action.The GitHub Action is going to grab the content from the dotnetramblings_source repository, build it using Hugo and push the output into the dotnetramblings repository.
Hugo is a static site generator and framework for building websites. With Hugo, you define your themes using HTML and build your content using Markdown or other text processors. Hugo generates HTML that you can host anywhere.
Next up, create a new repository on GitLab. It is not necessary to set the repository public. In addition, you might want to add /public to your .gitignore file, as there is no need to push compiled assets to GitLab.
Now there is something that is very handy when you are developing a new site: This site will update when you change something.As long as the Hugo Server process is running, changes you safe will automatically be build into your example site. This means your development process becomes very smooth.
Hi there! Once I push my docs folder to Git Hub there is a formatting error between what I see in the local hosting webpage rendition and the GitHub url rendition. Here is the Repository that I created:
The installation instructions below require a package manager, which will download the Hugo executable for you. If you prefer to build Hugo from its source, please refer to the official Hugo documentation.
The Hugo CLI also has a variety of flags to specify additional options for some commands. To view a complete list of Hugo flags (there are a lot of them), we recommend using the hugo help command to display a list of all the available flags.
By default (on macOS), the GitHub app creates new repositories in /Users/username/Documents/GitHub. Since we named our repository my-hugo-site, our repository can be found at /Users/brianli/Documents/GitHub/my-hugo-site.
As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site.
Hugo is one of the most popular static site generators in the world, and for a good reason. Not only does it have super fast build processing, but it also ships with powerful templating capabilities that support partials and shortcodes. 2b1af7f3a8