medusa/the_information_nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hugo document

Browse Source
This commit is contained in:
Whisker Jones
2024-05-23 20:46:20 -06:00
parent cd2a000781
commit f4dc304754
1 changed files with 200 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
tech_docs/webdev/hugo.md
View File

@@ -252,3 +252,203 @@ Visit `http://localhost:1313` to see your site in action.
- Use Python/Flask for server-side data handling.
This approach ensures you have a robust, scalable, and interactive solution for SMMA data reporting, leveraging your data analysis skills while keeping the setup and maintenance straightforward. If you have further questions or need more detailed guidance, feel free to ask!
---
Here's a detailed approach to creating a data visualization project using Hugo, Bootstrap, and Chart.js, broken down into specific steps and components:
### 1. **Project Setup**
- **Install Hugo**: Make sure Hugo is installed on your machine. Follow the installation guide from the [official Hugo site](https://gohugo.io/getting-started/installing/).
- **Create a New Hugo Site**: Run `hugo new site <site-name>` to generate a new Hugo site.
```sh
hugo new site smma-telemetry
cd smma-telemetry
```
- **Choose a Theme**: Select a Hugo theme that supports Bootstrap, or integrate Bootstrap manually. For this example, we'll use the "Hugo Bootstrap" theme.
```sh
git init
git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
```
### 2. **Organize Content Structure**
- **Create Sections**: Define sections in your Hugo site for different reports. Each section can represent a different data report.
- Example: `content/reports/`
```sh
mkdir -p content/reports
```
- **Markdown Files**: Create Markdown files for each report in the corresponding section.
- Example: `content/reports/report1.md`
```sh
hugo new reports/report1.md
```
### 3. **Layout and Templates**
- **Base Template**: Create a base template in `layouts/_default/baseof.html` to include the common HTML structure, including Bootstrap CSS and JS.
**layouts/_default/baseof.html:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }}</title>
<meta name="description" content="{{ .Description }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ "css/styles.css" | relURL }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ "/" | relURL }}">{{ .Site.Title }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ "/" | relURL }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ "/reports/" | relURL }}">Reports</a>
</li>
</ul>
</div>
</nav>
<main class="container mt-4">
{{ block "main" . }}{{ end }}
</main>
<footer class="footer bg-light text-center py-3">
<p>&copy; {{ now.Format "2006" }} {{ .Site.Title }}</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ "js/scripts.js" | relURL }}"></script>
</body>
</html>
```
- **Single Report Template**: Create a single report layout in `layouts/reports/single.html` to define how each report page will be rendered.
**layouts/reports/single.html:**
```html
{{ define "main" }}
<article class="report">
<header>
<h1>{{ .Title }}</h1>
<time datetime="{{ .Date }}">{{ .Date }}</time>
</header>
<section>
{{ .Content }}
</section>
</article>
{{ end }}
```
### 4. **Static Files**
- **CSS and JS**: Add custom CSS and JS files in the `static/` directory for additional styling and scripting if needed.
```sh
mkdir -p static/css
mkdir -p static/js
```
- **Custom CSS**: Create a custom CSS file for additional styles.
**static/css/styles.css:**
```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background: #f4f4f4;
}
.report {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.report header {
margin-bottom: 20px;
}
```
- **Custom JS**: Create a custom JS file for additional scripts.
**static/js/scripts.js:**
```js
document.addEventListener('DOMContentLoaded', function () {
console.log('Custom JS Loaded');
});
```
### 5. **Integrate Chart.js**
- **Chart.js Configuration**: In your report Markdown files, include configuration details for the charts. You can use shortcodes or partials for better organization.
- **Shortcode Example**: Create a shortcode for Chart.js in `layouts/shortcodes/chart.html`.
**layouts/shortcodes/chart.html:**
```html
<canvas id="{{ .Get "id" }}" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('{{ .Get "id" }}').getContext('2d');
var myChart = new Chart(ctx, {
type: '{{ .Get "type" }}',
data: {
labels: {{ .Get "labels" }},
datasets: [{
label: '{{ .Get "label" }}',
data: {{ .Get "data" }},
backgroundColor: {{ .Get "backgroundColor" }},
borderColor: {{ .Get "borderColor" }},
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
```
- **Usage in Markdown**: Use the shortcode in your report Markdown files.
**content/reports/report1.md:**
```markdown
---
title: "Report 1"
date: 2024-05-23
---
# Report 1 Data Visualization
{{< chart id="myChart" type="bar" labels='["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]' data='[12, 19, 3, 5, 2, 3]' label="Votes" backgroundColor='["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"]' borderColor='["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"]' >}}
```
### 6. **Build and Deploy**
- **Local Development**: Use `hugo server` to serve your site locally and see the changes in real-time.
```sh
hugo server -D
```
- **Deployment**: Once satisfied, deploy your site to a hosting platform of your choice (e.g., GitHub Pages, Netlify).
```sh
hugo --minify
```
### **Deliverables Checklist**
1. **Hugo Site**: A fully functional Hugo site with Bootstrap integration.
2. **Content Structure**: Organized content structure with separate sections for different reports.
3. **Templates**: Base template and report-specific templates configured.
4. **Static Assets**: Custom CSS and JS files for additional styling and scripting.
5. **Chart Integration**: Shortcodes or partials for integrating Chart.js into Markdown files.
6. **Reports**: Sample reports with various types of charts (bar, line, pie, etc.).
7. **Deployment**: The site deployed and accessible online.
By following these steps, you can efficiently create a data visualization site using Hugo, Bootstrap
, and Chart.js. This structured approach will help you manage the project components and achieve a clear deliverable. If you have any questions or need further assistance, feel free to ask!