diff --git a/content/posts/abstracting-away-my-hugo-theme.md b/content/posts/abstracting-away-my-hugo-theme.md new file mode 100644 index 0000000..56d2cc2 --- /dev/null +++ b/content/posts/abstracting-away-my-hugo-theme.md @@ -0,0 +1,83 @@ ++++ +date = '2025-06-19T16:08:31+05:30' +draft = true +title = 'Abstracting Away My Hugo Theme' ++++ + +If you've worked with me before, you'd know I enjoy building things from absolute scratch. I believe this approach helps me learn from first principles and gain a deeper understanding of any topic I'm exploring. + +So naturally, when I decided to use Hugo for my blog, I chose to design the site myself rather than use one of the preset Hugo themes. I figured this would be a good opportunity to brush up on my rusty CSS skills while creating something truly my own. + +After I started writing here, someone I knew mentioned they liked my site's design. This surprised me since I hadn't done anything particularly fancy. I had deliberately taken an extremely minimal approach, focusing entirely on centering my design around the content over aesthetics. When they suggested I abstract the theme into a separate repository so others could reuse it, I was initially hesitant. I wasn't very keen on maintaining another repository. + +But, then I realized that doing this would actually clean up my code by keeping things more organized and modular. Plus, it'd be a great way to get my work out there and share it with others. + +So, I polished my theme, introduced a couple of new parameters to make the site more flexible, and published it as a separate repository. If you like the design of my site, feel free to check out the theme [here](https://github.com/Nilesh2000/minimal). + + +## How to Extract Your Hugo Theme + +Here's the step-by-step process I followed to separate my custom theme from my site: + +1. Prepare Your Theme +Create a `theme.toml` file in your `themes/` directory: +```toml +name = "" +license = "MIT" +licenselink = "https://github.com/yourusername//blob/main/LICENSE" +description = "A Hugo theme" +homepage = "https://github.com/yourusername/" +tags = ["", "clean", "simple"] +features = ["responsive"] +min_version = "0.41.0" + +[author] + name = "Your Name" + homepage = "https://yourwebsite.com" +``` + +2. Create the Theme Repository +Navigate to your theme directory and initialize a new Git repository: +```bash +git init +``` + +3. Copy over the contents of the theme folder from the old repository to the new one. + +4. Commit and push the changes to the new GitHub repository. +```bash +git add . +git commit -m "Add theme.toml" +git push +``` + +5. Update Your Main Site +Go back to your site's root directory and remove the theme from Git tracking: +```bash +git rm -r --cached themes/ +rm -rf themes/ +``` + +6. Add your new theme as a git submodule. + +```bash +git submodule add https://github.com/yourusername/.git themes/ +git add .gitmodules themes/ +git commit -m "Add theme as submodule" +``` + +7. Update the `theme` field in the `config.toml` file to point to the new theme. +```toml +theme = "" +``` + +8. Test Everything +Run your site locally to ensure everything still works: +```bash +hugo server +``` + +9. If you update your theme, and want the changes to be reflected in your site, you can run the following command: +```bash +git submodule update --remote --merge +``` diff --git a/themes/minimal b/themes/minimal index 70aeff4..d9f7254 160000 --- a/themes/minimal +++ b/themes/minimal @@ -1 +1 @@ -Subproject commit 70aeff4377e7acc0dbe06c803efe4a5701d53c65 +Subproject commit d9f72540cfaa490264516724a16de89cf4b3e335