This is my notes on how I did it and how it turned up. You can find my Simple List theme on GitLab.
Creating the theme
This is a very quick list of steps I took to create my theme.
- Created a new project on GitLab
- Git clone in my local machine
cd www git clone email@example.com:paapereira/hugo-theme-simple-list.git
Copied the hugo-classic theme I add cloned to my new theme folder
Started changing the theme to my hearts content
Pushed my new theme to GitLab
cd hugo-theme-simple-list git add . git commit -m "New Simple List theme for Hugo.io" git push -u origin master
Next I talk a little about some the changes I made.
This is where the theme information is set. Don’t forget to add the original theme information.
I kept the base structure and the README file. Reviewed the instructions to match my testing of creating a new site.
For the site customization I kept only the style.css file.
I tried to simplify it and added some tweaks based of the terminal theme. I will probably continue to add some tweaks, specially while I learn more about some css ‘stuff’.
This is where the .html files are kept to define how the site is to be generated.
I tried to simplify it, reducing the number of files and adapting it to my preference. I also added a ‘rss.xml’ file to add support to the ‘description’ property in the post files.
Still a lot to learn about Hugo, so I will probably keep on making more changes.
I kept the base examples, but reviewed the ‘config.toml’ file as to be a good base for all the features this theme have.
Replacing my current theme
Although is not required, I removed my old theme before adding the new one.
Remove the submodule for the old theme from the
cd mysite vi .gitmodules git add .gitmodules
Also remove the old theme from the
Unstage and remove the old theme:
git rm --cached themes/terminal rm -rf .git/modules/themes/terminal git commit -m "Removed theme" rm -rf themes/terminal
Add the new theme:
git submodule add https://gitlab.com/paapereira/hugo-theme-simple-list themes/simple-list git add . git commit -m "New theme" git push
And that was it. In the meanwhile I added some new tweaks and have some others to do and to fix.
Here’s the before/after screenshots.