Hugo CSS SEO-optimized landing page

Project Structure:

landing-page/
├── archetypes/
│   └── default.md
├── content/
│   └── _index.md
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   └── landing.html
│   └── partials/
│       ├── header.html
│       ├── footer.html
│       └── cta.html
├── static/
│   ├── css/
│   │   └── main.css
│   └── images/
└── config.toml

Explanation:

The archetypes directory contains the default template for new content pages.
The content directory holds the content for the landing page, typically in Markdown format.
The layouts directory contains the HTML templates for the landing page.
- _default/baseof.html is the base template that defines the overall structure of the page.
- _default/landing.html is the specific template for the landing page.
- The partials directory contains reusable HTML components such as the header, footer, and CTA.
The static directory holds static assets such as CSS stylesheets and images.
The config.toml file contains the configuration settings for the Hugo site.

CSS Code Base:

Reset and base styles:

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set base font styles */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

Layout and spacing:

/* Set a max-width for the content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Add spacing between sections */
section {
  margin-bottom: 40px;
}

Typography:

/* Style headings */
h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Style paragraphs */
p {
  margin-bottom: 15px;
}

Call-to-action (CTA) button:

/* Style the CTA button */
.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #0056b3;
}

Responsive design:

/* Media queries for responsive layout */
@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 20px;
  }
}

These are just a few examples of CSS styles you can apply to your landing page. You'll need to customize and expand upon them based on your specific design requirements.

Remember to optimize your CSS for performance by minimizing file size, using efficient selectors, and leveraging browser caching.

In the Hugo templates, you'll include the CSS file in the <head> section of your baseof.html file:

<head>
  <link rel="stylesheet" href="{{ "css/main.css" | relURL }}">
</head>

This assumes that your CSS file is located at static/css/main.css.

You can then structure your landing page content in the landing.html template using HTML and Hugo's template language. Use the appropriate HTML tags and classes to apply the CSS styles to your content.

Remember to test your landing page across different devices and browsers to ensure a consistent and responsive experience.

3.3 KiB Raw Blame History

Hugo CSS SEO-optimized landing page

3.3 KiB

Raw Blame History