Hugo Theme Luna
A simple, performance-first, SEO-friendly Hugo theme
Introduction
- Using Tailwindcss
- Custom Themes
- Dark mode
- Image gallery
- Responsive images
- Article encryption (please do not encrypt important content under any circumstances)
- Multilingual
- Google Translate
- PWA
- Pjax, use swup.js
- Lazy load images
- <noscript>
- Table of contents
- Local search, use flexsearch
- Twitter page template
- GitHub page template
- Archive page template
- GitHub Actions
- and more……
Usage
– Requirements
- hugo-extended >= 0.97.0
- NodeJs
- postcss-cli, Install using
npm install postcss-cli -g
For more information about Hugo’s functionality, check official documentation of Hugo.
If you are using Windows, I recommend using Scoop to install Hugo:.
scoop install hugo-extended
– Installation
git clone https://github.com/Ice-Hazymoon/hugo-theme-luna/ themes/hugo-theme-luna
There is a config.yaml
file in the exampleSite
directory, copy the file to your site directory and modify the contents.
– Configuration
Please refer to the config.yaml
file to configure your site
If you prefer to use toml, you can convert it here
If you need to use templates for Twitter, GitHub, Search, Archives, etc., you will need to create the corresponding files in the content folder, see the cantent folder
If you want to add a Links page, you can refer to this File
You can find all available icons at Eva icons
You can set the post type to type: status
to post a status
You can modify your website icons by adjusting the assets/icon.png file
– Encryption
I suggest you use two repositories to manage your blog, a private repository for your blog’s source code and a public repository for public files. If you need to use the post encryption feature, please make sure not to put your source code on the public repository.
Do not encrypt any important content with the encryption function
Please be careful with functions such as .RawContent
to avoid exposing the body
If you’re not using GitHub Actions and you need to use encryption, run the hugo-encrypt.js
script in the theme directory after each site generation
{{% hugo-encrypt 2022 %}}
### Here is what needs to be encrypted
test content

```js
console.log('some codes');
```
{{% /hugo-encrypt %}}
Note:
The images in the blog use Hugo’s Image Processing feature, which automatically crops them to the right size to optimize page load speed, and can be time-consuming to generate the first time.
The local search function removes the shortcode and code blocks in order to reduce the size of the json file, but you can modify it here if necessary
For the format of new articles, please follow the archetypes/default.md
file
If you have pjax enabled and have added additional <script>
tags, add the data-swup-reload-script
attribute to the tags, see: https://swup.js.org/plugins/scripts-plugin
GitHub Action
Automatically deploy your blog to public repositories
Copy the .github
folder in the theme root directory to your blog’s root directory
Modify the external_repository
, user_name
, user_email
, etc. fields in the main_example.yml file, see: actions-gh-pages
Note: If you need to enable encryption, you need to have two GitHub repositories, a private repository for your source code and a public repository for your blog, external_repository
should be set as the public repository for your blog
If you only have one repository, modify the Deploy
script section
Create a Token for deployment at https://github.com/settings/tokens, save the Token
Add a TOKEN
field to github.com/{username}/{project}/settings/secrets/actions and enter the token you just generated
Screenshots
– Performance tests (with pjax and katex turned off)
Lighthouse | GTmetrix |
---|---|
![]() |
![]() |
– Screenshots
![]() |
![]() |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Acknowledgements
- https://github.com/olOwOlo/hugo-theme-even
- https://github.com/CaiJimmy/hugo-theme-stack
- https://github.com/Izumiko/hugo-encrypt
License
The theme uses the GPL V3.0 protocol open source, please comply with this agreement for secondary development and so on.