charlola / hugo-theme-charlolamode Goto Github PK

This is a minimalistic theme template for websites.

License: MIT License

CSS 14.05% JavaScript 4.15% HTML 81.81%

blog template hugo-theme website theme

hugo-theme-charlolamode's Introduction

charlola.mode

This website theme is based on the Hugo framework. This is a modification of the templates PaperMod and hugo-paper. It's quick and easy to use with minimal design and the most basic functions.

Check out my website to see a similar example: www.cmart1n.com

Link to the Hugo Theme: https://themes.gohugo.io/themes/hugo-theme-charlolamode/.

Features

Customize your home page with ...
- Title of the page
- Your Name
- Description
- Social Icons
- Buttons
Change color of all elements such as background, text, icons ...
If you click on a tab you will see a list of posts.
- posts can be visualized with images
- post can lead to an external link

Quick Start

Install Hugo
Install Git

Open your terminal or command line

Create a new folder 'quickstart'

hugo new site quickstart

Go into this folder

cd quickstart

Initialize an empty Git repository in the current directory

git init

Clone this repository into your folder

git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

Delete the config.toml

rm config.toml

Add theme in a new config.yml file

echo "theme: charlolamode" >> config.yml

Start Hugo's development server to view the site locally.

hugo server

Once the local server starts, you can see your site. If your webbrowser does not automatically pop up, open your browser and enter http://localhost:1313. Now you can start to modify this page in the directory. If you save new changes, this site will automatically refresh and render the modification.

Open Visual Studio Code to edit your Blog

Open your favorite Editor like Visual Studio Code

Basic Configuration

The config.yml is your best friend. You can modify and add information, such as ...

Title of the page
Your Name
Description
Social Icons
Buttons

Have a look at the charlolamode/config.yml for reference. There are commented examples which show you how to easily add tabs and social icons like LinkedIn, Twitter, Youtube, Instagram. Copy the content in your config.yml which will overwrite the config.yml of the theme.

Change Profile Image

To add your profile pic, replace profile.png in the folder static/images. Make sure you take an image with a happy face :)

Add tabs

In the config.yml you can add new tabs next to 'Articles' and 'Contact'. Uncomment 'Category' to check it out.

Note If you add a new tab in the config.yml, you have to do the following:

Add new folder in the directory 'content' with the same name as the new tab.
Copy _index.md from articles into new folder.

Add new content

If you like to push new content, create a new Markdown file in the new folder. Find an example in content/articles/article.md.

Change colors

Have a look at assets/css/core/theme-vars.css to play around with colors.

Disable 'Profile Mode'

To display Article content on the home page, rather than profile information, set the following under params: in config.yml

profileMode: 
    enabled: false

With the Article content moved to the home page, removing the main menu entry for Articles may be desirable:

menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

Thank you!

I invested my own time to build this and it's completely for free. If this template have saved you time, feel free to support this page with a coffee donation :)

I'd love to get feedback, send a message via LinkedIn!

Online Website

To push your website online, use Azure Static Web or Netflify. I use Azure Static Web.

hugo-theme-charlolamode's People

Contributors

Stargazers

Watchers

Forkers

shivam-pawar pomkos mparvin juandaanieel robbycuenot ricmigs saksma buraksekili cronix1000 deliastephens freixa21 chebeto hothomir mcrlab oleksii-donoha katiebarnett jackyhuang85 xyqbest mattevansdev cabreu gokriznastic michaelcondon lumca riversheher schmidt-software rpotozky freegoat rgrover ayushpoddar daniel-mcdonough haikoschol gixoxyz francois-egner sunkenintime as51340 casiar nickselby acb2-au obraunsdorf iffahazlan randoneering noto10 xrep arlukevich

hugo-theme-charlolamode's Issues

Deploy on Cloudflare pages with custom content

Hi @charlola

1st of all, I love this simple static theme.

But the problem is I tried super hard (at least in my terms - not good with website and front-end stuff), but I can't get it working on cf pages.

I followed the same steps mentioned in README.md - Also, for cf pages, deletion of config.toml is required, I kept it there.

Further, still I can't figure out how to actually use this, when I'm just following the steps in README.md, it is working fine on hugo server.

But as soon as I added content under root/content/projects or root/content/articles or root/content/contact, it is throwing an error for layouts, so to make it easy I just copied the themes/charlolamode/layouts -> root/layouts, still, I'm getting errors.

IDK what I'm doing wrong, so to double check I even followed this official guide from cf for hugo and it worked right away.

I want to use this theme but I can't get it working for me, can you help/assist?

It would be appreciated :)

Projects

Hello,

Thank you for making this theme, I am currently working on my own personal site using it.

I noticed that on your personal site you have a projects section with different formatting that the articles section. Is this a part of the repo, and if so how do I use it? If its not I would love if you could update the repo to include it.

Thank you,
Paarth Tandon

ADD Search form

Hello, I saw that you already have things ready to use some search engine, but since I don't have experience yet, can you tell me how to activate this?

Disable demo content from theme

Hi I'm wondering is there a way to disable the default content from the theme?

Everything under themes\charlolamode\content

Or is there a clean version of the theme?

Thank you!

Forced web page title tab heading

I think there should be a param to allow you to set a name for the tab heading title without it actually showing up on the top left of the page since I don't want my name to show up twice.

Enable using theme as git submodule

Right now this repo is structured as a Hugo site, which makes it tricky to integrate into existing projects. On the other hand, if you had the theme itself at the top level and the sample content in a separate directory, that would make it possible to use the theme as a git submodule, e.g.:

git submodule add https://github.com/author/theme.git themes/theme-name

This is how most other Hugo themes I've looked at are structured. As an example: https://github.com/panr/hugo-theme-hello-friend

Would you consider restructuring your repo in this manner?

A couple of issues observed

While working on this hugo site, a browser tab header shows the site URL instead of the author name.

Observation in the tab name - sitename.com/
Expected output - Author Name

Another issue is related to the reading time - it shows the following:

nbsp; nbsp characters are observed between the author name and the reading time

Unable to remove ·

Kindly let me know how to resolve the aforementioned issues.

config.toml file is not found to delete

We should remove hugo.toml in step 5 instead of rm config.toml

params Instruction

Could you write a description of the parameters, I don't understand what some of them mean.
I also do not know how to change the layout style.
Thanks!

[SOLVED] URL error when changing page/content

Hi, have an issue with the URLs created by the menu. When click more than one menu link out of home page, my URL is not “https://example.com/content”, is “https://example.com/content/content-2”. Simplifying, the URL is added.

I managed to fix it by changing the URL of each content of the menu in config.yml. Following the instructions of HUGO | Menus
e.g.
- name: Contact url: contact/ weight: 30--> - name: Contact url: /contact/ weight: 30
I add this to help if someone arrives the same error as me.
P.D: Thanks @charlola for the theme, it's nice and easy to use.
It has helped me create my first portfolio. Thank you.

Key 'original' has already been defined. in toml file

"/opt/build/repo/themes/charlolamode/theme.toml": unmarshal failed: Near line 50 (last key parsed ''): Key 'original' has already been defined.

Hey Team, while deploying this theme getting this error on Netlify . and seems like original also present in toml file, is this the way it should be ?

Full Building log:

6:05:05 PM: Netlify Build                                                 
6:05:05 PM: ────────────────────────────────────────────────────────────────
6:05:05 PM: 
6:05:05 PM: ❯ Version
6:05:05 PM:   @netlify/build 29.11.6
6:05:05 PM: 
6:05:05 PM: ❯ Flags
6:05:05 PM:   baseRelDir: true
6:05:05 PM:   buildId: 6471f8ea7bdff20008d83228
6:05:05 PM:   deployId: 6471f8ea7bdff20008d8322a
6:05:05 PM: 
6:05:05 PM: ❯ Current directory
6:05:05 PM:   /opt/build/repo
6:05:05 PM: 
6:05:05 PM: ❯ Config file
6:05:05 PM:   No config file was defined: using default values.
6:05:05 PM: 
6:05:05 PM: ❯ Context
6:05:05 PM:   production
6:05:05 PM: 
6:05:05 PM: Build command from Netlify app                                
6:05:05 PM: ────────────────────────────────────────────────────────────────
6:05:05 PM: 
6:05:05 PM: $ hugo
6:05:05 PM: WARN 2023/05/27 12:35:05 Failed to read module config for "charlolamode" in "/opt/build/repo/themes/charlolamode/theme.toml": unmarshal failed: Near line 50 (last key parsed ''): Key 'original' has already been defined.
6:05:05 PM: Start building sites …
6:05:05 PM: hugo v0.85.0-724D5DB5+extended linux/amd64 BuildDate=2021-07-05T10:46:28Z VendorInfo=gohugoio
6:05:05 PM: Error: Error building site: "/opt/build/repo/content/articles/Data_Visualization_Best_Pratices.md:2:1": failed to unmarshal YAML: yaml: mapping values are not allowed in this context
6:05:05 PM: Total in 17 ms
6:05:05 PM: 
6:05:05 PM: "build.command" failed                                        
6:05:05 PM: ────────────────────────────────────────────────────────────────
6:05:05 PM: 
6:05:05 PM:   Error message
6:05:05 PM:   Command failed with exit code 255: hugo (https://ntl.fyi/exit-code-255)
6:05:05 PM: 
6:05:05 PM:   Error location
6:05:05 PM:   In Build command from Netlify app:
6:05:05 PM:   hugo
6:05:05 PM: 
6:05:05 PM:   Resolved config
6:05:05 PM:   build:
6:05:05 PM:     command: hugo
6:05:06 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
6:05:05 PM:     commandOrigin: ui
6:05:05 PM:     publish: /opt/build/repo/public
6:05:05 PM:     publishOrigin: ui
6:05:06 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:05:06 PM: Failing build: Failed to build site
6:05:07 PM: Finished processing build request in 12.123s

404 when clicking on a page multiple times

When we click on on a tab multiple times for example if I click on the about page twice it is redirecting to
https://website.com/about/about which is returning a 404 error. This does not seem to happen when hosting locally but on any servers or hosting services like netlify this is happening. I think this is happening in your personal website as well

charlola / hugo-theme-charlolamode Goto Github PK

hugo-theme-charlolamode's Introduction

charlola.mode

Features

Quick Start

Open Visual Studio Code to edit your Blog

Basic Configuration

Change Profile Image

Add tabs

Add new content

Change colors

Disable 'Profile Mode'

Thank you!

Online Website

hugo-theme-charlolamode's People

Contributors

Stargazers

Watchers

Forkers

hugo-theme-charlolamode's Issues

Recommend Projects

Recommend Topics

Recommend Org