Lädt...


🔧 Create a Hugo Theme from Scratch - IV


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

This is a series of blog posts documenting my journey of building a Hugo theme from scratch: https://github.com/tomowang/hugo-theme-tailwind. The series consists of four articles, this is the fourth one:

Continuous Integration

With the functionalities mentioned in previous articles completed, most of the coding work is done. However, as a project intended for others to use, there are still some additional tasks to handle.

As a Hugo theme repository, continuous integration can encompass several aspects, such as automated deployment of the example site and automated version releases based on git tags. Regarding the example site, the Hugo-generated static site can be easily published to GitHub Pages, and GitHub Actions provides actions to operate GitHub Pages. Here, I used three actions:

  1. actions/configure-github-pages - Configures GitHub Pages and retrieves some meta information, such as base_url
  2. actions/upload-pages-artifact - Uploads resources to GitHub Pages
  3. actions/deploy-pages - Deploys to GitHub Pages

The GitHub Pages related workflow requires additional permissions:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

Additionally, the Hugo compilation parameter --baseURL needs to use the meta information from GitHub Pages:

- name: Setup Pages
  id: pages
  uses: actions/configure-pages@v3

- name: Build with Hugo
  env:
    # For maximum backward compatibility with Hugo modules
    HUGO_ENVIRONMENT: production
    HUGO_ENV: production
  run: |
    hugo -s exampleSite --minify --gc --themesDir ../.. \
      --baseURL "${{ steps.pages.outputs.base_url }}/"

The GitHub Actions code is placed in the .github/workflows/ directory and is triggered automatically by committing code.

hugo theme project github actions

hugo theme project github action detail

Moreover, I configured DNS resolution pointing the GitHub domain hugo-theme-tailwind.tomo.dev -> tomowang.github.io so that users can access the example site through https://hugo-theme-tailwind.tomo.dev.

Promotion

To reach a wider audience for the theme, the best way is to submit it to the official theme site. Hugo provides a GitHub repository to build the official theme site https://themes.gohugo.io/, and it also details the submission process.

  1. Specify the supported Hugo versions in the config.toml configuration file.
  2. Use the theme.toml file to describe some meta information about the theme, including name, copyright, tags, author, etc.
  3. A descriptive README document, which serves as the main page on GitHub and is used to display the theme details on the site.
  4. Theme screenshots and thumbnails with the following size requirements:
    1. Screenshot (screenshot.png or screenshot.jpg), with a minimum size of 1500×1000 pixels
    2. Thumbnail (tn.png or tn.jpg), with a minimum size of 900×600 pixels

After completing these steps, follow the git workflow to fork, modify, commit, and submit a PR to the official theme repository. I submitted my PR #391. Fortunately, the PR was quickly merged into the repository, and finally, the theme became accessible on the official theme site: https://themes.gohugo.io/themes/hugo-theme-tailwind/.

hugo theme tailwind

Other promotional channels include the official forum, where there is a dedicated section new theme for discussions about new themes. I created a new topic to introduce the theme.

hugo discourse new post

Additionally, some third-party theme sites collect data based on the topics configuration in the GitHub repository, such as builtatlightspeed. By configuring the hugo-theme topic in the GitHub repository, these theme sites can crawl and index the repository. The complete Topics I configured are theme hugo-theme hugo gohugo hugo-blog hugo-blog-theme tailwind tailwindcss tailwind-theme hugo-blog-template.

Currently, the theme is automatically listed on the following sites:

  1. https://statichunt.com/themes/hugo-theme-tailwind
  2. https://www.builtatlightspeed.com/theme/tomowang-hugo-theme-tailwind

Of course, there are other theme sites where you can submit through PRs, such as https://jamstackthemes.dev/.

Future

After submitting the theme to the community, some users tried it out and provided feedback, suggestions, and questions, which I addressed and handled one by one. Currently, the number of Stars on the GitHub repository is as follows:
GitHub Repo stars

Here is some data for reference:

When searching for the keyword "hugo theme tailwind" on Google, the theme page ranks quite high.

google search position

From Google Analytics, we can observe that the most traffic comes from the official theme site https://themes.gohugo.io, which is related to the Google search ranking.

google analytics traffic acquisition by source

This concludes this series of blog posts. Of course, the theme I created is relatively simple. If you are interested, you can try it out and provide valuable suggestions.

...

🔧 Create a Hugo Theme from Scratch - I


📈 45.65 Punkte
🔧 Programmierung

🔧 Create a Hugo Theme from Scratch - II


📈 45.65 Punkte
🔧 Programmierung

🔧 Create a Hugo Theme from Scratch - III


📈 45.65 Punkte
🔧 Programmierung

🔧 Create a Hugo Theme from Scratch - IV


📈 45.65 Punkte
🔧 Programmierung

🔧 45sec scratch game vs 1min scratch game vs 10min scratch game


📈 36.18 Punkte
🔧 Programmierung

🔧 Open source Hugo Theme for building SaaS websites: Saasify


📈 27.39 Punkte
🔧 Programmierung

🔧 How to Create a WordPress Theme from Scratch


📈 27.35 Punkte
🔧 Programmierung

🔧 Create contact form with hugo


📈 24.49 Punkte
🔧 Programmierung

🕵️ Medium CVE-2020-15164: Scratch-wiki Scratch login


📈 24.12 Punkte
🕵️ Sicherheitslücken

🐧 Linux from scratch vs docker scratch?


📈 24.12 Punkte
🐧 Linux Tipps

🔧 Automatic Deployment of Hugo Sites on Firebase Hosting and Drafts on Cloud Run


📈 18.3 Punkte
🔧 Programmierung

📰 Smartphone-Hersteller: Hugo Barra verlässt Xiaomi


📈 18.3 Punkte
📰 IT Nachrichten

🔧 Hugo shortcode for sns with unit.link like button


📈 18.3 Punkte
🔧 Programmierung

📰 Facebook ernennt Hugo Barra zum Chef seiner Virtual-Reality-Sparte


📈 18.3 Punkte
📰 IT Nachrichten

🐧 [$] Hugo: a static-site generator


📈 18.3 Punkte
🐧 Linux Tipps

📰 VP Hugo Barra Leaves Xiaomi, Says He's Coming Home to Silicon Valley


📈 18.3 Punkte
📰 IT Security Nachrichten

📰 House of the Dragon: Nach Addam, Ulf und Hugo - Rhaenyra wird noch weitere Drachenreiter rekrutieren!


📈 18.3 Punkte
📰 IT Nachrichten

📰 81st World Science Fiction Convention Announces 2023 Hugo Awards


📈 18.3 Punkte
📰 IT Security Nachrichten

🪟 Hugo Barra wird Oculus-Chef bei Facebook


📈 18.3 Punkte
🪟 Windows Tipps

📰 Hugo Boss will Online-Geschäft massiv ausbauen


📈 18.3 Punkte
📰 IT Nachrichten

📰 Heimweh: Hugo Barra verlässt Xiaomi, geht zurück ins Silicon Valley


📈 18.3 Punkte
📰 IT Security Nachrichten

🔧 How to Build a Personal Website Using GitHub Pages and Hugo?


📈 18.3 Punkte
🔧 Programmierung

📰 Smartphones: Hugo Barra verlässt Xiaomi nächsten Monat


📈 18.3 Punkte
📰 IT Nachrichten

📰 Ease Back Into WIRED Book Club With the Hugo-Winning Novella Binti


📈 18.3 Punkte
📰 IT Nachrichten

📰 Hugo Awards Organizers Reveal Thousands Spent On Fraudulent Votes To Help One Writer Win


📈 18.3 Punkte
📰 IT Security Nachrichten

🔧 Hugo- The Best Static Site Generator


📈 18.3 Punkte
🔧 Programmierung

📰 Hugo Barra verlässt Xiaomi und kehrt ins Silicon Valley zurück


📈 18.3 Punkte
📰 IT Nachrichten

📰 Hugo Boss und Ferrari: Analoge Uhren mit Smartwatch-Technik von HP


📈 18.3 Punkte
📰 IT Nachrichten

🔧 Hexo et Hugo : deux générateurs statiques bien pratiques


📈 18.3 Punkte
🔧 Programmierung

📰 Salzkammergut Festwochen Gmunden 2023 planen Shakespeare und Hugo Wolf


📈 18.3 Punkte
📰 IT Nachrichten

📰 Smartphone-Hersteller: Hugo Barra verlässt Xiaomi


📈 18.3 Punkte
📰 IT Nachrichten

matomo