Code Monkey home page Code Monkey logo

blist-hugo-theme's Introduction

Blist theme for Hugo

Latest Release Blist hugo theme Hugo generator

Blist is a clean and fast blog theme for your Hugo site.

Blist Icon

Features:

  • Responsive content / Mobile-optimized
  • Blog pagination
  • Customizable Text Search
  • Table of contents
  • Social links
  • Code highlighting
  • Color customization
  • Dark mode
  • Fast performance
  • SEO optimized
  • i18n support
  • Support comments systems
    • Disqus (hugo native)
    • giscus
    • utterances

Preview

Preview

➡️ DEMO

Get the theme

Minimum Hugo Version: 0.110.0

Run from the root of your Hugo site:

git clone https://github.com/apvarun/blist-hugo-theme.git themes/blist

Alternatively, you can include this repository as a git submodule. This makes it easier to update this theme if you have your Hugo site in git as well:

git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/blist

Preview the theme with example content

Blist theme ships with an fully configured example site. For a quick preview:

Copy the package.json file from themes/blist folder to your hugo website root folder, and run npm install.

cd themes/blist/exampleSite/
hugo serve --themesDir ../..

Then visit http://localhost:1313/ in your browser to view the example site.

Configuring theme to a hugo website

  1. Copy package.json and package-lock.json to the root folder of your website
  2. Run npm install to install required packages for theme
  3. Run npm i -g postcss-cli to use PostCSS with Hugo build
  4. Set theme = 'blist' in config.toml
  5. Run npm start to start your local server

Make sure to commit the above changes to your repository.

Publish your website

When deploying to services like Netlify or Vercel, use the following command for building your site:

npm i && HUGO_ENVIRONMENT=production hugo --gc

The parameter HUGO_ENVIRONMENT=production enables the execution of css purging.

Add content

The following explains how to add content to your Hugo site. You can find sample content in the exampleSite/ folder.

Structure:

.
├── ...
├── blog       # Blog Section
│   ├── post1   # Post 1
│   ├── post2   # Post 2
│   └── _index
└── ...

Configure your site

From exampleSite/, copy config.toml to the root folder of your Hugo site and change the fields as you like. Helpful comments are provided.

Menu

Menu in Blist theme is pre-set to have all section names. You can include custom links in header using the menu.main option config.toml.

Logo

logo param in the site config will allow to use an image as the logo instead of the website name. It is localizable and so can have different logo for different languages

Darkmode

[params.darkModeToggle] enables the dark mode toggle in header. The preference is then saved so that the mode is automatically chosen for return visits.

Customize Ascent Color

Use [params.ascentColor] to change the default pink color to any supported color from the list of default colors from Tailwind CSS.

Some example values: bg-blue-200, bg-yellow-300

Search

[params.enableSearch] option is used to enable search option in the theme.

  • Adds the search icon in header
  • Generates the search index
  • Uses fuse.js to enable searching through content

In order to search, you can either click on the search icon from header or press Ctrl/Cmd + / key combination.

Note:

Make sure to enable JSON in outputs array.

[outputs]
  home = ["HTML", "RSS", "JSON"]

LaTeX

Enable mathematical options: set math: true in your markdown frontmatter

Google Analytics

Set googleAnalytics in config.toml to activate Hugo's internal Google Analytics template.

Performance

Pagespeed Insights Performance

Issues

If you have a question, please open an issue for help and to help those who come after you. The more information you can provide, the better!

Contributing

Contributions, issues, and feature requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

apvarun
apvarun
Ravinou
Ravinou
engel-b
engel-b
chris-gillatt
chris-gillatt
dependabot[bot]
dependabot[bot]
xLexip
xLexip
AntoineSoetewey
AntoineSoetewey
chiragksharma
chiragksharma
dlecan
dlecan
jpiaskowski
jpiaskowski
lucab85
lucab85
Marty
Marty
ernavdeepkr
ernavdeepkr
roypeter
roypeter
janvanveldhuizen
janvanveldhuizen
jmflaherty
jmflaherty

License

Licensed under MIT

🤝 Support

Give a ⭐️ if you like this project!

Buy Me A Coffee

blist-hugo-theme's People

Contributors

antoinesoetewey avatar apvarun avatar chiragksharma avatar deining avatar dekker500 avatar dependabot[bot] avatar dlecan avatar engel-b avatar ernavdeepkr avatar jmflaherty avatar jpiaskowski avatar lucab85 avatar marty avatar ravinou avatar robhenley avatar roypeter avatar sramekmichal avatar xlexip avatar ytrepidorosonomous avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

blist-hugo-theme's Issues

Twitter Shortcode appears broken

If you take a look at the Twitter post embedder, images in tweets don't appear to resolve:

See Twitter Simple Shortcode on the demo site:
https://blist.vercel.app/en/blog/rich-content/

Using {{< twitter_simple 1557658979018440705 >}} throws a warn on a local hugo serve build too, suggesting you specify both the tweet user and tweet ID like so:

{{< tweet user="KawaaiMayumi" id="1557658979018440705" >}}

However, doing a hugo serve using the new pattern builds and renders fine, but hugo fails to build in Netlify with the following error:

9:57:10 PM: hugo v0.85.0-724D5DB5+extended linux/amd64 BuildDate=2021-07-05T10:46:28Z VendorInfo=gohugoio
9:57:14 PM: Error: Error building site: "/opt/build/repo/content/blog/hugo-rich-content.md:33:6": failed to render shortcode "tweet": failed to process shortcode: template: _internal/shortcodes/tweet.html:6:82: executing "_internal/shortcodes/tweet.html" at <index .Params 0>: error calling index: value has type int; should be string
9:57:14 PM: Total in 4178 ms
9:57:14 PM: ​
9:57:14 PM: ────────────────────────────────────────────────────────────────
9:57:14 PM:   "build.command" failed                                        
9:57:14 PM: ────────────────────────────────────────────────────────────────
9:57:14 PM: ​
9:57:14 PM:   Error message
9:57:14 PM:   Command failed with exit code 255: npm i && HUGO_ENVIRONMENT=production hugo --gc (https://ntl.fyi/exit-code-255)
9:57:14 PM: ​
9:57:14 PM:   Error location
9:57:14 PM:   In Build command from Netlify app:
9:57:14 PM:   npm i && HUGO_ENVIRONMENT=production hugo --gc
9:57:14 PM: ​
9:57:14 PM:   Resolved config
9:57:14 PM:   build:
9:57:14 PM:     command: npm i && HUGO_ENVIRONMENT=production hugo --gc
9:57:14 PM:     commandOrigin: ui
9:57:14 PM:     publish: /opt/build/repo/public
9:57:14 PM:     publishOrigin: ui
9:57:15 PM: Caching artifacts

Any ideas?

Skip thumbnail in blog post entry

Hi!
thanks for the template.
I wonder if there is a way to skip the thumbnail in the blog post. It is quite big and centers the entry to it instead of the words. thanks.

Changing colors of the light mode

Dark mode works as expected.

Light mode is buggy somehow.
I applied the ascent mode as descripted into config.yaml:

ascentColor: "bg-blue-100",

The problem is, that I was able to get only some blue, green and gray colors so far. Others do not show up, the field is just white. And unfortunately only on local host.

When I deploy it on k8s (nginx/alpine) it never changes color in light mode.

Do I miss some library or something? Should I do some post-install?

How to remove option for different languages

Hello,
I recently got started with this theme and I absolutely love it. Although, I'm unsure how to remove all the options for different languages, I tried to remove the base URL from /en/page/blog to only /page/blog but didn't manage to do it.

Where is all the configuration for different languages so I can remove it and only provide one language without it being specified in the URL?

Thanks ---
Gustav

404.html is a blank file

Hello, Varun, thanks for your hard work. Blist is a beautiful theme, but I noticed the 404.html is a blank file, would you mind to give it an update? thanks.

Getting the theme to run in Windows

I've installed Hugo in Windows, and got the same POSTCSS error similar to #4.
The solution about npm and installing files is a bit 'borked' here - I've no idea on how to install POSTCSS in Windows...
Is this possible, or is this theme just not Windows friendly due to the extra packages needed.

Set width on the "about" page

Question:

How can I set the page width of the About page. I can't find it, or my knowledge is not that good.
The problem is, that I have a 3 column table and the one column is smaller than the others.

Hope that someone can answer my question.

Multi Language support

Hello,

I really like your theme, but I'm wondering if there is a way to use the theme for multiple languages?

Markdown code input isn't rendering as expected.

I noticed that the blog template is not converting the inline code function from markdown to HTML. It's displaying the backtick and putting it and the content after in bold. I thought it might have been me, but I checked the demo page, and it also exhibits the same issue.

Example:
https://blist.vercel.app/en/blog/markdown-syntax/

The inline markdown within tables shows this.

Am I missing something? Should I be modifying my config.toml with something additional to support single backtick quotes?

Add mastodon icon?

Hi and thank you for this work, it's nice!

I think in social icons, a mastodon icon should be added as it's more and more used!

Have a nice day!

The pages dated year 2022 are not displayed. any workaround?

I have a few pages in the blog section dated 2021. They all display correctly.
I want to add a new page dated the year 2022. This page is not listed in the blog section. If I change the year to 2021, it displays.
Any workaround for displaying 2022 pages?

Search is indexing only article's Titles

All indications are that the search function only looks for words from the Titles.

It does not index Author, Description, Text Body or even Tags.

I don't want to criticize here, the theme is really great 👍🏻

IMHO it's just not practical.
The user may need to search for articles by author.

Is there way to improve this?

Remove Dates From Thumbnail Option

Hi,

I was wondering if there is an easy way to remove the dates from the thumbnail images without editing the theme itself (like a toggle in the toml maybe?).

Similarly an option to remove the posted date, read-time, and wordcount on pages would be nice too.

I'm hoping to be able to do this without tweaking the theme so that we can benefit from future updates to the theme without having to re-edit it each time.

Thanks,

Daniel

bug: css on mobile view

Awesome theme 👍🏾 I love it. Thanks for releasing v2.0.0 shortly. I am stumbling over some minor bugs, such as follows:

The element wrapping of the reading time and word count could be fixed to wrap correctly the the new line. See the screenshot

Screenshot 2022-12-26 at 22 22 50

Emoji

Hello again,

I managed to make everything working, except emojis.

  • I added enableEmoji = true in config.toml
  • just in case (I don't know whether it is needed or not), I also added enableInlineShortcodes = true in config.toml
  • I then tried to add an emoji at the end of this page, but it's not showing as expected:

Screenshot 2021-12-29 at 11 21 24

  • I tried on other pages, without success

It is probably not a bug, but rather something I am missing.

Any idea how I could fix this?

Thanks in advance for your help.

Regards,
Antoine

POSTCSS: failed to transform "css/styles.css"

When i try to preview the site by following the quick preview steps, i got this error :

Start building sites … 
hugo v0.85.0 linux/amd64 BuildDate=2021-07-05T14:33:29Z
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/
Built in 49 ms

My hugo version is :
hugo v0.85.0 linux/amd64 BuildDate=2021-07-05T14:33:29Z

I have tried to install postcss globally but give the same error. How i resolve this error ?

Sorry if i'm wrong, cz i'm new in hugo.
Thanks

Favicon does not display

I save the images (including logo.jpg, favicon.jpg) under the folder static but only the favicon does not come out. Is this the right place to put those images? Or I need to save it to mysite/resources/_gen/images or other places??

Adding Sidebar Support

It is a beautiful theme. Let me thank you for that first.

I am trying to use this theme for my personal blog. I have some feedback based on my extensive search for finding the perfect theme for my use case. Furthermore, I am going to reference some other websites for example.

Sidebar:
Blist theme has lots of open space, and a sidebar can help with navigation. Let's see Rust Cookbook.
image

You might say it is a book, but it has a hidden trick up its sleeve. It can hide it completely by a button.
image
Simple but effective. For this theme, I think a floating button might work(just throwing ideas).

I am going to give another example that is more close to this project. Blonde Theme has a sidebar that is a bit crowded.

image
image

It is a bit too much, but it works! I hope you got my point. For big displays, a sidebar can help with navigation and help discover new writings.

Kindly, don't take my words as criticism. I am just giving my point of view. Thank you!

Feature request: hamburger menu

Hello Varun,

This is not really a bug but rather a feature request.

When there are (too) many links in the menu, it is cut on the mobile version.

I managed to put the links below each other when the width of the screen is small:

Screenshot 2021-12-28 at 14 11 15

Would it be possible to add the fact that the menu becomes a hamburger menu when the width of the screen becomes small. Like this template: https://www.zerostatic.io/theme/hugo-hero/

For your information, my repo is https://github.com/AntoineSoetewey/elsaetantoine.

Thanks in advance.

Regards,
Antoine

Adding image on front page

I'm having a problem with adding an image to the front page of the website. I've simply did [params.homepage] photo = "/portrait.jpg" with the file located in public/images/portrait.jpg yet it does not show up.

Remove "other language" url

Is it possible to remove the "other language" url?

I already removed this code from the single.html, but it seemed to be not working.

{{ if .IsTranslated -}}
{{- $sortedTranslations := sort .Translations "Site.Language.Weight" -}}
{{- $links := apply $sortedTranslations "partial" "translation_link.html" "." -}}
{{- $cleanLinks := apply $links "chomp" "." -}}
{{- $linksOutput := delimit $cleanLinks (i18n "translationsSeparator") -}}
&nbsp;&bull;&nbsp;{{ i18n "translationsLabel" }}&nbsp;{{ $linksOutput }}

GoogleAnalytics is not working

I have set the googleAnalytics = "G-MEASUREID" in the config.toml, but I don't see any traffic in Google Analytics.
Do I'm missing some here?

Hugo server not coming up

Whenever i try to run the Hugo server after cloning the repository, I get this error

PS C:\Users\omo\Documents\hugo-demo> hugo server
Start building sites …
hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d+extended windows/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): Error: Cannot find module 'postcss-import'
Require stack:

  • C:\Users\omo\Documents\hugo-demo\themes\blist\assets\css\postcss.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object. (C:\Users\omo\Documents\hugo-demo\themes\blist\assets\css\postcss.config.js:5:5)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap. (node:internal/modules/esm/translators:169:29) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
    'C:\Users\omo\Documents\hugo-demo\themes\blist\assets\css\postcss.config.js'
    ]
    }
    Built in 1605 ms

feat: code snippets improvements

I have 2 suggestions for improving the code snippets

  1. I'd like to have a copy button on the code snippet to be able to easily copy them out, e.g. as shown here:
    Screenshot 2023-01-19 at 09 37 16

  2. add line number to be able to refer to certain lines afterwards in the text

Add Google Scholar Social Icon

Dear authors, thank you for your work!
Can you add Google Scholar as an option for social links? I tried to do it myself, but I am not experienced dealing with SVG.
Thank you very much!

Dark mode button always visible

I liked the new hamburger button for mobile resolution but I think also in smaller screen it would be very helpful to have the dark mode button always visible, because this type of button is used a lot on a mobile device.

Maybe it can be moved before the hamburger button.

Search function doesn't work

I download this template directly, but the search function just doesn't work. The console shows that it is linked to my homepage (username.github.io/index.json) instead of username.github.io/repo/index.json. Is there any ways I can fix this? Thanks a lot:)

CSS Compatibility with Github project pages

When deploying to Github project pages (or probably any non-root directory) fonts are not loaded, as they refer to absolute path (example here).

Is there any recommended way to provide prefix to font resources in CSS?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.