# 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:
1. Reset and base styles:
```css
/* 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;
}
```
2. Layout and spacing:
```css
/* Set a max-width for the content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Add spacing between sections */
section {
margin-bottom: 40px;
}
```
3. Typography:
```css
/* 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;
}
```
4. Call-to-action (CTA) button:
```css
/* 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;
}
```
5. Responsive design:
```css
/* 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 `` section of your `baseof.html` file:
```html
```
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.
---
Sure, let's perform a logic test and step through what we have so far to ensure we have everything accounted for. We'll check each component of the project structure and make sure it's clear and complete.
## Project Structure
### 1. `archetypes/default.md`
- **Purpose**: Provides a default structure for new content.
- **Current Content**:
```markdown
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---
```
- **Logic Check**: This is correct for creating new content pages. For a single-page landing site, this is minimal but sufficient.
### 2. `content/_index.md`
- **Purpose**: Holds the content for the landing page.
- **Current Content**:
```markdown
---
title: "Landing Page"
---
# Welcome
```
- **Logic Check**: This is a good starting point. It sets the title and includes a heading.
### 3. `layouts/`
- **Purpose**: Contains HTML templates for the landing page.
- **Structure**:
```
layouts/
├── _default/
│ ├── baseof.html
│ └── landing.html
└── partials/
├── header.html
├── footer.html
└── cta.html
```
- **Logic Check**: The structure is logical. The `_default` folder contains the base template and the landing page template. The `partials` folder contains reusable HTML components.
### 4. `static/`
- **Purpose**: Holds static assets such as CSS stylesheets and images.
- **Structure**:
```
static/
├── css/
│ └── main.css
└── images/
```
- **Logic Check**: This is correct. CSS and images are appropriately placed in the `static` directory.
### 5. `config.toml`
- **Purpose**: Contains the configuration settings for the Hugo site.
- **Content Example**:
```toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Landing Page"
theme = ""
```
### Detailed Steps to Implement Each Component
#### `layouts/_default/baseof.html`
- **Purpose**: Base template that defines the overall structure of the page.
- **Content**:
```html
{{ .Title }}
{{ partial "header.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
```
#### `layouts/_default/landing.html`
- **Purpose**: Specific template for the landing page.
- **Content**:
```html
{{ define "main" }}
```
### `static/css/main.css`
- **Purpose**: Contains CSS styles for the landing page.
- **Content**:
1. **Reset and base styles**:
```css
/* 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;
}
```
2. **Layout and spacing**:
```css
/* Set a max-width for the content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Add spacing between sections */
section {
margin-bottom: 40px;
}
```
3. **Typography**:
```css
/* 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;
}
```
4. **Call-to-action (CTA) button**:
```css
/* 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;
}
```
5. **Responsive design**:
```css
/* Media queries for responsive layout */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}
}
```
### Final Logic Check
1. **Project Structure**: Logical and organized.
2. **Template Files**: Base and partial templates are defined correctly.
3. **Content File**: Initial content for the landing page is set.
4. **CSS File**: Provides basic styling and responsiveness.
Everything seems to be in place for a basic Hugo CSS SEO-optimized landing page with a call to action. You can now proceed to create and deploy your site.
### Next Steps
1. **Build and Serve the Site**:
```sh
hugo server
```
This will build your site and serve it locally at `http://localhost:1313`.
2. **Customize Content and Styles**:
Modify the content in `_index.md` and adjust the CSS styles in `main.css` to match your design requirements.
3. **Deploy the Site**:
Once satisfied, you can deploy your site to your preferred hosting service. Hugo has a [deployment guide](https://gohugo.io/hosting-and-deployment/) to help