Alvyn Theme Configuration

author's avatar Muhammed A. Senghore
3 min read

Alvyn is a clean, minimalist & responsive hugo landing page theme. It’s lightweight, built for performance and simplicity, and it supports both dark and light mode. It’s SEO friendly and easy to customize. For more detailed documentation, visit the GitHub repository. And to see the therme demo, visit logstack.dev.

🔧 Installation & Setup

Install the prerequisites: Git, dart-sass, and Hugo.

In your site’s root directory run the following commands below

bash 
1

git init
bash 
1

git submodule add https://github.com/logstacklabs/alvyn.git themes/alvyn

Or clone the reposirory

bash 
1

git clone https://github.com/logstacklabs/alvyn.git themes/alvyn

Enable the theme in your hugo.toml:

bash 
1

echo "theme = 'alvyn'" >> hugo.toml

Install dependencies

bash 
1

cd themes/alvyn && npm install

Configurations

  • Add this configuration to your hugo.toml file.
toml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

baseURL = 'https://example.org/'
languageCode = 'en-US'
title = 'Logstack Labs'
theme = 'alvyn'

[params]
    description = ''
    keywords = []

    [params.config]
        logo = ''
        favicon = ''

    [params.config.analytics]
        goatCounter = ''
        googleAnalytics = ''

    [params.config.seo]
        fbAdminsId = ''
        twitterHandle = ''
        opengraphImage = ''
        twitterCardImage = ''

[menus]
    [[menus.main]]
        name = 'About'
        weight = 10
    [[menus.main]]
        name = 'Contact'
        weight = 40
# Add more menus if you want

[outputs]
    home = ['HTML', 'RSS']

[taxonomies]

[minify]
    minifyOutput = false

[module]
    [module.hugoVersion]
        extended = false
        min = '0.148.0'

For your sections configurations, create a file sections.toml in the data directory of your site and add your configurations.

toml 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

[hero]
    tagline = ''
    summary = ''
    [[hero.cta]]
        anchor = '' # Link of the CTA button.
        label = '' # Label/Title of the CTA button.
    # A maximum of 3 buttons will be displayed on the hero section


[about]
    title = ''
    summary = ''
    [about.highlights]
        title = ''
        entries = []


[expertise]
    title = ''
    tagline = ''
    [[expertise.entry]]
        icon = ''
        title = ''
        description = ''


[projects]
    title = ''
    tagline = ''
    [[projects.entry]]
        title = ''
        url = ''
        summary = ''
        techStack = []


[rssFeed]
    title = ''
    tagline = ''
    url = ''


[services]
    title = ''
    tagline = ''
    [[services.entry]]
        title = ''
        summary = ''


[team]
    title = ''
    tagline = ''
    [[team.member]]
        avatar = ''
        name = ''
        role = ''
        summary = ''
        [team.member.urls]
            website = ''
            email = ''
            github = ''
            linkedin = ''


[contact]
    title = ''
    tagline = ''
    [contact.forms]
        formSubjects = []
    [contact.forms.keys]
        web3forms = ''
        recaptcha = ''
    [contact.cards]
        title = ''
        phones = []
        hours = []
        emails = []
        locations = []


[footer]
    ccHolder = ''
    [[footer.links]]
        anchor = ''
        label = ''
    [footer.socials]
        GitHub = ''
        youtube = ''
        LinkedIn = ''
    [footer.socials.others]
    # This section is for icons that are not available under font-awesome's `fa-brands` category.
        blog = ''

Related Posts

Muxel Theme Configuration

Uniport Theme Configuration