Hugo is a great platform to deploy a blog with. Unfortunately and unlike Jekyll, I found it not very handy to setup a multilingual blog with. It has support for multilingual blog, but I think it is kind of hard to follow the guide.
So I decided to simply use git and git branches to build my blog with. And it works really well. If you are interested in building a multilingual blog with Hugo and GitHub Pages, please follow along.
We are going to use the
master branch to manage the english content of a hugo
website, and a
french branch to translate this content to another hugo
website. The static english version of the site will be served by your GitHub
Pages main page, and the static french version will be served by the
branch of another repo.
First things first, create your blog
Hugo has a really nice tutorial to
explain how to create your website with it, but I want to explain some steps in
a little more details. Type the following command at the command line to create
a scaffold of a hugo website in the
hugo new site my-website
Now type this one to go into your hugo website and download a theme to use for
your blog. I chosed
ghostwriter for obvious reasons but there are lots of
other good themes for hugo.
cd my-website mkdir themes cd themes git clone https://github.com/jbub/ghostwriter cd ..
config.toml and add the following lines to it:
themes = "ghostwriter"
Go check this page for explanation on how to setup a ghostwriter-enabled website.
It deploys a website on the http://localhost:1313/ port.
Write your first post
hugo new post/my-first-post-ever.md
to create a new post and edit it with your favorite editor. Of course, at this point your favorite editor should be Emacs, for reasons I’ll explain below, but you may chose another.
Now that you are satisfied with your first post, we are going to use git to manage the building of our website.
Manage your blog with git
Type the following commands at the command line.
git init echo "public/" > .gitignore echo "public-fr/" >> .gitignore echo "themes/" >> .gitignore git add . git commit -m "first commit and first post"
Git must not track the
public directories. The themes directory
is already managed by git, since the themes are on their own git repo. The
public directories are going to be the directory that contains the static
version of our website, and will point to another repo.
Now the master branch is setup to track the “english” version of your blog. We must setup a branch to track the “french” (or german or swahili if you prefer swahili to french) version of our blog.
git branch french git checkout french
Now edit your first post, and translate everything that need to be translated in french (or swahili).
git add content/post/my-first-post-ever.md git commit -m "translated first post in english"
We now need to build the website with hugo. We are going to deploy the french
public-fr and the english version in
mkdir public-fr hugo -d public-fr
ls public-fr, you will see that hugo built the static website. Let us
deploy the english version.
git checkout master hugo -d public
Host your pages on GitHub Pages
Now follow the instruction here to use GitHub pages to deploy your own website.
cd public git init echo "# english version of my personal website" > README.md git add . git commit -m "website updated" git remote add origin https://github.com/username/username.git git push -u
We are going to use another GitHub repo to publish the french version of the
website. Open a new repo on github, and call it
sw if you still
prefer swahili. Now type at the command line:
cd ../public-fr/ git init echo "# french version of my personal website" > README.md git add . git commit -m "site à jour" git branch gh-pages git checkout gh-pages git remote add origin https://github.com/username/fr.git
GitHub will now serve the french version of your website to https://yourusername.github.io/fr/. I really love GitHub Pages.
That’s it, you can now setup a button as a link that points to your english version on the french website if you want.
Use Emacs to manage your Hugo blog
Here I’ll just point to another blog post from Toke Høiland-Jørgensen. He uses some custom elisp to wrap simple Hugo commands and manage his blog from Emacs.